Giscus,让博客接入评论
前言
静态博客没有后端,评论数据无处存储。Giscus 基于 GitHub Discussions,免费、稳定、支持 Markdown,是 Hexo 博客的最佳评论方案之一。
本文记录从零接入 Giscus 的完整流程,包括踩坑点。
一、GitHub 仓库准备
1.1 开启 Discussions
进入博客 GitHub 仓库 → Settings → Features → 勾选 Discussions。
1.2 创建 Announcement 分类
进入仓库 → Discussions → 右侧 Edit categories → New category:
- 名称:
Announcements - 类型必须选 Announcement(公告)
这一步很关键。如果选成 General,访客可以在仓库里随意新建帖子,造成混乱。Announcement 类型下,只有 Giscus 机器人能创建主帖,访客只能回复。
1.3 安装 Giscus 应用
访问 https://github.com/apps/giscus ,点击 Install。
- 只授权你的博客仓库
- 不要全仓库授权
二、Giscus 官网配置
访问 https://giscus.app/zh-CN ,按以下步骤配置:
2.1 仓库
填入:用户名/仓库名(如 zuige66/hexo)
2.2 映射方式
选择:Discussion 的标题包含页面的 pathname
这种方式下,每篇文章的 URL 路径会作为 Discussion 的标题,一一对应。
2.3 Discussion 分类
选择:Announcements
2.4 特性勾选
| 选项 | 建议 |
|---|---|
| 启用主帖子上的反应 | ✅ 勾选 |
| 将评论框放在评论上方 | ✅ 勾选 |
| 懒加载评论 | ✅ 勾选 |
| 输出 discussion 的元数据 | ☐ 不勾选 |
2.5 主题配色
选择:用户偏好的色彩方案
这样评论区会自动跟随博客的亮色/暗色模式切换。
2.6 复制代码
页面会生成一段 <script> 代码,类似:
1 | |
记住里面的 repo-id 和 category-id,下一步要用。
三、嵌入 Hexo 博客
3.1 编辑主题配置
打开 _config.fluid.yml,添加两处配置:
启用评论(在 post 段落内):
1 | |
Giscus 参数(文件末尾添加):
1 | |
注意:Fluid 主题要求
theme-light和theme-dark两个字段,不要写成theme。
3.2 部署
1 | |
四、上线后验证
- 访问线上博客文章页面,滚动到底部
- 首次访问某篇文章时,Giscus 机器人会自动在仓库 Announcements 分类下创建一条 Discussion 主帖(标题是文章路径)
- 用 GitHub 账号登录后即可发表评论
- 未登录的访客可以查看评论,登录后可回复
本地
hexo s预览只能看到评论区 UI 框架,不会真正创建 Discussion。必须部署到线上才能正常使用。
五、工作原理
1 | |
- 每篇文章 = 1 个 Discussion 主帖
- 所有评论都是该主帖下的 Reply
- 只要文章路径不变,修改标题不会丢失历史评论
自定义评论区标题
Giscus 默认用文章路径作为 Discussion 标题。如需自定义,可在 giscus.app 配置时修改映射方式。
总结
| 步骤 | 操作 |
|---|---|
| 1 | 仓库开启 Discussions |
| 2 | 创建 Announcement 分类 |
| 3 | 安装 Giscus 应用并授权 |
| 4 | giscus.app 配置并获取参数 |
| 5 | _config.fluid.yml 添加 giscus 配置 |
| 6 | 部署上线验证 |
整个流程约 15 分钟完成,无需服务器,无需付费。