搭建一个 Fuwari 博客（二）：集成 Twikoo 评论系统

在上一篇《搭建一个 Fuwari 博客（一）》中，我们成功创建并部署了一个极简的 Fuwari 博客。但静态博客默认不支持评论功能，无法与读者互动。本文将带你为 Fuwari 博客添加一个轻量、免费、无需后端的评论系统 —— Twikoo ，全程只需几步，即可实现评论、点赞、通知等完整功能。

为什么选择 Twikoo？#

Twikoo 是一个简洁、安全、免费的静态网站评论系统，支持多种部署方式，包括：

腾讯云开发（Tencent CloudBase）
Vercel（需要 不再免费 的Mongodb Atlas）
Cloudflare Workers（本文采用）

我们选择 Cloudflare Workers + D1 + R2 的组合，原因如下：

全球加速：Cloudflare 的 CDN 节点遍布全球，访问速度快。
免费额度充足：D1（数据库）、R2（存储）、Workers（计算）均提供免费层，适合个人博客。
无需额外账号：与 GitHub 深度集成，一键部署。
高安全性：支持 Cloudflare Turnstile 防止机器人刷评。

部署后端：使用 Cloudflare Workers#

过去我使用 ClawCloud Run 的 Docker 部署，但考虑到小厂商的安全性和稳定性，我决定迁移到更可靠的 Cloudflare 生态。

1. Fork 项目仓库#

首先，Fork 官方仓库或社区优化版本：

官方推荐：twikoojs/twikoo-cloudflare
无 R2 依赖版（适合未绑定支付方式的用户）：0x6768/twikoo-cloudflare

⚠️ 如果你未绑定支付方式，无法创建 R2 存储桶，建议使用我的修改版，它移除了 R2 依赖，仅使用 D1 存储数据。

2. 创建 D1 数据库#

登录 Cloudflare Dashboard
进入 Workers & Pages → D1 Databases → Create Database
输入数据库名（如 twikoo），创建后复制 Database ID
进入数据库控制台，执行 schema.sql 中的建表语句（来自仓库根目录）

3. 配置 `wrangler.toml`#

修改项目中的 wrangler.toml 文件，填入你的 D1 数据库 ID：

1
[[d1_databases]]
2
binding = "DB"
3
database_name = "twikoo"
4
database_id = "your-d1-database-id-here"

4. 创建 R2 存储桶（可选）#

如果你使用官方版本，还需创建 R2 存储桶用于图片上传：

进入 R2 → Create Bucket，命名为 twikoo
绑定自定义域名（如 twikoo.r2.yourdomain.com）
在 wrangler.toml 中配置：

1
[vars]
2
R2_PUBLIC_URL = "https://twikoo.r2.yourdomain.com"

5. 部署 Worker#

在 Cloudflare 创建 Worker 项目，连接你的 GitHub 仓库
设置构建命令：

1
npx wrangler deploy --minify

提交代码，触发自动部署

部署成功后，访问你的 Worker 域名（如 https://twikoo.yourdomain.workers.dev），应返回：

1
{
2
  "code": 100,
3
  "message": "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置",
4
  "version": "1.6.41"
5
}

当然可以，以下是优化和补充后的第六步内容，特别针对国内访问优化，并包含“优选 IP”相关建议：

6. 绑定自定义域名（国内推荐：含优选 IP 加速）#

为了提升国内用户的访问速度和稳定性，强烈建议为 Twikoo Worker 绑定一个自定义域名，并结合 Cloudflare 优选 IP 进行加速。

步骤 1：在 Worker 中绑定自定义域名#

进入 Cloudflare Workers 控制台，选择你的 Worker（如 twikoo-cloudflare）。
点击 Settings（设置） → Domains & Routes（域和路由） → Add（添加）。
弹出的页面中
- 输入你的路由（Route） + /*，例如：https://twikoo.yourblog.com/*
- 选择对应的区域（Zone）
保存设置。

🌐 域名建议：使用子域名如 twikoo.yourdomain.com，便于管理且不影响主站。

步骤 2：添加 DNS 解析记录#

在你的域名 Cloudflare DNS 管理页面添加一条 CNAME 记录：

类型	名称	内容	代理状态
CNAME	`twikoo`	`cf.hw.072103.xyz`	关闭

✅ 说明：cf.hw.072103.xyz 是由二叉树树提供的 Cloudflare 优选 IP 域名，其解析 IP 经过测速筛选，对国内访问延迟低、稳定性高，常用于 Workers 反代优化。

步骤 3：验证部署#

访问 https://twikoo.yourblog.com，如果返回以下 JSON 内容，说明绑定成功：

1
{
2
  "code": 100,
3
  "message": "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置",
4
  "version": "1.6.41"
5
}

Worker 限额：100,000 次请求/天（普通网站应该是用不完的）

集成前端：为 Fuwari 主题添加评论#

参考 HyperCherry 的教程，我们创建一个 Twikoo.astro 组件。

问题：脚本加载顺序导致 `twikoo is not defined`#

直接引入 CDN 脚本并立即调用 twikoo.init() 可能因加载顺序导致错误：

1
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.32/twikoo.all.min.js"></script>
2
<script>twikoo.init(config);</script> <!-- ❌ 可能报错 -->

解决方案：动态加载 + Swup 兼容#

由于 Fuwari 使用 Swup 实现页面平滑过渡，JavaScript 不会重新执行，因此必须手动触发评论加载。

步骤 1：创建事件通知函数#

在 src/layouts/Layout.astro 中添加：

1
function initCommentComponent() {
2
  const event = new Event("loadComment");
3
  document.dispatchEvent(event);
4
}

步骤 2：在 Swup 生命周期中调用#

1
window.swup.hooks.on("content:replace", () => {
2
  initCustomScrollbar();
3
  initCommentComponent(); // 触发评论重载
4
});

步骤 3：初始化页面时也调用一次#

1
function init() {
2
  // ... 其他初始化
3
  initCommentComponent(); // 首次加载
4
}

步骤 4：创建 `Twikoo.astro` 组件#

1
---
2
interface Props {
3
  path: string;
4
}
5

6
const config = {
7
  el: "#comment",
8
  path: Astro.props.path,
9
};
10
---
11

12
<!-- 简化了配置部分的代码，实际上可以把配置文件统一写入fuwari的配置文件统一读取 -->
13
<div id="comment"></div>
14
<script define:vars={{ config }}>
15
  function loadTwikoo() {
16
    const script = document.createElement("script");
17
    script.src =
18
      "https://cdn.jsdmirror.com/gh/yoghurtlee-thu/customcdn@352853c/js/twikoo/1_6_39.min.js";
19
    script.defer = true;
20
    script.onload = () => {
21
      twikoo.init({
22
        ...config,
23
        envId: "替换成你的envId", // 你的envId，获取方法请参照Twikoo文档
24
        lang: "zh-CN", // 评论区语言
25
      }); // 传入配置信息
26
    };
27
    document.body.appendChild(script);
28
  }
29
  document.addEventListener("loadComment", loadTwikoo, { once: true });
30
</script>

步骤 5：CSS 样式#

在src\styles目录下新建twikoo.css文件，添加如下代码：

1
:root {
2
  --tk-text: black;
3
  --code-block-text: #d1d5db;
4
}
5

6
html.dark {
7
  --tk-text: #d1d5db;
8
}
9

10
.tk-comments {
11
  @apply text-[var(--tk-text)];
12
}
13

14
.tk-submit {
15
  .tk-avatar {
16
    @apply hidden;
17
  }
18
}
19

20
/* Text Area */
21
.tk-row {
22
  .tk-col {
23
    @apply flex-col-reverse;
24
    .tk-input {
25
      textarea {
26
        @apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)];
27
      }
28
    }
29
  }
30
}
31

32
/* Meta */
33
.tk-meta-input {
34
  @apply relative mt-3;
35
  div {
36
    @apply min-h-10;
37
    .el-input-group__prepend {
38
      @apply !bg-inherit rounded-l-lg;
39
      min-height: inherit;
40
    }
41
    input {
42
      @apply px-4 rounded-r-lg focus:!border-[var(--primary)];
43
      min-height: inherit;
44
    }
45
  }
46
}
47

48
/* Button */
49
.tk-row.actions {
50
  @apply w-full !ml-0 !mt-0;
51
  .__markdown {
52
    @apply !hidden;
53
  }
54
  .tk-preview,
55
  .tk-send,
56
  .tk-cancel {
57
    @apply border-none rounded-lg px-3 py-0 h-8
58
       !bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)]
59
      !text-[var(--btn-content)] disabled:!text-[#ffffffa1];
60
  }
61
}
62

63
/* Comment title */
64
.tk-comments-title {
65
  .__comments svg {
66
    @apply fill-[var(--primary)];
67
  }
68
}
69

70
.tk-comment {
71
  @apply border-[1px] border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all;
72
  .tk-action-icon svg {
73
    @apply fill-[var(--primary)];
74
  }
75
}
76

77
.tk-action {
78
  .tk-action-count {
79
    @apply text-[var(--btn-content)];
80
  }
81
}
82

83
.tk-meta {
84
  .tk-tag {
85
    @apply border-none rounded-lg text-[var(--btn-content)];
86
  }
87

88
  .tk-tag-green {
89
    @apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)];
90
  }
91
}
92

93
/* Content & Preview */
94
.tk-content,
95
.tk-preview-container {
96
  /* by @microsic
97
    Make the picture type emoticons display without wrapping
98
  */
99
  img {
100
    @apply inline !align-bottom;
101
  }
102

103
  a {
104
    @apply link link-underline text-[var(--primary)] font-medium;
105
  }
106

107
  .tk-ruser {
108
    @apply no-underline;
109
  }
110

111
  :not(pre) > code {
112
    @apply bg-[var(--inline-code-bg)] rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold;
113
  }
114

115
  li {
116
    @apply before:content-['•'] before:text-[var(--primary)];
117
  }
118
}
119

120
/* Replies */
121
.tk-replies {
122
  .tk-comment {
123
    @apply bg-[var(--page-bg)];
124
    .tk-content {
125
      > span:first-of-type {
126
        @apply text-xs;
127
      }
128
    }
129
  }
130
}
131

132
.twikoo .code-block {
133
  pre {
134
    @apply !rounded-xl;
135
  }
136

137
  /* Code block fall back */
138
  pre:not([class]) {
139
    @apply bg-[#2d2d2d] overflow-auto p-2 text-[var(--code-block-text)];
140
  }
141

142
  .copy-btn-icon {
143
    width: inherit !important;
144
    height: inherit !important;
145
  }
146
}
147

148
.tk-expand-wrap .tk-expand,
149
.tk-collapse-wrap .tk-expand {
150
  @apply hover:rounded-lg mt-1 hover:bg-[var(--btn-plain-bg-hover)];
151
}
152

153
/* by @SirTamago
154
Make the emoji component display correctly when there are too many emoji packs
155
*/
156
.card-base {
157
  overflow: visible;
158
}

使用组件#

在文章页面中引入：

1
---
2
import  Twikoo   from "../../components/misc/Twikoo.astro"; //添加这一行 替换成你的真实路径
3
const pathname = Astro.url.pathname;  //添加这一行
4
---
5
<Twikoo path={pathname} />

配置评论管理面板#

部署完成后，访问你的评论组件，点击右下角齿轮图标进入管理面板：

首次登录：设置管理员密码
配置管理：
- 隐私设置 → IMAGE_CDN 设置为 cloudflare 启用图片上传
- 反垃圾 → 配置 Cloudflare Turnstile 防止机器人
通知设置：通过 pushoo.js 配置邮件、微信、Telegram 等通知

🔐 安全建议：

使用强密码

隐藏管理入口（可关闭齿轮图标）

定期备份 D1 数据

总结#

通过 Twikoo + Cloudflare Workers + D1/R2 的组合，我们为静态网站构建了一个稳定、安全、免费的评论系统。相比传统方案，它具有：

✅ 全球加速
✅ 无需服务器运维
✅ 支持图片上传与反垃圾
✅ 与现代前端框架完美集成

无论你是使用 Fuwari、Hexo、Astro 还是其他静态博客，都可以轻松集成 Twikoo，让你的网站真正“活”起来。

参考文章：

🌐 评论已开启，欢迎在下方留言交流！