前情提要: Hexo+Butterfly主题博客搭建

Giscus是什么

Giscus是一个基于GitHub Discussions的评论系统，它允许你将评论嵌入到你的网站中。其拥有开源、无需自建数据库等优点，你可以自由地使用和修改它。用户通过GitHub账户登录，简化注册流程，也增强了评论者的身份可信度、便于评论的及时回复与管理。

安装

点击如下的链接进入Giscus的安装界面，点击install进行安装。

安装完成后看到如下的界面即说明安装成功

配置

任选一个合适的仓库存储评论数据，但要确保：

  1. 仓库是公开的

  2. Giscus功能已安装（“安装”步骤已完成）

  3. 仓库的Discussions功能已启用，开启方式如下所示：

    在仓库的界面中，点击Settings进入设置界面

    往下翻找到Discussions的选项并勾选

进入官网，在“仓库”中选择自己要使用的仓库，此时网站会自动确认该仓库是否满足上述条件。

后续是是一些个性化配置选项，这是推荐的配置建议：

  1. 页面↔️discussion 映射关系一项选择title，使Discussion标题里的中文可以正常显示。
  2. Discussion 分类一项选择Announcements，并勾选只搜索该分类中的discussion
  3. 特性建议勾选启用主帖子上的反应（可以给博客文章贴表情）、将评论框放在评论上方和懒加载评论
  4. 主题一项可以选择用户偏好的色彩方案

启用

完成上述设置之后，下面会自动生成对应的JS代码，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://giscus.app/client.js"
        data-repo="HanafudaStore/HanafudaStore.github.io"
        data-repo-id="R_kgDONoWFrA"
        data-category="Announcements"
        data-category-id="DIC_kwDONoWFrM4CstUi"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

打开自己博客文件夹中的_config.butterfly.yml文件夹，根据Butterfly主题的配置文档进行配置。

通用配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
comments:
  # Up to two comments system, the first will be shown as default
  # Leave it empty if you don't need comments
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # Format of two comments system : Disqus,Waline
  use: # 这里填写要使用的评论系统，即Giscus
  # Display the comment name next to the button
  text: true
  # Lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  # Display comment count in post's top_img
  count: false
  # Display comment count in Home Page
  card_post_count: false

Giscus配置，此处按照上面自动生成的那段js代码对应填写：

1
2
3
4
5
6
7
8
9
10
# Giscus
# https://giscus.app/
giscus:
  repo: # GitHub repository的全名
  repo_id: # GitHub repository 的 ID
  category_id: # GitHub repository 的分类 ID
  theme:
    light: light
    dark: dark
  option:

然后照常hexo g和hexo d更新博客就可以实现评论功能啦，快去试试吧~