早就想给博客添加评论功能,一直没去研究。虽然前端代码一点都不会,但好在我会魔改:)

这篇文章记录一下我为 Even 主题添加 gitment 作为评论系统的过程。首先,我们需要先注册 OAuth Application ,填的东西如下:

1

点击 Register application 然后将 client ID 和一个 client secret 记下,等下要用。

2

然后将下面的代码添加到 themes/even/layout/_partial/comments.swig 页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

这里 第2-3行 有一个 cssjs 程序,我直接下载到本地,分别存储在:themes/even/source/css/gitcomment_default.cssthemes/even/source/js/src/gitment.browser.js .然后我将整个 themes/even/layout/_partial/comments.swig 的代码修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% if page.comments and not is_home() %}
<div class="comments" id="comments">
{# Gitcomment #}
<div id="container"></div>
<link rel="stylesheet" href="{{ url_for('css') }}/gitcomment_default.css">
<script src="{{ url_for('js/src') }}/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
id: '{{ page.title }}',
owner: 'mochazz',
repo: 'comments',
oauth: {
client_id: 'ecxxxxxxxxxxxa5',
client_secret: 'baxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx78',
},
})
gitment.render('container')
</script>
</div>
{% endif %}

然后就可以正常使用了。然而最近 gitment 出了些问题,即我按照上述步骤配置后,在初始化评论处会报 [object ProgressEvent] 错误,我到 gitment 项目看 issue 的时候,发现好多人出现这个错误,不过在下面的 issue 中有解决方法。首先要在自己的服务器上搭一个验证功能,搭建教程及代码点这里 ,然后找到刚才我们下载的 themes/even/source/js/src/gitment.browser.js 文件,将其中的验证服务器地址修改成你服务器的地址即可(找到第一个 _utils.http.post 对应的 URL ,默认服务器地址为:https://gh-oauth.imsun.net ,将其改成自己搭建的验证服务器即可)。我比较懒,这里直接用了别人搭建好的地址:https://auth.baixiaotu.cc ,然后就可以使用评论功能了。

一些问题

网络上很多文章说上面的 repo 写自己的博客的地址,但是我不建议这么做。我自己的话是在 github 新建了一个 repository 专门用来存放评论,这样方便管理。上面的 id 字段我用的是每篇文章的标题 ,这样就不会将所有文章的评论全部显示在一篇文章中。还有一个问题是验证服务器的搭建,这里注意用低版本的npm运行代码会报错,当我使用npm4版本就不会再报错了。安装的话,使用以下命令即可:

1
2
3
4
apt install npm
git clone https://github.com/imsun/gh-oauth-server.git
cd gh-oauth-server
npm start

10月25日更新

gitment 实在是不稳定,即使我自己搭了验证服务器也不稳,只好放弃转向 Valine 。这个配置十分简单。首先 注册 LeanCloud 获取 APP IDAPP Key ,然后用 npm 命令安装 Valine (更详细点 这里 ):

1
2
npm install leancloud-storage --save   # Install leancloud's js-sdk
npm install valine --save # Install valine

修改 theme/even/_config.yml 文件:

1
2
3
4
5
6
7
8
# Valine comment https://valine.js.org
valine:
appid: # your leancloud appid
appkey: # your leancloud appkey
notify: false # true/false:mail notify !!!Test,Caution. https://github.com/xCss/Valine/wiki/Valine-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E6%8F%90%E9%86%92%E8%AE%BE%E7%BD%AE
verify: false # true/false:verify code
avatar: mm # avatar style https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
placeholder: Just go go # comment box placeholder

修改 theme/even/layout/_partial/comments.swig 文件:

1
2
3
4
5
6
7
{% if page.comments and not is_home() %}
<div class="comments" id="comments">
{% if theme.valine.appid and theme.valine.appkey %}
<div id="vcomments"></div>
{% endif %}
</div>
{% endif %}

修改 theme/even/layout/_script/_comments/valine.swig 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.valine.appid and theme.valine.appkey %}
<!-- valine Comments -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//cdn.jsdelivr.net/gh/xcss/valine@v1.1.7/dist/Valine.min.js"></script>
<script type="text/javascript">
new Valine({
el: '#vcomments',
notify: {{ theme.valine.notify }},
verify: {{ theme.valine.verify }},
app_id: "{{ theme.valine.appid }}",
app_key: "{{ theme.valine.appkey }}",
placeholder: "{{ theme.valine.placeholder }}",
avatar: '{{ theme.valine.avatar }}'
});
</script>
{% endif %}

修改 theme/even/layout/_script/comments.swig 文件:

1
2
3
4
5
6
7
{% if theme.disqus_shortname %}
{% include "_comments/disqus.swig" %}
{% elseif theme.changyan and theme.changyan.appid and theme.changyan.appkey %}
{% include "_comments/changyan.swig" %}
{% elseif theme.valine.appid and theme.valine.appkey %}
{% include "_comments/valine.swig" %}
{% endif %}

要想在其他 hexo 主题中添加,可以参考 这里