Hexo使用gitalk作为评论插件

前言

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，内容为：

<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，添加：

<% 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，添加：

# 注释所有畅言配置
# 配置gitalk
gitalk: 
  enable: true
  client_id: 5a238b8c32b1e4dd2156
  client_secret: bfb5d518626f6fdc7da0351d1e0cd37ab75c6361
  repo: voidking.github.io
  owner: voidking
  admin: voidking

6、编辑yilia/layout/_partial/head.ejs，添加：

<% 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，添加：

<% 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修改为：

id: md5(location.pathname), 

至此，问题解决。

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

.gitalk{
  padding: 0 40px;
}

书签

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

报错出现 Error: Validation Failed.