hexo-theme-next add Giscus

发表于

hexo-theme-next add Giscus

hexo-theme-next 添加 Giscus

内容来源

在 NexT 主题中为 Hexo 博客添加 Giscus 评论系统，主要有这几个步骤：准备好 GitHub 仓库、安装 NexT 专用的 Giscus 插件，然后在主题配置文件中填入从 Giscus 官网获取的关键信息。

📝 第一步：准备工作

在开始配置前，需要先完成三项必要的 GitHub 设置，这些是所有后续操作的基础：

  1. 创建一个公开的 GitHub 仓库：Giscus 要求评论数据存放在公开仓库中。你可以用现有的博客仓库，或者为评论单独新建一个仓库。

  2. 启用仓库的 Discussions 功能：进入仓库的 Settings -> General，在 Features 部分找到并勾选 Discussions。

  3. 安装 Giscus App：访问 GitHub Apps - giscus，点击安装，并选择你刚刚准备好（已公开且开启 Discussions）的仓库。

Giscus GitHub Apps giscus

⚙️ 第二步：安装与配置

1. 安装 NexT 专用插件

由于 NexT 主题本身不直接支持 Giscus，需要安装一个社区插件来集成。在博客根目录下执行以下命令：

1
npm install hexo-next-giscus --save

这个插件会负责在页面中注入 Giscus 所需的代码，并让配置能和 NexT 主题很好地结合起来。

2. 获取配置参数

安装完插件后，访问 Giscus 官网，它会引导你完成配置并生成一段 <script> 代码。

主要需要填写的几个关键信息是：

  • 仓库：你的GitHub用户名/评论仓库名
  • 页面 ↔️ discussion 映射关系：对于 Hexo 博客，通常推荐选择 pathname，这样每篇文章的评论会和其 URL 路径绑定。
  • Discussion 分类：选择一个已有的分类，如 General 或 Announcements。建议选择 Announcements，这样新的 discussion 只能由维护者或 Giscus 创建，可以避免混乱。

Giscus giscus.app/zh-CN

配置好后，在页面最下方复制生成的代码，我们只需要从中提取几个以 data- 开头的参数值。

3. 将参数填入 NexT 配置文件

打开主题配置文件 themes/next/_config.yml（或者根目录的 _config.next.yml），在文件末尾添加或修改以下 giscus 配置块。

将上一步从 Giscus 官网复制下来的参数（如 data-repo, data-repo-id 等）对应的值填写进去，注意不要保留 data- 前缀和引号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 在 themes/next/_config.yml 文件末尾添加
giscus:
  enable: true
  # 用户名/仓库名，对应 data-repo
  repo: 用户名/仓库名
  # 仓库 ID，对应 data-repo-id
  repo_id: 仓库 ID
  #  选择的分类，对应 data-category
  category: Announcements
  # 分类ID，对应 data-category-id           
  category_id: 你的分类 ID
  # 推荐用页面路径匹配，对应 data-mapping
  mapping: pathname
  # 开启表情回应
  reactions_enabled: 1
  emit_metadata: 0
  # 评论框位置
  input_position: bottom
  # 建议使用自动适配主题
  theme: preferred_color_scheme
  # 语言设置
  lang: zh-CN
  # 懒加载，提升性能
  loading: lazy

🚀 第三步：部署与测试

最后，重新生成并部署你的博客，就可以看到效果了：

1
hexo clean && hexo generate && hexo deploy

或者直接使用：

1
hexo server

部署成功后，打开任意一篇文章滑到底部，就能看到 Giscus 评论区了。如果页面没有显示，可以检查一下博客是否已经成功部署到线上。

Giscus shenjuexiao.com