最近在用 Hexo 框架加 Butterfly 主题搭建自己的 GitHub Pages 博客,想给自己的博客加入评论系统。

最常用的评论系统有 GitalkGiscus。其中,前者主要依赖仓库的 Issues,后者则依赖 Discussions

我首先试了下 Gitalk。虽然配置对我来说并不是什么难事,但我在测试评论的时候遇到了以下问题:

  • 在不同设备、账号上,同文章评论区内容不同步,且 Issues 话题重复。

  • 报错。

Bash
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
TypeError: Cannot read properties of undefined (reading 'gitalk')
at Hexo.<anonymous> (D:\Documents\hexo-blog-butterfly\node_modules\hexo-plugin-gitalk\index.js:2:41)
at Hexo.tryCatcher (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\util.js:16:23)
at Hexo.<anonymous> (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\method.js:15:34)
at D:\Documents\hexo-blog-butterfly\node_modules\hexo\dist\extend\filter.js:58:67
at tryCatcher (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\util.js:16:23)
at Object.gotValue (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\reduce.js:166:18)
at Object.gotAccum (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\reduce.js:155:25)
at Object.tryCatcher (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\promise.js:547:31)
at Promise._settlePromise (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\promise.js:729:18)
at _drainQueueStep (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\async.js:93:12)
at _drainQueue (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\async.js:86:9)
at Async._drainQueues (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\async.js:102:5)
at Async.drainQueues [as _onImmediate] (D:\Documents\hexo-blog-butterfly\node_modules\bluebird\js\release\async.js:15:14)
at process.processImmediate (node:internal/timers:485:21)

虽然 Gitalk 界面美观,但还是因此放弃了。后续有时间再研究以下怎么搞吧。

然后我再试了下 Giscus。目前用下来,除了界面不如 Gitalk 美观,其他都还好,同文章评论区内容也能同步。

本人配置 Giscus 的总结

  • 注册 GitHub 账号和创建仓库(这个不用多说了吧)。
  • 安装 Giscus App
  • 在账户设置中,在 [Integrations] 选择 [Applications],找到 [giscus] 在 [Repository access] 中选择 [Only select repository],并设置为所需仓库。完成后单击 [Save] 保存设置。
  • 进入所需仓库的设置,在 [General] - [Features] 处勾选 [Discussions]。保存设置。
  • 刷新仓库页面,选择 [Discussions] 选项卡,单击 [Categories] 右边的笔(编辑)按钮,选择 [New category],在 [Category name] 处输入 “Announcements”(不带引号),[Discussion Format] 处一定要选择 [Annoucement]!
  • 单击这里进入 Giscus 配置,在【仓库】处输入你的用户名和仓库(格式为 username/repositories),【页面 ↔️ discussion 映射关系】处保持默认的第一项或选择第二项,【Discussion 分类】选择刚刚保存的【Annoucement】,特性和主题根据自己喜好选择。
  • 打开 _config.butterfly.yml 配置文件,找到 # comments system 项,在 use 处输入 Giscus(注意冒号后面要一个空格间隔),textlazyloadcountcard_post_count 则根据你自己的喜好来调整。
  • 往下翻,找到 # Giscus 选项,在 repo 处填写对应的用户名和仓库(格式 username/repositories),repo_idcategory_id 处填写 Giscus 生成的 ID,light_themedark_theme 项保持不动,jsopition 根据需求设置即可。
  • 注意冒号后面要一个空格间隔,参数则不带引号!否则会出现评论发不出去的问题!

参考资料