Hexo博客添加Gitalk评论系统

经朋友的提醒,我发现我的博客中的评论插件Gitment已经不能正常使用了。简单的分析了一下:发布评论内容后 Gitment 区域就会一直显示 Logging in... 的加载错误信息,查看网络请求,发现是Gitment插件中使用的一个域名 https://gh-oauth.imsun.net 的Https证书已经过期了。

查看了一下该域名的证书,发现早在 2018年9月14日 就到期了,哎,我说为什么我的博客一直没有人评论呢,原来是这个原因。

问题是找到了,但博客评论的功能可不能去掉,毕竟这是一个很好的交流问题的地方。

在网上搜索了一下,发现了一款名为 Gitalk 的评论插件,和 Gitment 功能实现差不多。看了看github中的issues信息,发现 Gitalk 的活跃度还是很高的。

因为我用的是 HexoNext 主题,去 Next 的官网中找了一下文档,发现并没有直接集成 Gitalk 评论插件。那看来只能自己改造了。

想想当时我加入 Gitment 评论插件时,Next主题已经集成好了,所以只要打开并添加好自己的 GitHub token 信息之后,就能正常使用了。而 GitmentGitalk 都是评论插件,所以只要按照 Gitment的方式来修改即可,也是很简单的。

废话不多说,Gitalk 用起来。

提示:建议和我之前的文章 Hexo博客添加Gitment评论系统 | IT范儿 一起食用,体验更好哟!!!


禁用Gitment

themes/next/_config.yml 文件中的 gitment: enable:true 改为 false。关闭 Gitment 的评论插件。


使用Gitalk

先简单过一下 Gitalk 的文档:gitalk/gitalk: Gitalk is a modern comment component based on Github Issue and Preact.

Gitalk 的使用非常简单:

  1. 导入链接
  2. 添加占位标签
  3. 初始化插件
  4. 自定义设置
添加初始化代码

Next 主题中,第三方的插件都放在了 _third-party 目录下。

themes/next/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
22
23
{% if page.comments && theme.gitalk.enable %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></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.adminUser }}'],
id:'{{ theme.gitalk.IdPrefix || gitalk }}_{{ date(page.date, "YYYYMMDDHHmmss") }}',
labels: '{{ theme.gitalk.labels }}',
perPage: {{ theme.gitalk.perPage }},
pagerDirection: '{{ theme.gitalk.pagerDirection }}',
createIssueManually: {{ theme.gitalk.createIssueManually }},
distractionFreeMode: {{ theme.gitalk.distractionFreeMode }}
})
gitalk.render('gitalk-container')
</script>
{% endif %}
载入插件

themes/next/layout/third-party/comments 中找到 index.swig 文件,新增 gitalk.swig:

1
{% include 'gitalk.swig' %}
添加占位标签

themes/next/layout/_partials 中,找到 comments.swig 文件,这里面是所有支持的评论插件的占位符所放的位置。就拿之前使用的 gitment 来说,可以看到如下的代码:

1
2
3
4
5
6
7
8
9
{% elseif theme.gitment.enable %}
<div class="comments" id="comments">
{% if theme.gitment.lazy %}
<div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
<div id="gitment-container" style="display:none"></div>
{% else %}
<div id="gitment-container"></div>
{% endif %}
</div>

其中的每一个

1
{% elseif theme.xxxxx.enable %}

部分,表示的就是一个评论插件功能。

将上面代码段精简一下:

1
2
3
4
{% elseif theme.gitment.enable %}
<div class="comments" id="comments">
<div id="gitment-container"></div>
</div>

可以发现:<div id="gitment-container"></div> 就是评论框的占位标签了。

那么依葫芦画瓢,我们将上面的代码稍微修改成 gitealk 的占位标签:

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

然后将其加入到任意两个

1
{% elseif theme.xxxxx.enable %}

代码段之间即可。

自定义配置

打开 Next 主题的配置文件 themes/next/_config.yml ,加上如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
gitalk:
enable: true
ClientID: xxxxxx
ClientSecret: xxxxxxxxxxxx
repo: gitalk
owner: xxxxx
adminUser: xxxxx
IdPrefix: gitalk
labels: gitalk
perPage: 10
pagerDirection: last
createIssueManually: true
distractionFreeMode: false

其中:repo 表示将 issues 提交到哪个仓库。 IdPrefix 是我自定义添加的参数,表示ID 值的前缀。其他项可直接参考官方的文档来进行修改:gitalk/readme-cn.md at master · gitalk/gitalk


问题解决

i.concat(…).join is not a function

执行 hexo s -g 预览博客,发现评论部分报错:

1
Error: i.concat(...).join is not a function

这个问题是 labels 部分的问题,通过如下方式处理,将 labels 修改为:

1
2
3
{
labels: '{{ theme.gitalk.labels }}'.split(',').filter(l => l),
}
未找到相关的 Issues 进行评论

更改为 Gitalk 之后,发现之前使用 Gitment 已经创建了 issues 的文章却提示 未找到相关的 Issues 进行评论 :

原因是:

Gitalk 评论插件是通过 issueslabels 来标识一篇文章的。如果 labels 中存在相应文章的 label 标签,那就说明该文章已经初始化过了。

比如 我一篇文章设置的 IDitfanr_blog_20190426225702 ,默认的 labelsgitalk,那么相应的issues如下:

这两个label一起来标识一篇文章。

因为上面我将ID值的格式进行了修改:

原来:

1
id: 'itfanr_blog_{{ date(page.date, "YYYYMMDDhhmmss") }}',

现在:

1
id:'{{ theme.gitalk.IdPrefix || gitalk }}_{{ date(page.date, "YYYYMMDDHHmmss") }}',

其中的时间戳格式进行了更改,也就导致了 labels 不匹配而找不到了。

由于暂时没有找到如何批量更新 labels 的方法,而一个一个的手动更改又太麻烦了。所以我就删除原来的 issues,重新进行创建。此时,我发现 Gitalk 一个好用的地方是,当将配置项 createIssueManually 设置为 false 时,如果发现是管理员浏览文章,会自动为该文章初始化评论功能,非常方便。

另外一个主要的原因是:这几个月我的博客一直没有评论,所以好多都是空的 issues,删除重建也就没有什么犹豫了。

关于文章ID

这里需要说明的是 ID 这一项。

依照gitalk文档中的解释,该值表示当前页面的唯一id,且长度不能超过50:

1
The unique id of the page. Length must less than 50.

所以,我这里设置为了 前缀+文章create时间戳的方式来实现唯一性。

通过在配置文件中指定 IdPrefix 来表示前缀,默认值为 gitalk

如果你不想用时间戳的方式,也可以使用文章链接的MD5值来实现唯一ID,方法如下:

在上面 themes/next/layout/third-party/comments/gitalk.swig 中添加对 md5.js的引用:

1
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

修改ID部分为:

1
id: md5(location.pathname),

即可。

但是,不建议直接使用默认的 id: location.pathname, 即 文章链接。有时候文章标题可能会很长,当超过50个字符之后就会提交失败,这个是由 GitHub中的 Issues labels 限制的。


相关参考

坚持原创技术分享,您的支持将鼓励我继续创作!
如有疑问或需要技术讨论,请留言或发邮件到 service@itfanr.cc