Hexo博客添加Gitment评论系统

之前我的Hexo博客中使用的是 多说 的评论插件,后来多说停止运营了之后就直接把评论功能去掉了,而后一直使用的是邮件的方式。但邮件也是很不方便的,是一种不得已的选择。

最近,看到好多博客中都添加了一个名为 Gitment 的评论插件,直接使用GitHub的 Issues 作为评论内容的存储位置,也是非常方便的。

Update:2019-04-30

Gitment 评论插件已经长时间不更新了,另外由于插件内引用的域名Https证书已经过期,导致无法提交评论。建议更换为更好用的 Gitalk 评论插件。

配置方法见:Hexo博客添加Gitalk评论系统 | IT范儿


Next主题版本

我的hexo主题使用的是 Next 主题,当前版本为 v5.1.3 。这一版是直接内置支持 gitment 功能的。关于如何升级 Next 主题,可以看我之前的文章:Hexo博客添加搜索功能

另外我发现,当前 Next 主题的最新版本为 v6.4.1,而 v6.x.x 版本和 v5.x.x 版本又有所不同,不能平滑的升级,所以这里我就没有升级 Next 到最新,直接使用的 v5.1.3 版本。

添加Gitment评论

创建GitHub OAuth Apps

打开链接 OAuth AppsNew OAuth App 。按要求填写相应内容即可。

其中,Homepage URL 表示站点的网址。Authorization callback URL 为站点的回调地址,一般也默认为站点的网址。

最后,得到 Client IDClient Secret 备用。

修改配置

themes/next 目录下,找到 _config.yml 配置文件,找到 gitment 配置段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: false
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: # MUST HAVE, Your Github Username
github_repo: # MUST HAVE, The name of the repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

设置 enabletrue ,表示启用 gitment 评论插件。

Update:2019-04-30

Gitment 评论插件已经长时间不更新了,另外由于插件内引用的域名Https证书已经过期,导致无法提交评论。建议更换为更好用的 Gitalk 评论插件。

配置方法见:Hexo博客添加Gitalk评论系统 | IT范儿

其他的必需项是 github_user ,表示你的github账号名称。 github_repo 表示保存评论数据的仓库名称,这里可以使用当前博客所在的仓库名称,也可以单独设置一个专门的仓库。client_idclient_secret 为上面创建的值。

修改完成后,将hexo博客文件上传到github。因为gitment功能必需在线上才能进行操作。

注意事项

点击登录github发现一直显示loading

在创建 OAuth Apps 中填写 Authorization callback URL 时,网站的地址末尾不能带有 /


某些文章不能生成Issues

当点击文章页面底部的 初始化本文的评论页 按钮时,页面会弹出错误信息:Error:Validation Failed 信息。

通过查看操作请求,gitment会在生成Issues时创建两个 label 标签。

一个是文章标题的路径: window.location.pathname 值,如 /2018/09/05/pip-install-locale-error-unsupported-locale-setting/ ;另一个是定值 gitment

而由于 github 中 Issueslabel 长度限制为最大 50 个字符,当 文章标题长度过长时,该label就会生成失败,而导致初始化错误,弹出 Validation Failed 的提示。

通过网上的搜索,发现可以使用文章创建时的时间来代替文章标题,作为这个唯一的label标签。

找到giment的配置:/themes/next/layout/_third-party/comments/gitment.swig 文件:

找到如下部分:

1
2
3
4
5
var gitment = new {{CommentsClass}}({
id: window.location.pathname,
owner: '{{ theme.gitment.github_user }}',
repo: '{{ theme.gitment.github_repo }}',
...

修改为:

1
2
3
4
5
var gitment = new {{CommentsClass}}({
id: 'itfanr_blog_{{ date(page.date, "YYYYMMDDhhmmss") }}',
owner: '{{ theme.gitment.github_user }}',
repo: '{{ theme.gitment.github_repo }}',
...

这样,在初始化时就不会出错了。


有新的Issues时发送钉钉提醒

上面我们添加了评论功能,但是在使用中会出现不能及时响应的问题。当有人对文章做了评论或提出什么疑问后,我们并不能及时的知道或者回复,这样给人的感觉是不好的。虽然添加了评论功能,但反而不如使用邮件的方式高效了。

经过一番思考后,我发现平时工作中用到的钉钉中是可以添加GitHub的钉钉机器人的。而手机端的钉钉也能做到有新提醒后立即响应。所以,可以设置当GitHub的Issues有变动时,通过钉钉机器人提醒我们查看新的评论或作出回复。

生成Github机器人WebHook地址

钉钉机器人只有在群中才能添加,个人是无法添加的。但是一个人又无法创建群。那么该如何添加一个钉钉群机器人呢?

Update:2019-05-05

我采用的方法是 “偷梁换柱” 的方式。首先呢,在手机或PC端选择 “发起群聊”,至少选择二个人进来,此时注意不要在群里发任何信息。然后在 群设置 中的 群成员 选项中移除其他人就可以了,整个过程其他人不会接收到任何消息(有点类似于微信清理联系人的操作)。就这么简单。这样,这个群里就只有你一个人了,添加群机器人后也不会打扰到别人。

之前钉钉中组建群组至少必须是二个人,最近测试发现组建群组至少必须是三个人了。也就是必须选择另外两个好友才能组成一个群组。如果只选择一个好友,那进入的就是 “发消息” 的界面了。

然后在 设置中选择 群机器人 选项,选择 GitHub机器人 ,按照设置流程生成GitHub机器人,即可获取到相应群的WebHook地址,其格式如下:

1
https://oapi.dingtalk.com/robot/send?access_token=xxxxxxxx

在GitHub中设置项目的webhook

进入 GitHub 的 Hexo 博客仓库,依次点击 SettingsWebhooks & ServicesAdd Webhook ,新增一项。

payload URL 中填写刚才获得的钉钉WebHook地址;

Content type 选项下选择 application/json 项;

Secret 中不填写内容,保持空值即可;

Event 选项下,我这里选择了 issues 相关的所有 event 事件,也可以按照自己的需求自定义。

然后,点击 Add webhook 按钮即可。

至此,当 Issues 中有新的评论时,在钉钉手机客户端就能立即接收到提醒了。

参考

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