在博客系统中配置giscus评论系统

发表于 分类于

giscus 是一款基于Github discussion的博客评论系统

本文简要介绍如何安装。

1. 创建存储库

giscus基于GitHub discussion进行评论的整合与管理，因此一个开启了GitHub discussion功能的公共存储库必不可少。

我们可以新建一个存储库，也可以使用现有的存储库，然后转到设置（setting），在 Features 栏中勾选 Discussions 。

2. 安装giscus app

第二步，将 giscus app 安装到上面配置好的存储库中。这一步至关重要，因为要想使用giscus管理存储库中的评论，必须要有giscus app的存在。安装过程参考 官方文档 和 giscus app 即可

3. 获得giscus控制代码。

这一步同样在 官方文档 页面完成，将上述配置好的仓库填入页面中的 “仓库：” 栏，然后选择 “页面 ↔️ discussion 映射关系” （也可以不选，用默认选项） ，选择“Discussion 分类” （也可以不选，用默认选项） ，选择“特性” （推荐把“将评论框放在评论上方”和“懒加载评论”选上） ，选择“主题” （也可以不选，用默认选项） ，最后把“启用 giscus”里面的代码复制下来，备用。

4. 在hexo中开启giscus功能。

这一步略有点复杂，因为在我的NexT主题中原生不支持giscus。接下来我要分几步说明如何在NexT主题中开启giscus：

  1. 安装 hexo-next-giscus。这是个NexT主题插件，用于提供giscus支持。安装方式如下：
1
npm install hexo-next-giscus --save
  1. 在NexT主题配置文件中添加giscus配置

参考 hexo-next-giscus 的说明。要修改的文件 _config.yml 一般位于 [根目录]/node_modules/hexo-theme-next/_config.yml 或者 [根目录]/themes/next/_config.yml ，我们使用代码编辑器打开，并向其中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
giscus:
  enable: false
  repo: # Github repository name
  repo_id: # Github repository id
  category: # Github discussion category
  category_id: # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: pathname
  # Available values: 0 | 1
  reactions_enabled: 1
   # Available values: 0 | 1
  emit_metadata: 1
  # Available values: light | dark | dark_high_contrast | transparent_dark | preferred-color-scheme
  theme: light
  # Available values: en | zh-CN
  lang: en
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy

其中，# Github repository name 等多个字符串需要参照前面第三步保存下来的giscus控制代码进行填写。这些字段的命名具有一致性，因此照着控制代码填写即可。

  1. 更新页面，测试效果
1
hexo g;hexo s

以上。

PS： 之前博客系统的评论还在恢复中，不过快好了。