IT范儿

程序员改变世界

0%

Hexo博客添加Gitalk评论系统

发表于 分类于
将Hexo博客评论插件从Gitment更换为Gitalk，并实现钉钉机器人实时提醒

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

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

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

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

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

想想当时我加入 Gitment 评论插件时，Next主题已经集成好了，所以只要打开并添加好自己的 GitHub token 信息之后，就能正常使用了。而 Gitment 和 Gitalk 都是评论插件，所以只要按照 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 评论插件是通过 issues 的 labels 来标识一篇文章的。如果 labels 中存在相应文章的 label 标签，那就说明该文章已经初始化过了。

比如 我一篇文章设置的 ID 为 itfanr_blog_20190426225702 ，默认的 labels 为 gitalk，那么相应的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