经朋友的提醒,我发现我的博客中的评论插件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
的使用非常简单:
- 导入链接
- 添加占位标签
- 初始化插件
- 自定义设置
添加初始化代码
在 Next
主题中,第三方的插件都放在了 _third-party
目录下。
在 themes/next/layout/third-party/comments
中新建 gitalk.swig
:
1 | {% if page.comments && theme.gitalk.enable %} |
载入插件
在 themes/next/layout/third-party/comments
中找到 index.swig
文件,新增 gitalk.swig
:
1 | {% include 'gitalk.swig' %} |
添加占位标签
在 themes/next/layout/_partials
中,找到 comments.swig
文件,这里面是所有支持的评论插件的占位符所放的位置。就拿之前使用的 gitment
来说,可以看到如下的代码:
1 | {% elseif theme.gitment.enable %} |
其中的每一个
1 | {% elseif theme.xxxxx.enable %} |
部分,表示的就是一个评论插件功能。
将上面代码段精简一下:
1 | {% elseif theme.gitment.enable %} |
可以发现:<div id="gitment-container"></div>
就是评论框的占位标签了。
那么依葫芦画瓢,我们将上面的代码稍微修改成 gitealk
的占位标签:
1 | {% elseif theme.gitalk.enable %} |
然后将其加入到任意两个
1 | {% elseif theme.xxxxx.enable %} |
代码段之间即可。
自定义配置
打开 Next
主题的配置文件 themes/next/_config.yml
,加上如下内容:
1 | gitalk: |
其中: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 | { |
未找到相关的 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
限制的。