0721c

0721c

基于 GitHub Issue 投稿评论、PR 审核评论、Actions 自动生成评论索引的前端评论系统。

读者点击网站上的“发表评论”或“回复”，在 GitHub 中填写正文。提交后，工作流将评论转成审核 PR 并关闭 Issue；维护者合并 PR 后，评论显示在网站上。

开始使用

安装到网站项目：

npm install 0721c

直接初始化评论仓库：

npx 0721c init ./blog-comments

准备一个公开的 GitHub 评论仓库，以及要接入评论的网站。评论仓库与网站源码仓库分别管理。

1. 初始化评论仓库：安装工具、生成分支、上传并设置 Actions。
2. 接入网站：Nuxt Content 或 Vue / JavaScript。
3. 从网站提交一条评论，在评论仓库审核 PR，合并后查看网站上的评论。
4. 按需设置邮件通知，在文章收到评论或评论收到回复时发送提醒。

本地工具要求 Node.js 22 或更新版本、Git。Vue 组件要求 Vue 3.5，Nuxt 模块支持 Nuxt 3.17 至 4.x。 当前版本为 0.3.1，安装方式见初始化说明。

Nuxt Content 接入示例

在 nuxt.config.ts 中指定评论仓库和文章路径：

export default defineNuxtConfig({
  modules: ['@nuxt/content', '0721c/nuxt'],
  comments0721c: {
    repository: 'OWNER/REPO',
    siteUrl: 'https://blog.example',
    content: { pathPrefixes: ['/article'] },
  },
});

在公共文章模板的正文后挂载组件，其中 page 是当前查询到的 Content 文档：

<ClientOnly>
  <ContentComments0721c :document="page" />
</ClientOnly>

组件从文档取得文章路径和标题。详细配置、Front Matter 和样式示例见 Nuxt Content 接入。

自定义评论区文案

在 comments0721c 中设置 messages，统一覆盖网站提示：

messages: {
  error: '评论加载失败，请注意，评论系统需要确保当前网络环境能够连接 GitHub',
  stale: '刷新失败，请确保当前网络环境能够连接 GitHub',
}

未填写的键继续使用内置文案。完整配置见自定义文案。

评论仓库

例如文章 /article/essay/2026-09-28-hello 的数据保存在：

comments 分支
article/essay/2026-09-28-hello/comments-37.json

index 分支
article/essay/2026-09-28-hello.json

评论记录按文章路径分目录，文件名为 comments-<Issue 编号>.json。网站读取 index 分支中当前文章的 JSON 文件。

文档

• 初始化与部署：安装、上传、Actions 设置和首次使用。
• Nuxt Content 接入：配置、公共模板、文章筛选和样式。
• 接口参考：Vue 组件、JavaScript 客户端和 CLI。
• 邮件通知：Resend 设置、发件地址、收件规则和通知排障。
• 维护与排障：审核、删除、关闭评论、更新和故障定位。
• 数据格式：评论记录、回复树、投稿模板和配置文件。
• 开发指南：源码结构、处理流程和修改方法。