前言

Giscus： 评论托管在 GitHub 上，用户评论必须使用 GitHub 账户登陆，操作比较简单。

更多的评论系统可以查看 Butterfly 设置文档

Giscus的中文介绍

1、仓库设置

  1. 博客所在仓库必须是公开的 (public)，否则访客将无法查看 discussion
  2. 你的 GitHub 已安装 giscus app ，否则访客将无法评论和回应
  3. 在你的仓库中启用 Discussions 功能

创建仓库

image-20250416155533462

创建好一个博客仓库“your-repo”，其具体步骤可详见hexo文档或者[GitHub Pages + Hexo搭建个人博客网站，史上最全教程](GitHub Pages + Hexo搭建个人博客网站，史上最全教程_github pages hexo-CSDN博客)

开启Discussions

在仓库的页面，点击顶部的 Settings

image-20250416155822680

找到General - Features，并将Discussions打勾✔，下面的setup不需要关心

image-20250416155919874

为你的github安装Giscus App

  1. 访问 https://github.com/apps/giscus 点击 Install，进入选择仓库界面。
  2. 选择 Only select repositories ，然后选择你所创建的仓库your-repo，点击 Install。显示如下页面表示创建成功

image-20250416160215165

2、获取Giscus相关配置

这部分我的理解类似于，我们将自己的github安装了Giscus App 但是还没有将自己的仓库关联到 Giscus的服务器上。

所以需要访问Giscus的配置页面 (https://giscus.app/zh-CN)，依次完成如下配置后，即可进行下一步。

  • 选择语言image-20250416160704285

  • 关联仓库image-20250416160831591

  • 文章页面与discussion的映射关系：保持默认image-20250416160917390

  • Discussion 分类： 按照推荐选择 Announcementsimage-20250416160934362

  • 特性： 保持默认

  • 主题： 保持默认，或是选择一个自己喜欢的

在 启用 giscus 部分，我们将看到 Giscus 的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://giscus.app/client.js"
        data-repo="aylmer-wang/aylmer-wang.github.io"
        data-repo-id="R_xxxxxxxxxx"
        data-category="Announcements"
        data-category-id="DIC_xxxxxxxxxxxxxxxx"
        data-mapping="pathname"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

3、填写本地仓库的相关配置

编辑 Hexo 目录下的 _config.butterfly.yml 文件（我的目录是这个blog/themes/butterfly/source/_config.yml），找到 comments 部分：设置为giscus

image-20250416161424547

再找到giscus部分：根据上文获取的Giscus配置填写repo, repo_id, category_id

image-20250416161728171

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

#######

# Giscus
# 对照 Giscus 的配置填写
# https://giscus.app/
giscus:
  repo: "aylmer-wang/aylmer-wang.github.io"
  repo_id: "R_xxxxxxxxxx"
  category_id: "DIC_xxxxxxxxxxxxxxxx"
  light_theme: light
  dark_theme: dark
  js:
  option:

即可运行命令在网站查看评论预览

1
2
3
hexo clean
hexo g
hexo s

image-20250416161956670