跳到主要内容

Hexo 评论系统（Giscus）

giscus 是一个由 GitHub Discussions 驱动的评论系统（A comments system powered by GitHub Discussions）。让访客借助 GitHub 在你的网站上留下评论和反应吧！

运行原理​

giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname 等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。

要评论，访客必须按 GitHub OAuth 流程授权 giscus app 代表他发帖。或者访客也可以直接在 GitHub Discussion 里评论。你可以在 GitHub 上管理评论。

准备工作​

首先你需要有一个 GitHub 仓库，并且需要满足以下三个条件：

  1. 你的仓库必须是公开的，否则访客将无法查看 discussion。
  2. 你的 GitHub 已安装 giscus app，否则访客将无法评论和回应。
  3. 在你的仓库中启用 Discussions 功能（参考 这里）。

Hexo 配置​

在你的 Hexo 博客目录中执行以下命令，安装 hexo-next-giscus 插件。

npm install hexo-next-giscus --save

然后在 Hexo 或者 theme 的 _config.yml 配置文件添加如下内容：

giscus:
  enable: true
  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-C
  lang: en
  # Available value: anonymous
  crossorigin: anonymous

giscus 配置​

在 https://giscus.app 页面根据你的个人喜好勾选 giscus 配置项，进行配置，会生成一个配置脚本。

参考该脚本内容修改 _config.yml 文件的 giscus 配置项。

部署​

hexo clean
hexo generate
hexo server

浏览器打开 http://localhost:4000，在文章末尾可以看到 giscus 评论区：

现在，你可以开始评论啦！😄