之前一直懒得给自己的博客搭建“多说”评论系统。但没想到的是,多说居然要在今年6月底停止服务了,着实令人诧异。偶然在知乎上看到一个基于github issue搭建的评论系统,名叫gitment。这位作者也是相当有想法,佩服佩服。技术类博客的受众终究还是广大同性交友网站代码分享网站的注册用户,利用gitment作为本网站的评论系统再好不过了。下面就简单介绍一下如何将Gitmemt嵌入到基于hexo的博客主题当中。

创建OAuth Key

这个链接 可以来注册一个新的 OAuth Application——但当然,前提是要有一个github账号。表单中的其他内容可以随意填写,但要确保填入正确的 callback URL(一般是评论页面对应的域名,如 https://imsun.net)。提交好之后,github会生成一个 client ID 和一个 client secret,这个将被用于之后的用户登录。

在Hexo主题中引入gitment

我使用的Hexo主题是Maupassant,主题的页面是基于Node.js下的Jade编写。简而言之,Jade是一种空格敏感的静态页面描述语言,它可以与HTML语言进行一一对应。引入gitment的Jade语言代码示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
#container
link(rel='stylesheet', href='https://imsun.github.io/gitment/style/default.css')
script(src='https://imsun.github.io/gitment/dist/gitment.browser.js')
script.
var gitment = new Gitment({
owner: '你的 GitHub ID',
repo: '存储评论的 repo',
oauth: {
client_id: '你的 client ID',
client_secret: '你的 client secret',
},
})
gitment.render('container')

在Maupassant主题中,我们在这个文件中添加gitment:$THEME_ROOT/layout/_partial/comments.jade ,不同的主题会有不同的添加路径。我们可以根据自己的Hexo主题自定义进行gitment插件的添加。

初始化评论

添加之后,我们在Hexo中生成并上传静态页面,可以看到在博客的下方已经有了gitment插件。我们登陆自己的github账号,可以看到一个蓝色的按钮,点击它就可以初始化该页面的评论框。

gitment现在还有一些小问题。譬如说,如果我们有100篇博客页面,我们就需要手动初始化100次博客页面的评论框,创建100个issue。作者在接下来会写一个自动初始化评论的插件,期待作者的更新。

一些小问题

由于我现在用的是Windows 10操作系统,下意识地用Edge浏览器试了一下。遗憾的是,在Edge浏览器中,我们只能浏览评论,不能登录github账号发表评论或点赞……这应该也是待解决的问题之一吧。【Chrome浏览器亲测可用】

有人可能会注意到,我们添加的这一段gitment插件的代码将自己的github账号的OAth client ID和client secret暴露在外,这样是否安全呢?作者在文档中的解释是,github除了需要验证ID和secret,还要验证callback URL,所以只要callback URL不暴露在外,坏叔叔恶意给你的repo添加issue的情况就不会发生。

最后附上我修改过的Maupassant主题,供各位参考,戳这个→主题页面

参考资料

作者的个人博客

Maupassant官方文档