Gitalk

官方地址

体验地址

为 Hexo 的 even主题添加gitalk评论系统

创建 gitalk 文件

themes/even/layout/_script/_comments目录下新增gitalk.swig文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript" src="{{ url_for('js/src') }}/md5.min.js?v={{ theme.version }}"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{ theme.gitalk.clientID }}',
clientSecret: '{{ theme.gitalk.clientSecret }}',
repo: '{{ theme.gitalk.repo }}',
owner: '{{ theme.gitalk.owner }}',
admin: ['{{ theme.gitalk.admin }}'],
id: md5(location.pathname),
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}

为了解决「常见问题」中1,这里引用md5.min.js文件,然后将id,通过md5函数加密后再请求github issueAPI,md5.min.js文件我放在themes/even/source/js/src/md5.min.js目录,当然你也可以引入远程地址,md5库地址

添加 gitalk 判断逻辑

themes/even/layout/_partial/comments.swig添加如下代码:

1
2
3
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
{% endif %}

注意:if elseif endif 语法。

引入 gitalk

themes/even/layout/_script/comments.swig文件中引入gitalk.swig文件,代码如下:

1
2
3
{% if theme.gitalk.enable %}
{% include '_comments/gitalk.swig' %}
{% endif %}

配置 gitalk

配置themes/even/_config.yml中关于gitalk的配置,新增代码如下:

1
2
3
4
5
6
7
8
9
10
# Gitalk
# more info please open https://github.com/gitalk/gitalk
gitalk:
enable: true
clientID: xxxxxxx
clientSecret: yyyyyyyyyyy
repo: 'dbing.github.io'
owner: 'dbing'
admin: 'dbing'
distractionFreeMode: true

没有clientIDclientSecret点击申请,配置完以上恭喜你,重新生产部署一下你的博客文章命令:hexo g -d,打开文章详情页看看是否多出了评论框 :)

常见问题

Q1.Error: Validation Failed.

解决方法:https://github.com/gitalk/gitalk/issues/115#issuecomment-375954482

打开Network看请求,多半是因为github issues接口错误,以上方案给出的很详细。

Q2.Error: Issues are disabled for this repo

解决方法:https://github.com/imsun/gitment/issues/125