前言
Hexo的评论插件,最开始使用多说,很棒,后来多说没有了。
之后评论插件换成了畅言,很棒;后来畅言开始插入广告,不服,使用CSS技术屏蔽了广告;现在,畅言更换了插入广告的方式,肯定有解决办法,但是不想和畅言玩了。
决定换一个更好用更靠谱的评论插件,或者找个开源项目自己搭建评论插件系统,实在不行自己写一个。
找到了disqus,感觉很靠谱,但是被墙了。通过曲线救国也能使用,但是违背了简单易用的初衷,遂放弃。
最后,找到了gitalk项目,看了演示,nice,搞一搞。
gitalk简介
Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
项目地址:https://github.com/gitalk/gitalk
特点:
- 使用 GitHub 登录
- 支持多语言(en, zh-CN, zh-TW, es-ES, fr, ru)
- 支持个人或组织
- 无干扰模式(设置 distractionFreeMode 为 true 开启)
- 快捷键提交评论 (cmd|ctrl + enter)
准备
想要gitalk,需要申请GitHub Application。
如上图,以郝同学的申请为例:
- Application name填入喜欢的应用名称。
- Homepage URL填入域名。
- Application description填入应用的描述。
- Authorization callback URL 填入域名。
然后,Register application,转到应用页面。在该页面,可以看到Client ID和Client Secret。
使用配置
以yilia主题为例。
1、下载gitalk项目git clone https://github.com/gitalk/gitalk.git
2、拷贝gitalk/dist/目录下的gitalk.css和gitalk.min.js到yilia/source/lib/gitalk目录。
3、在yilia/layout/_partial/post目录下,新建gittalk.ejs,内容为:
1 | <div class="gitalk"> |
4、编辑yilia/layout/_partial/article.ejs,添加:
1 | <if (!index && theme.gitalk.enable && post.comments){ > |
5、编辑yilia/_config.yml,添加:
1 | # 注释所有畅言配置 |
6、编辑yilia/layout/_partial/head.ejs,添加:
1 | <% if (theme.gitalk.enable){ %> |
至此,配置gitalk评论插件完成。
最终效果如下图:
居然,每篇文章都需要初始化!!!尴尬。。。勉强可以接受。
Validation Failed
打开一些页面的时候,报错:Error: Validation Failed.
在gitalk的issue中发现,如果location.pathname大于50,就会报这个错误。
有同学采用md5编码url的方式来解决这个问题,好想法,参考处理Gitalk中由于文章URL过长导致的Validation Failed(422),来处理一下。
1、访问blueimp-md5 CDN,下载md5.min.js,放入yilia/source/lib/gitalk目录。
2、编辑yilia/layout/_partial/head.ejs,添加:
1 | <% if (theme.gitalk.enable){ %> |
3、gitalk.ejs中id修改为:
1 | id: md5(location.pathname), |
至此,问题解决。
为了更加美观,可以适当修改css,比如在yilia/source/css/_partial/main.stly中添加:
1 | .gitalk{ |