博客评论插件有很多又很少,gitalk在目前来看是比较适合hexo主题的一款评论系统。

1. 关于gitalk

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。使用 Github 帐号登录,界面干净整洁,也支持 MarkDown语法。

主要特性:
• 使用 Github 登录
• 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
• 支持个人或组织
• 无干扰模式(设置 distractionFreeMode 为 true 开启)
• 快捷键提交评论 (cmd|ctrl + enter)
• 支持MarkDown语法

2. 配置安装

本人hexo主题是freemind.386,和next主题配置不同,类似freemind主题本地文件需要修改的是ejs文件,而非swig文件。

1. 新建repo

Github上新建一个仓库,用于评论的存取。

2. 注册一个新的OAuth application

Gitalk 需要一个 Github Application,可以通过在GitHub首页的个人头像按如下路径找到->setting->Developer settings->New OAuth App。也可以直接点击这里申请。按其提示填写即可,然后生成的clientID和clientSecret待会再本地配置需要用到,这两个应该是安全方面的考虑。

3. 本地配置

1.comment.ejs

找到comment.ejs,每个主题的路径不太一样,icalm是icalm/layout/_partial/comment.ejs,freemind.386是freemind.386/layout/_partial/commment.ejs。在相应位置粘贴下面的代码,不要问我相应位置是哪,你心里没一棵b树吗?🐶

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<div id="gitalk-container"></div>
<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 %>',
id: window.location.pathname,
repo: '<%= theme.gitalk.repo %>',
owner: '<%= theme.gitalk.owner %>',
admin: '<%= theme.gitalk.admin %>'
})
gitalk.render('gitalk-container')
</script>

2. 主题配置_config.yml

修改主题配置文件_config.yml,文末添加如下配置:

1
2
3
4
5
6
7
8
#gitalk settings
gitalk:
enable: true #用来做启用判断可以不用
owner: bababadboy #Github 用户名,
repo: comment #储存评论issue的github仓库名
admin: bababadboy #Github 用户名,
clientID: 省略 #`Github Application clientID`
clientSecret: 省略 #`Github Application clientSecret`

3. 存在的bugs

捣鼓配置了很久部署了后,gitalk总是出现错误Validation Failed,上述配置有误,后发现gitalk的issue报错出现 Error: Validation Failed. #102。原来受伤的不止我一个人,issue目前还是open的状态,但是讨论中大家也已经有了不完美的解决方案:md5加密可以缩短label的长度,从而避免因label长度超过50导致无法验证。

本人采用的解决方案来自issue的方法,如下图:

Comments

⬆︎TOP