CloudFlare部署Waline操作指南 -

经本人测试成功，现在给大家分享一套零服务器、全程免费、开箱即用的方案：使用 Cloudflare Worker + D1 云端数据库搭建 Waline 评论系统。

本方案深度适配 Typecho 博客，支持暗黑模式自适应、头像懒加载、人机验证、垃圾评论拦截，功能齐全且部署简单，新手可直接复刻部署成功。

一、方案优势

全程免费：依托 Cloudflare 免费套餐，足够个人博客日常使用
无需服务器：无服务架构，不占用主机资源，部署后近乎零运维
自带云端数据库：D1 免费数据库，自动存储评论、用户、浏览量数据
功能完善：支持邮件通知、反垃圾评论、人机验证、数据备份迁移
适配 Typecho：自动跟随主题明暗切换，样式统一适配主流主题

二、部署前置准备

部署前准备好以下基础环境，全部免费无门槛：

可用的 Cloudflare 账号
电脑安装 Node.js ≥22、Git、pnpm、Wrangler
正常运行的 Typecho 博客

1. 安装部署环境

终端执行以下命令，一键安装全部工具：

npm install -g pnpm
npm install -g wrangler

# 校验安装成功
node -v
pnpm -v
wrangler --version

2. 授权 Cloudflare

执行命令跳转浏览器，登录并授权你的 Cloudflare 账号即可：

wrangler login

三、部署 Waline 服务端

采用社区优化版 Waline\_On\_Worker，专为 Worker 架构优化，轻量化、稳定性更强，全程复制命令即可部署。

1. 拉取源码并安装依赖

git clone https://github.com/wuyilingwei/Waline_On_Worker.git
cd Waline_On_Worker
pnpm install

2. 创建 D1 云端数据库

wrangler d1 create waline-db

执行成功后，终端会输出完整数据库配置，全部复制保存，后续配置需要用到。

3. 配置核心文件

复制官方示例配置，生成正式配置文件：

cp wrangler.toml.example wrangler.toml

打开 wrangler.toml，粘贴刚才的 D1 配置，替换为自己的数据库 ID，最终配置如下：

name = "waline-on-worker"
main = "src/worker.ts"
compatibility_date = "2025-05-20"
workers_dev = true

[[d1_databases]]
binding = "DB"
database_name = "waline-db"
database_id = "你的D1数据库ID"

4. 初始化数据库表

pnpm run db:init

5. 设置必填密钥

配置 JWT 鉴权密钥，输入一串32位以上随机字符即可：

wrangler secret put JWT_SECRET

6. 正式部署上线

pnpm run deploy

部署完成后，终端会生成你的 Waline 后端地址：https://waline-on-worker.xxx.workers.dev

7. 部署校验

后台入口：你的域名/ui

重要提醒：首个注册账号自动为超级管理员，请勿随意注册陌生账号。

四、服务端优化配置

1. 站点基础配置

编辑 wrangler.toml，替换为自己的博客信息，修改后重新部署生效：

[vars]
SITE_NAME = "你的博客名称"
SITE_URL = "https://你的博客域名"
SECURE_DOMAINS = "你的博客域名"
IPQPS = "60"
COMMENT_AUDIT = "false"
DISABLE_USERAGENT = "false"
DISABLE_REGION = "false"
LOGIN = ""
LEVELS = "5,10,20,50"
AVATAR_PROXY = "https://avatar.75cdn.workers.dev"

2. 进阶功能配置（按需开启）

以下密钥设置后即时生效，无需重新部署：

人机验证（防刷评）：wrangler secret put TURNSTILE_SECRET
反垃圾评论：wrangler secret put AKISMET_KEY
邮件通知：配置 SMTP 系列密钥实现评论提醒

3. Turnstile 人机验证密钥获取教程

Turnstile 是 Cloudflare 免费人机验证服务，可有效拦截机器人灌水、恶意刷评，无需额外审核成本，非常适合个人博客使用。下面是完整的密钥获取与配置步骤：

步骤一：进入 Turnstile 管理面板

步骤二：创建验证项目

点击页面「添加站点」按钮，按需填写基础配置：

组件名称：自定义备注（如：博客评论验证）
绑定域名：填写你的博客主域名（无需携带 https://）
验证模式：选择官方默认的 Managed 托管模式

其余参数保持默认，直接提交创建即可。

步骤三：获取两组核心密钥

项目创建成功后，页面会生成两组密钥，分工不同、请勿混淆：

Site Key（前端公钥）：公开密钥，配置在博客前端评论代码中
Secret Key（后端私钥）：私密密钥，用于服务端校验，禁止对外泄露

步骤四：前后端分别配置

1. 前端配置：将复制的 Site Key 填入下方 Typecho 适配代码的 turnstileKey 参数中。

2. 后端配置：在终端执行以下命令，粘贴填入 Secret Key 完成绑定：

wrangler secret put TURNSTILE_SECRET

后续如需查看、重置密钥，可进入该 Turnstile 项目的编辑页面重新获取。

五、Typecho 主题适配代码

打开主题目录 comments.php，删除原有全部评论代码，替换为以下完整版适配代码。自带暗黑自适应、头像懒加载、防串评、人机验证，兼容全量 Typecho 主题。

<?php if($this->allow('comment')): ?>
<section id="comments" class="post-comments">
    <h3 class="comments-title">评论 (<?php $this->commentsNum(); ?>)</h3>
    <div id="waline"></div>
</section>
<?php else: ?>
<div class="comment-close">评论已关闭</div>
<?php endif; ?>

<style>
:root {
  --waline-text-color: #333;
  --waline-bg-color: #ffffff;
  --waline-border-color: #e5e7eb;
  --waline-primary-color: #2563eb;
}
html.dark, body.dark {
  --waline-text-color: #e5e7eb;
  --waline-bg-color: #1f2937;
  --waline-border-color: #374151;
  --waline-primary-color: #3b82f6;
}
#waline {
  color: var(--waline-text-color);
  background: var(--waline-bg-color);
}
#waline .wl-card,
#waline .wl-editor {
  background-color: var(--waline-bg-color);
  border-color: var(--waline-border-color);
}
#waline .wl-item {
  border-color: var(--waline-border-color);
}
</style>

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

function getDarkMode() {
  return document.documentElement.classList.contains('dark') || document.body.classList.contains('dark');
}

const waline = init({
  el: '#waline',
  serverURL: 'https://waline-on-worker.muzipress.workers.dev',
  turnstileKey: '替换为你的Turnstile前端SiteKey',
  pageId: '<?php $this->cid(); ?>',
  pageTitle: '<?php echo $this->title; ?>',
  pageUrl: '<?php $this->permalink(); ?>',
  avatar: 'retro',
  lazyLoadAvatar: true,
  pageview: true,
  emoji: true,
  codeHighlight: true,
  imageUploader: false,
  dark: getDarkMode()
});

// 监听主题自动切换明暗模式
const darkObserver = new MutationObserver(() => {
  waline.update({ dark: getDarkMode() });
});
darkObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
darkObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
</script>

代码修改说明

替换 serverURL 为你的 Worker 后端地址
填入自己的 Turnstile 前端 SiteKey
自动适配主题明暗切换，无需手动刷新

六、后台安全基础设置（必做）

注册首个超级管理员账号
关闭公开注册功能，防止陌生人注册
按需开启评论审核，新评论手动放行
开启人机验证、反垃圾评论功能
定期备份数据，双重备份防止数据丢失

七、常用运维命令

# 实时日志排查报错
wrangler tail

# 查看全部密钥
wrangler secret list

# 导出D1数据库备份
wrangler d1 export waline-db --remote > backup.sql

# 修改配置后重新部署
pnpm run deploy

八、常见问题排查

评论串页：检查页面ID代码是否为 <?php $this->cid(); ?>
跨域报错：填写正确博客域名并重新部署
暗黑模式失效：核对主题暗黑模式 Class 名称
人机验证失败：前后端密钥配对一致，域名加入白名单
无邮件通知：核对全套 SMTP 配置，通过日志排查错误

九、总结

这套 Waline 部署方案完全免服务器、免运维，免费稳定且适配性极强。完美兼容 Typecho 博客，兼具颜值、速度与安全性，足以满足个人博客的全部评论需求，是目前最优的免费评论系统方案。

CloudFlare部署Waline操作指南

一、方案优势

二、部署前置准备

1. 安装部署环境

2. 授权 Cloudflare

三、部署 Waline 服务端

1. 拉取源码并安装依赖

2. 创建 D1 云端数据库

3. 配置核心文件

4. 初始化数据库表

5. 设置必填密钥

6. 正式部署上线

7. 部署校验

四、服务端优化配置

1. 站点基础配置

2. 进阶功能配置（按需开启）

3. Turnstile 人机验证密钥获取教程

五、Typecho 主题适配代码

代码修改说明

六、后台安全基础设置（必做）

七、常用运维命令

八、常见问题排查

九、总结

相关文章

添加评论取消回复

CloudFlare部署Waline操作指南

一、方案优势

二、部署前置准备

1. 安装部署环境

2. 授权 Cloudflare

三、部署 Waline 服务端

1. 拉取源码并安装依赖

2. 创建 D1 云端数据库

3. 配置核心文件

4. 初始化数据库表

5. 设置必填密钥

6. 正式部署上线

7. 部署校验

四、服务端优化配置

1. 站点基础配置

2. 进阶功能配置（按需开启）

3. Turnstile 人机验证密钥获取教程

五、Typecho 主题适配代码

代码修改说明

六、后台安全基础设置（必做）

七、常用运维命令

八、常见问题排查

九、总结

相关文章

添加评论 取消回复

添加评论取消回复