配置基础功能

Giscus的基础配置还是非常容易上手的。首先你需要有一个GitHub仓库满足以下条件： - 是公开的仓库 - 为仓库安装了Giscus应用 - 为仓库启用了Discussion功能

如果有条件不满足，请看下列教学；如果都已满足或知道如何修改，请跳转至代码配置部分。

将仓库设为公开并启用Discussion功能

首先在github中点进你想设置的仓库（这时的网址应该是https://github.com/<UserName>/<RepoName>，其中<Username>为你的用户名，<RepoName>为该仓库名）；

然后点击上面一排按钮中的Settings按钮，左侧应该默认选择的是General；

往下翻到Features板块，找到Discussion那一条并将前面的方框勾选中；

然后继续翻到最底部，找到Danger Zone板块，里面的第一项就是Change Repository Visibility，如果下面一行是This repository is currently public那就不需要修改，如果是This repository is currently private，那就点击右侧的Change visibility然后选Change to public然后一路确定就可以了。

为仓库安装Giscus应用

访问Giscus安装页面，找到你希望安装的仓库并点击安装。

博客代码配置

访问Giscus应用官网。翻到仓库部分，填写你之前设置好的用户名/仓库名，该页面会帮你检查这个仓库是否符合之前提到的三个条件；然后翻到Discussion分类部分选择一个分类（网站上推荐的分类是Announcements）。接下来翻到启用Giscus部分，这里应该自动生成好了可以直接嵌入的HTML代码。如果只需要配置基础功能，那么只需要关注data-repo data-repo-id data-category-id这三行即可。打开你的hexo文件夹，找到butterfly主题的_config.yml文件，翻到comments部分（建议配合搜索功能，config文件还是挺长的），配置如下：

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: true
  # Display comment count in Home Page
  card_post_count: true

然后再往下翻一点翻到giscus的字段，配置如下：

1
2
3
4
5
6
7
8
9
10
# Giscus
# https://giscus.app/
giscus:
  repo: 
  repo_id: 
  category_id: 
  light_theme: light
  dark_theme: dark
  js:
  option:

将之前网页上生成的可嵌入的HTML代码中的那三行的内容分别对应填入repo repo_id category_id三个字段，这里注意只要填写双引号以内的内容就可以了。

接下来启动我们的丝滑小连招hexo clean hexo d -g，然后看看你的网站上应该就有评论系统了~

一些进阶小技巧

当然，一些比较pro的用户是不会满足于配置最基本的评论系统的，如果希望对评论系统有更深一点点的把握，比如……比如把评论输入框放在评论上方，这样用户可以在不滚动到讨论底部的情况下发表评论。这个选项在Giscus的官网上是一个开关，对应控制HTML代码中的data-input-position="bottom"，如果勾选就是把bottom改成top。

那么要如何在hexo+butterfly中启用这个控制呢？我翻了Bing上的许多帖子，完全没有提到任何相关的信息；我又去翻了Butterfly主题的文档页面，其中关于Giscus的具体设置是这样写的：

参数 解释
repo GitHub repository 的全名，例如：owner/repo
repo_id GitHub repository 的 ID
category_id GitHub repository 的分類 ID
option 可選配置

具體配置的意思，請參考 Giscus 的文檔

而这个所谓的“文档”页面其实就是我们之前看到的Giscus主页，虽然有嵌入的HTML的提示，但是由于在Hexo博客中我们并不主动编写HTML代码而是让主题引擎帮我们把Markdown转换为HTML，所以我们还是不知道如何控制主题引擎去嵌入对应的HTML代码（要我说这就是Butterfly文档的锅）。经过主包的不懈努力调试，与public中的HTML文件进行对比，发现应该在option字段里嵌入。

生成的HTML代码大概是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
const giscusConfig = {
  src: 'https://giscus.app/client.js',
  'data-repo': '<敏感信息删除>',
  'data-repo-id': '<敏感信息删除>',
  'data-category-id': '<敏感信息删除>',
  'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
  'data-reactions-enabled': '1',
  crossorigin: 'anonymous',
  async: true,
  ...option,
  ...mappingConfig
}

这里最后的...option引入了我们在_config.yml中写的option字段，但是具体的格式要进行一点小转换，需要把=变成:，并且把双引号去除，belike:

1
2
option:
  data-input-position: top

絮语

对于这个网上各种帖子根本没有涉及，甚至连官方文档都没有细说的问题，AI表现得就更糟糕了，一会说应该在主字段里用驼峰命名法，一会又说在option字段里但是给出的示例是带双引号的。这也印证了我之前在小红书被点了1700+赞的一条评论： > 其实就是网上资料越多ai越厉害，网上资料越少ai越弱，所以ai写代码强的原因就是计算机领域开源资料实在太多了

希望这篇帖子能为大家配置评论系统起到一定帮助，或者就算成为AI的语料，只要以后能让AI解决掉这个问题，能帮助到大家也是好的。