开始学习
< 返回

Hexo 评论系统

Posted
Updated
ByRudy

由于 Hexo 博客系统是静态博客，所以它本身无法支持评论等动态的功能。不过，有很多第三方的评论系统都可以通过添加 JS 代码的方式让 Hexo 博客支持评论功能。

常见的评论系统包括：Valine、Disqus、Gitment、Giscus 等等。本文主要以 Valine 和 Giscus 为例，介绍如何为你的 Hexo 博客系统添加评论功能。

添加 Valine 评论系统

注册 LeanCloud

由于 valine 评论系统是放在 LeanCloud 上的，因此需要先打开 https://www.leancloud.cn 网址注册一个 LeanCloud 账号。

注册完成后创建一个应用，比如名字为 blog，然后进入应用，在 设置 -> 应用凭证 中找到 APP ID 和 APP Key。

Hexo 配置

在 hexo 工程下执行如下命令安装插件

npm install next-theme/hexo-next-valine

在 _config.yml 文件末尾插入如下内容（可以是 hexo 或 theme 的 _config.yml）

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: false
  appId:  # your leancloud application appid
  appKey:  # your leancloud application appkey
  serverURLs: # When the custom domain name is enabled, fill it in here
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  meta: [nick, mail, link] # Custom comment header
  pageSize: 10 # pagination size
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP

将 enable 项改为 true，复制前面生成的 appId 和 appKey。

配置域名

记得在 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去。例如：

https://luhuadong.com

否则网页会出现 “Code 401: 未经授权的操作，请检查你的AppId和AppKey.” 提示。

注意：如果你使用的是自定义域名，还需要填写 serverURLs 项，该值可在 设置 -> 应用凭证 中找到。

Valine 评论区

一切顺利的话，你将会在 Hexo 博客文章末尾看到如下评论区。

添加 Giscus 评论系统

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

运行原理

giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname、<title> 等）来查找与当前页面关联的 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 评论区：

现在，你可以 Giscus 进行评论啦！所有评论信息都可以在 GitHub Discussions 进行管理。

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Please Share Your Feedback
How Can We Improve This Article?
文章目录