个人博客评论插件之gittalk

前言

之前一直在掘金和简书上发技术文章，由于查询起来不太方便，于是便想自己搭建一个博客。由于使用的是hexo搭建的博客，开发一个自己的评论系统有些费劲，于是便想着找找有什么第三方的评论插件。主要看中的有两个，一个是disqus，还有一个是gittalk。鉴于disqus被墙了，需要科学上网才能使用，只能pass了。

gittalk如何集成呢？

1. 首先，需要去github创建一个仓库用于存放评论功能。鉴于我的博客本身就是使用github pages搭建的，所以这部可以省略。
2. 打开github仓库的issues功能
3. 注册一个Github Application

• Application name: 可以随便写
• Homepage URL：就是博客的网址
• Authorization callback URL: 就是github权限验证的回调地址，一般默认就是域名

4. 创建成功后，就可以获取到Client ID和Client Secret了,保存下来。
5. 在博客里集成gittalk 集成的方式呢，有两种：

• 链接方式

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script> 
 
  <!-- or -->
 
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script> 

• npm install

npm i --save gitalk

import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

然后在dom里，添加

<div id="gitalk-container"></div>

接着使用下面的语句初始化gittalk：

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})
 
gitalk.render('gitalk-container')

常见的参数就是以上这些，更多的参数，查看gitalk

遇到的问题

在使用过程中，gittalk会出现Validation failed的错误。 原因是id参数不能超过50个字符，但是gittalk的id会自动添加文章名，由于我的url都包含较长的中文，所以出现了这个错误。 解决方法：使用md5加密location.href,传入id参数

gitbook集成gittalk

由于没有找到现成的插件，所以，我写了个新的插件。

使用方法:

// 注意gittalk，最好放在插件的最后一位
"plugins": [
  "gittalk"
],
"pluginConfig": {
  "gittalk": {
    clientID: 'GitHub Application Client ID',
    clientSecret: 'GitHub Application Client Secret',
    repo: 'GitHub repo',
    owner: 'GitHub repo owner',
    admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
    distractionFreeMode: false  // Facebook-like distraction free mode
  }
}

接着执行以下指令安装即可：

gitbook install

效果图