Hexo使用gitalk作为评论插件

文章目录
  1. 1. 前言
  2. 2. gitalk简介
  3. 3. 准备
  4. 4. 使用配置
  5. 5. Validation Failed
  6. 6. 书签

前言

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="gitalk">
<div id="gitalk-container"></div>
<script type="text/javascript">
const gitalk = new Gitalk({
clientID: '<%=theme.gitalk.client_id%>',
clientSecret: '<%=theme.gitalk.client_secret%>',
repo: '<%=theme.gitalk.repo%>',
owner: '<%=theme.gitalk.owner%>',
admin: ['<%=theme.gitalk.admin%>'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')
</script>
</div>

4、编辑yilia/layout/_partial/article.ejs,添加:

1
2
3
4
5
6
7
<% if (!index && theme.gitalk.enable && post.comments){ %>
<%- partial('post/gitalk', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>

5、编辑yilia/_config.yml,添加:

1
2
3
4
5
6
7
8
9
# 注释所有畅言配置
# 配置gitalk
gitalk:
enable: true
client_id: 5a238b8c32b1e4dd2156
client_secret: bfb5d518626f6fdc7da0351d1e0cd37ab75c6361
repo: voidking.github.io
owner: voidking
admin: voidking

6、编辑yilia/layout/_partial/head.ejs,添加:

1
2
3
4
<% if (theme.gitalk.enable){ %>
<link rel="stylesheet" href="/lib/gitalk/gitalk.css">
<script src="/lib/gitalk/gitalk.min.js"></script>
<% } %>

至此,配置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
2
3
4
5
<% if (theme.gitalk.enable){ %>
<link rel="stylesheet" href="/lib/gitalk/gitalk.css">
<script src="/lib/gitalk/gitalk.min.js"></script>
<script src="/lib/gitalk/md5.min.js"></script>
<% } %>

3、gitalk.ejs中id修改为:

1
id: md5(location.pathname),

至此,问题解决。

为了更加美观,可以适当修改css,比如在yilia/source/css/_partial/main.stly中添加:

1
2
3
.gitalk{
padding: 0 40px;
}

书签

hexo next 主题配置 gitalk 评论后无法初始化创建 issue

报错出现 Error: Validation Failed.