cf-comment

React 评论客户端 · 为静态站点（博客 / 文档）直接嵌入

基于 Cloudflare Workers + D1 后端。零额外运行时依赖（React 为 peer）。

安装

pnpm add cf-comment react react-dom

快速开始

import { Comment } from 'cf-comment'
import 'cf-comment/styles.css'

export function BlogComments() {
  return (
    <Comment
      serverURL="https://api.example.com"
      path="/posts/hello"
      lang="zh-CN"
      darkMode="auto"
    />
  )
}

登录 / 匿名发言

• 登录：右上角登录或注册（Cookie usid），表单只填内容即可发表
• 匿名：填写昵称 + 邮箱后发表
• 跨域需 Worker ALLOWED_ORIGINS 包含站点 Origin，且请求 credentials: 'include'

Props

| 选项 | 类型 | 默认 | 说明 | |------|------|------|------| | serverURL | string | — | 服务端域名（必填），内部拼接 /v1/comment | | path | string | location.pathname | 页面标识 | | lang | 'zh-CN' \| 'en' | 'zh-CN' | 界面语言 | | darkMode | 'auto' \| 'light' \| 'dark' | 'auto' | 暗色模式 | | maxNesting | number | 6 | 最大嵌套层级 | | showCount | boolean | true | 是否显示评论计数 | | pageSize | number | 20 | 每页条数（上限 50） | | sort | 'desc' \| 'asc' | 'desc' | 排序 | | className | string | — | 容器 class | | onCommentPosted | (comment) => void | — | 发表成功回调 | | onCommentsLoaded | (tree) => void | — | 列表加载回调 | | onError | (error) => void | — | 错误回调 |

进阶：只用 API

API 客户端随主包导出（不再单独发布 core 子路径）：

import { CommentClient, CfCommentError, buildTree } from 'cf-comment'

const client = new CommentClient('https://api.example.com')
const { tree, total } = await client.list('/posts/hello')

也导出 useComments hook，便于自建 UI。

样式

.cfc-container {
  --cfc-accent: #4f46e5;   /* 主题色 */
  --cfc-radius: 12px;
  --cfc-radius-lg: 16px;
  --cfc-avatar-size: 40px;
  --cfc-font-size: 15px;
}

暗色：darkMode="auto" | "light" | "dark"。

本地开发

# 根目录：先起 Worker
pnpm dev

# 另开终端：起 client demo
pnpm dev:client
# → http://localhost:5173

构建

pnpm build:client

License

MIT