开始使用 Gitalk 评论系统

记录一下在 Hexo 上的 Next 主题,使用 Gitalk 作为评论系统。

这次基于 Hexo 搭建好博客之后,发现 Hexo 默认是没有评论功能的,这就需要我们接入第三方评论系统。博客使用的是 Next 主题。

主题目录下的配置文件中提供了很多第三方的评论系统,最开始测试使用的是 Disqus 接入也很简单,只需要在 Disqus 注册账号,绑定网站,回到配置文件中输入 Disqus 绑定的用户名即可完成接入。

但是在实际体验过程中,由于这是一家非境内服务商,再加上这片神奇的土地上的特色网络环境,导致加载速度非常慢,甚至在不挂梯子的时候根本无法加载出来。

更严重的是,严重的影响了网站的加载速度。

Next 主题配置文件中还提供了一款叫做 Gitment 的评论插件,按照上面的教程进行接入,加载速度相比 Disqus 而言有了大大的提升。

在安装的过程中,Gitment 每次发布新文章需要到页面手动点击初始化,感觉好麻烦的样子。

后来发现了 Gitment 的同类产品,也就是本博客使用的 Gitalk ,只要打开文章页面即可完成初始化(需要 Github 处于登陆状态)。

用下来感觉还不错,个人感觉界面样式比 Gitment 好看一丢丢。


简介

Gitalk 是一款基于 Github 通过调用 API 使用 Github 上仓库的 Issues 来存放评论的项目,可谓是脑洞大开!

项目地址 Gitalk

本文参考官方 Wiki 搭建


安装过程

1. 申请 Github Application

由于需要调用 Github API ,首先点击注册一个 Github Application 。

申请过程中 Authorization callback URL 这项要填写你调用的 Url,如果用在博客上,就输入博客 url 地址好了。

创建成功后,会看到 clientID: XXXclientSecret: XXX 这两个参数接下来我们会用到。

2. 打开 Next 主题配置文件 _config.yml

1
2
3
4
5
6
7
8
9
10
# Gitalk
# more info please open https://github.com/gitalk/gitalk
gitalk:
enable: true
clientID: #填写步骤一中申请应用后网页上的的对应参数
clientSecret: #同上
repo: #填写你准备用来存放评论的仓库,只需要写名称,比如 "Gialk",一定确保已经创建该仓库
owner: #你的 Github ID
admin: # 你的 Github ID或者其他有权限的管理,官方注释"support multiple admins split with comma, e.g. foo,bar"
pagerDirection: first #这个默认就好了,是指评论排序方式。

填写配置的时候要注意:后面加一个空格,不然会报错。

3. 在 Next 主题目录下找到 layout/_partials/comments.swig

增加以下内容:

1
2
3
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

4. 在layout/_third-party/comments/目录下增加文件gitalk.swig

内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.gitalk.enable %}
{% if page.comments %}
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
const gitalk = new Gitalk({
clientID: '{{theme.gitalk.clientID}}',
clientSecret: '{{theme.gitalk.clientSecret}}',
repo: '{{theme.gitalk.repo}}',
owner: '{{theme.gitalk.owner}}',
admin: '{{theme.gitalk.admin}}'.split(','),
id: '{{ page.date }}', #这个是基于文章时间创建 Issues ,默认是以文章标题作为标签创建 Issues 会导致长标题初始化失败。
pagerDirection: '{{theme.gitalk.pagerDirection}}',
// facebook-like distraction free mode
distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
{% endif %}
{% endif %}
{% endif %}

5.打开layout/_third-party/comments/index.swig

增加一下内容:

1
{% include 'gitalk.swig' %}

6. 评论初始化

按照上面的步骤装好之后,打开一篇文章,在同一浏览器内只要保持 Github 账号是登陆状态,即可完成初始化。

如果不进行初始化,别人打开你的文章页面,评论区就会出现:

未找到相关的 Issues 进行评论

这时候去你的 Github 用来存放评论的仓库,应该可以看到 Issues 中已经有了创建。

由于图床的问题还没解决,暂时就不上图了~-~

7. 需要注意的地方

评论系统仅限于文章开启,对于标签页面,关于页面,分类页面等等不需要开启评论功能。

这里需要修改一下对应的模板

拿关于页面举例子,也就是 about目录

打开 about.md文件,增加一行:
comments: false

然后保存一下,重新部署一下 Hexo 即可。

同理其他页面进行相同的设置。