Hexo + Butterfly 评论系统配置总结
最近在用 Hexo 框架加 Butterfly 主题搭建自己的 GitHub Pages 博客,想给自己的博客加入评论系统。
最常用的评论系统有 Gitalk 和 Giscus。其中,前者主要依赖仓库的 Issues,后者则依赖 Discussions。
我首先试了下 Gitalk。虽然配置对我来说并不是什么难事,但我在测试评论的时候遇到了以下问题:
在不同设备、账号上,同文章评论区内容不同步,且 Issues 话题重复。
报错。
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html |
虽然 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
(注意冒号后面要一个空格间隔),text
、lazyload
、count
、card_post_count
则根据你自己的喜好来调整。 - 往下翻,找到
# Giscus
选项,在repo
处填写对应的用户名和仓库(格式username/repositories
),repo_id
和category_id
处填写 Giscus 生成的 ID,light_theme
和dark_theme
项保持不动,js
和opition
根据需求设置即可。 - 注意冒号后面要一个空格间隔,参数则不带引号!否则会出现评论发不出去的问题!
参考资料
- hexo-butterfly主题-giscus评论系统设置 - 知乎. https://zhuanlan.zhihu.com/p/603658639
- Giscus 配置. https://giscus.app/zh-CN
- Butterfly 文檔(三) 主題配置 | Butterfly. https://butterfly.js.org/posts/4aa8abbe/#%E8%A9%95%E8%AB%96
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 mskk 的个人博客!
评论
GitalkGiscus