打算为博客添加评论功能，但是在选择上犯了难，Hexo原生支持的disqus由于你懂得的原因不能在国内使用、著名的 多说 又已经挂了，网易云、今日头条的产品风格也不太适合技术类个人博客，最终在知乎上找到了Gitment，被简约的样式和强大的功能吸引了，于是折腾了一晚上，期间踩了不少坑，把过程记录下来，为后来者提供点方便。

关于Gitment

Gitment 是imsun实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

使用

1. 注册OAuth Application

点击这里注册一个新的OAuth Application，其他的部分可以随意填写，但是Callback Url必须要填写你的域名。

注册之后你会得到一个client ID 和一个 client secret，它们将会被用于之后的参数设置。你可以在你的Github账户的Setting/Developer settings/‘your OAuth Application’s name’/ 中随时更改这两个参数。

2. 引入Gitment

你需要在需要评论的页面加入以下代码：

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo',
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

以上的参数需要你根据你自己的情况对应修改，不过有几点需要注意的是：

  1. 根据一些博主的说法，id 如果使用默认的location.href，在一些情况下会出现拉取不到评论的问题，所以最好还是设置成page.path或者page.title。
  2. owner: 一定要填你的Github用户名
  3. repo： 是需要填写repo 的名字，不是repo的链接
  4. gitment.render()的参数需要改成你想要布置评论框的容器的id，具体的值要根据你的theme设置，如果你的theme没有为评论框容器设置id，那么你需要自己设置。

对应的 你需要修改你的theme，如果你的theme基于nodejs，那么你只需要将上面的代码修改后粘贴进你主题的模板文件（一些模板还需要在theme的_config.yml文件中进行设置）

如果你的theme和我一样，基于jade/pug，那么你需要把上面的代码改为jade的语法：

script.
  var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo',
  oauth: {
  client_id: '你的 client ID',
  client_secret: '你的 client secret',
  },
  })
  gitment.render('container')

如果你实在搞不懂jade的格式，这里是一个在线的html to jade 工具。

**注意：**修改jade文件的时候，一定要把制表符替换为空格，不然hexo g 编译的时候会报错。同时不要在本地测试Gitment，因为callback url填写的链接是项目部署的地址，在本地测试Gitment只能看到评论框的位置和样式，不能真正使用评论功能。

3. 初始化评论

页面发布后，你需要访问页面并使用你的 GitHub 账号登录（请确保你的账号是第二步所填 repo 的 owner），点击初始化按钮。之后其他用户才能在该页面进行评论。

也就是每一篇文章发布后都需要需要你到文章页面初始化评论。当然这里有一个自动初始化Gitment评论的脚本可以使用。

4. 修改Hexo默认页面链接（permalink）格式

现在Gitment已经可以正常使用了，但是因为Hexo的默认permalink的格式是时间+文章题目，而id的值无可避免的和permlink相关，所以存在两个问题：

  1. id 的值（文章标题）不能存在中文内容，包括符号和字符。
  2. 如果id的值（文章标题）被修改，那么已有的评论将会消失。

对应的，我们需要修改permalink的默认格式，使得每篇文章的link都是一开始就被确定下来的，不会因为内容的修改而变化。（这也同样有益于网站SEO的优化）

我们使用abbrlink插件实现这个功能：

$ npm install hexo-abbrlink --save

通过这个命令安装abbrlink，然后再网站根目录的_config.yml中将permalink相关的设置修改为：

permalink: post/:abbrlink/

然后添加permalink的配置内容如下：

#abbrlink
abbrlink:
alg: crc32  # 算法：crc16(default) and crc32
rep: hex    # 进制：dec(default) and hex

最后别忘了执行

hexo d -g

一些感谢

感谢我使用的prontera主题的作者powman（愤怒的泡面）在我修改模板时为我解答疑惑，同时也感谢我的朋友oyiadin为我解释jade的语法。

参考链接