Hexo添加评论系统

发表于 分类于

Hexo作为一个静态的博客系统，想要实现评论功能必须借助第三方插件。

我的博客采用了 Gistcus 实现 Blog 的评论系统，其优点包括：

  • 开源
  • 无广告
  • 永久免费
  • 无需自建数据库

用户评论时，只要通过 GitHub 账户登录就可以实现评论。

在参照了网上众多教程后最终成功进行了配置（个人是基于 Hexo + Next主题），写下这篇文章用于记录，希望能够帮助到别人。

一、安装

访问 Giscus App 并安装到你的评论仓库：

  • 点击 Install
  • 选择 Only select repositories
  • 选中 Blog 创建的仓库
  • 授权安装

二、启用 Discussions

进入对应的仓库，点击 Settings，往下翻到 Features，勾选 Discussions ，即可实现 Discussions 功能启用。

三、Giscus 配置

访问 Giscus 官网 进行配置

  • 映射关系：选择 title，这样 Discussion 标题里的中文是可以正常显示的；
  • Discussion 分类：选择 Announcements 类型（推荐），这样只有仓库维护者可以创建新讨论，但所有人都能评论；
  • 主题选择：选择 preferred_color_scheme（跟随系统），自动适配明暗模式；
  • 获取关键 ID：配置完成后，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="JinYang0418/JinYang0418.github.io"
        data-repo-id="R_kgDOSDKEeQ"
        data-category="Announcements"
        data-category-id="DIC_kwDOSDKEec4C643t"
        data-mapping="title"
        data-strict="0"
        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>

注：记下 data-repo-id 和 data-category-id 的值。

四、在主题中配置

  • 在你的 Hexo 博客目录中执行以下命令，安装 hexo-next-giscus 插件
1
npm install hexo-next-giscus
  • 然后在 Hexo 或者 theme 的 config.yml 配置文件添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
giscus:
	enable: true
	repo: "JinYang0418/JinYang0418.github.io" # 在此输入仓库名
	repo_id: "R_kgDOSDKEeQ" # 在此输入仓库 ID
	category: "Announcements" # 在此输入分类名
	category_id: "DIC_kwDOSDKEec4C643t" # 在此输入分类 ID
	mapping: title
	reactions_enabled: 1
	emit_metadata: 1
	theme: light
	lang: zh-CN
	input_position: bottom
	loading: lazy

参数说明：

  • repo: 你的评论仓库（格式：用户名/仓库名）
  • repo_id: 从 Giscus 获取的仓库 ID
  • category_id: 从 Giscus 获取的分类 ID
  • mapping: title: 使用文章题目作为映射
  • lang: zh-CN: 界面语言设为中文
  • reactions-enabled: 1: 启用表情回应功能