打算为博客添加评论功能,但是在选择上犯了难,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评论的脚本可以使用。

现在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的语法。

参考链接