静态网站一旦需要评论功能,就会遇到状态保存和防 spam 的问题。
Acecore 没有引入外部评论 SaaS 或嵌入式 widget,而是在 PR #101 中用 Cloudflare 内的组件完成了实现。
- Astro 显示评论 UI
- Cloudflare Pages Functions 提供
/api/comments - Cloudflare D1 保存评论
- Cloudflare Turnstile 保护投稿
wrangler.jsonc区分 preview 和 production
重点是:评论栏不是页面里的第三方孤岛,而是站点现有 Cloudflare 架构的一部分。
结构
实现范围很小。
| 层 | 文件或服务 |
|---|---|
| UI | src/components/BlogComments.astro |
| 页面位置 | src/views/BlogPostPage.astro |
| API | functions/api/comments.ts |
| 保存 | D1 binding COMMENTS_DB |
| bot 对策 | Cloudflare Turnstile |
| schema | migrations/0001_create_blog_comments.sql |
UI 通过 GET /api/comments?slug=...&locale=... 读取评论,并通过 POST /api/comments 投稿。
Pages Function 在写入前验证 origin、payload、Turnstile、rate limit、重复投稿和禁止内容。
为什么使用 D1
评论数据需要按文章查询、按时间排序、soft delete、重复检测和限流统计。D1 可以用 SQL 很直接地表达这些操作。
显示时只取 deleted_at IS NULL 的行。遇到 spam 时,不需要物理删除,只要给 deleted_at 写入时间即可隐藏。
查询使用 prepare(...).bind(...),避免把用户输入直接拼接到 SQL 里。
Wrangler 管理绑定
wrangler.jsonc 中定义 COMMENTS_DB。
preview 使用 acecore-comments-preview,production 使用 acecore-comments-production。这样 PR preview 不会误写 production 数据库。
Cloudflare Pages 文档也说明,使用 Wrangler 配置时,它会成为 Pages project configuration 的 source of truth。
Turnstile 必须服务端验证
前端显示 Turnstile widget 只是第一步。
投稿时,Pages Function 会把 token 和 secret key 发送到 Cloudflare Siteverify API。验证结果成功后,才进入保存流程。
实现还会检查 Siteverify 返回的 hostname 是否在 allowlist 中。Cloudflare 的 Any Hostname 文档也要求在 server-side code 中验证 hostname。
spam 对策
第一版故意保持严格。
拒绝的内容包括:
- URL
- 邮箱地址
- HTML 标签
- Markdown 链接
- 过度重复字符
- 常见宣传词
- honeypot 字段
限流也分两层:内存中的短期限流,以及 D1 中基于 client_hash 的持久限流。client_hash 使用 salt 后的 SHA-256,不保存原始 IP。
SEO 与搜索
评论区域标记为 data-pagefind-ignore,评论内容通过客户端读取。因此评论不会成为文章正文的一部分,也不会进入 Pagefind 索引。
企业博客中,正文是审核过的内容,评论是互动内容。两者分开管理更安全。
总结
外部评论服务很方便,但不是唯一选择。
如果网站已经运行在 Cloudflare Pages 上,那么 Pages Functions、D1、Turnstile 和 Wrangler 就足以构成一个轻量评论系统。
这样可以把 UI、数据、preview/production 分离和安全边界都放在同一个 Cloudflare 运维模型中。
参考
为什么不用外部评论服务?
D1 适合保存评论吗?
只在前端放 Turnstile 可以吗?
评论
Gui
Acecore 代表。从业务课题梳理到设计、导入和上线后的改进,统筹推进业务系统、Web、数据库/基础设施、质量保证以及 AI 应用。 以 C#/.NET 的实际开发能力为基础,同时理解 PHP/JavaScript、SQL Server/PostgreSQL/MySQL、Linux/Windows Server,将需求整理、技术选型、质量标准和基于 GitHub 的开发运营作为整体流程来设计。 将生成式 AI 用于开发、验证和信息整理等业务流程,作为帮助小团队更快、更可靠交付成果的实务基础。