8. 给github博客添加评论功能

使用 github Pages + sphinx + reST 构建好个人技术博客(静态HTML页面)后, 可能还需要添加评论功能. 实现第3方社会化评论的插件有不少, 如Disqus, facebook comment, 多说, 友言等等, 但这些有的是国外的被屏蔽, 有的已经停止服务...

现在 imsun 实现了一个开源的评论系统 gitment , 原理是利用github的issue功能, 访问博客页面的用户只需登录github账号, 就可以进行评论, 感觉非常适合技术博客.

接下来就介绍一下如何使用gitment给自己的github Pages页面添加评论功能

8.1. 1. 注册OAuth Application

https://github.com/settings/applications/new 注册一个OAuth Application, 其中 Home page URL 填自己的博客地址, 如我的https://zzqcn.github.io/, Authorization callback URL 也填自己的博客地址.

填好后提交, 得到client ID和client secret, 后面会用到.

8.2. 2. 编辑博客页面, 引入gitment

将以下代码拷贝到生成的HTML页面里:

<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>

注意id可以不填, owner就是你自己的github账号, repo填自己的一个访问权限为public的repo就可以, 比如我直接填zzqcn.github.io, 之后用户的评论都将放在这个repo的issue里.

由于我是使用sphinx+reST编译出来的静态HTML页面, 在编译好HTML页面之后再一个一个添加这段HTML代码不太方便, 可以直接在需要评论功能的reST源码中使用 .. raw:: html 语法填加这段HTML, 在编译时它会被原样写入生成的HTML.

8.3. 3. 初始化评论

生成的HTML页面发布后, 你需要到该页面, 用github账号(和那个owner一致)登录一下, 然后点击初始化按钮. 每个页面都需要初始化.