CWD：基于 Cloudflare Workers 的免服务器评论系统

本文介绍 CWD (Cloudflare Workers Discuss)，一个基于 Cloudflare Workers 与全球边缘网络的免服务器、极速安全、即插即用评论系统。该项目提供了零成本部署方案，帮助个人博客和中小型站点快速集成评论功能。

项目简介

CWD 是一个开源的评论系统，由 anghunk 开发维护。截至目前，该项目在 GitHub 上已获得 158 stars，主要使用 TypeScript 和 Vue 编写。数据存储在 Cloudflare D1 数据库中，通过 Worker 与数据库交互。

根据对 Cloudflare 免费计划的分析，CWD 评论系统的部署成本为零：

指标	免费每日额度	单次消耗	理论极限
行读取	500 万	~5 次/次访问	100 万次页面访问
行写入	10 万	~2 次/次访问	5 万次页面访问
存储	5GB	1-2KB/评论	250 万+ 评论

对于个人博客或中小型站点来说，免费计划完全够用。

核心特性

⚡️ 极速响应：基于 Cloudflare 全球 300+ 节点网络，毫秒级响应，自动扩缩容
💬 完善评论体系：支持多站点管理、嵌套回复、分页加载、Markdown 渲染、富文本支持
🔔 智能邮件通知：新评论、回复提醒实时推送，支持自定义邮件模板
📊 可视化数据看板：评论趋势分析、访问统计、用户画像洞察
🛡️ 多维度内容风控：手动审核机制、IP 屏蔽、邮箱黑名单
🔄 便捷数据迁移：一键导入其他评论系统数据
🔒 企业级安全：管理员鉴权、CORS 跨域保护、SQL 注入防护
🔌 灵活 API 集成：提供完整 REST API 与 SDK，一行代码嵌入

技术栈

Cloudflare Workers - 边缘计算函数
Cloudflare D1 - 无服务器 SQL 数据库
Cloudflare KV - 键值存储（用于会话管理）
TypeScript - 后端 API 开发
Vue 3 - 管理后台界面
Shadow DOM - 评论组件样式隔离

安装指南

前置要求

Node.js >= 20
Cloudflare 账号
Wrangler CLI

后端部署

bash

# 克隆项目
git clone https://github.com/anghunk/cwd

# 进入 API 目录
cd cwd-api

# 安装依赖
npm install

# 登录 Cloudflare
npx wrangler login

# 创建数据库
npx wrangler d1 create CWD_DB
npx wrangler d1 execute CWD_DB --remote --file=./schemas/comment.sql

# 创建 KV 存储
npx wrangler kv namespace create CWD_AUTH_KV

# 部署
npm run deploy

前端管理后台

bash

cd cwd-admin
npm install
npm run build

快速开始

HTML 集成

html

<div id="comments"></div>
<script src="https://unpkg.com/cwd-widget@0.1.6/dist/cwd.js"></script>
<script>
  const comments = new CWDComments({
    el: '#comments',
    apiBaseUrl: 'https://your-api.example.com',
    siteId: 'blog',
    lang: 'zh-CN',
  });
  comments.mount();
</script>

Vue 3 集成

bash

npm i cwd-widget

import CWDComments from "cwd-widget";

onMounted(() => {
  const comments = new CWDComments({
    el: '#comments',
    apiBaseUrl: 'https://your-api.example.com',
  });
  comments.mount();
});

React 集成

import { useEffect, useRef } from "react";
import CWDComments from "cwd-widget";

function Comments() {
  const containerRef = useRef(null);
  
  useEffect(() => {
    if (!containerRef.current) return;
    const comments = new CWDComments({
      el: containerRef.current,
      apiBaseUrl: "https://your-api.example.com",
    });
    comments.mount();
    return () => comments.unmount();
  }, []);
  
  return <div id="comments" ref={containerRef} />;
}

使用示例

多站点配置

通过 siteId 参数实现多站点数据隔离：

javascript

const comments = new CWDComments({
  el: '#comments',
  apiBaseUrl: 'https://your-api.example.com',
  siteId: 'blog',  // 不同站点使用不同 ID
  postSlug: 'my-post-slug',  // 自定义评论标识符
});

多语言支持

javascript

const comments = new CWDComments({
  el: '#comments',
  apiBaseUrl: 'https://your-api.example.com',
  lang: 'auto',  // 自动检测浏览器语言
  // 或指定语言: 'zh-CN', 'en-US', 'zh-TW', 'es', 'pt', 'fr', 'de', 'ja', 'ko'
});

动态主题切换

javascript

// 切换到暗色主题
comments.updateConfig({ theme: 'dark' });

// 动态修改评论标识符（适用于单页应用）
comments.updateConfig({ postSlug: '/new-post-slug' });

// 注入自定义样式
comments.updateConfig({
  customCssUrl: 'https://your-cdn.example.com/cwd-custom.css',
});

API 参考

公开接口

GET /api/comments - 获取评论列表
POST /api/comments - 发表评论
GET /api/config/comments - 获取评论配置

管理员接口

POST /admin/login - 管理员登录
GET /admin/comments - 获取所有评论（需认证）
PUT /admin/comments/:id - 更新评论状态
DELETE /admin/comments/:id - 删除评论

认证方式

管理员接口使用 Bearer Token 认证：

http

Authorization: Bearer <token>

Token 有效期为 48 小时。

环境变量配置

名称	类型	描述
`ADMIN_NAME`	string	管理员登录名称
`ADMIN_PASSWORD`	string	管理员登录密码
`CWD_DB`	D1	评论数据数据库
`CWD_AUTH_KV`	KV	会话存储

项目链接

GitHub 仓库：https://github.com/anghunk/cwd
官方文档：https://cwd.js.org
社区交流：https://zs.discourse.group
Discord：https://discord.gg/n2pErsD7Kg

字节笔记本

CWD：基于 Cloudflare Workers 的免服务器评论系统

项目简介

核心特性

技术栈

安装指南

前置要求

后端部署

前端管理后台

快速开始

HTML 集成

Vue 3 集成

React 集成

使用示例

多站点配置

多语言支持

动态主题切换

API 参考

公开接口

管理员接口

认证方式

环境变量配置

项目链接