在VuePress中添加Gitalk评论

本来博客是没有评论功能的，后来经imwxz提醒，觉得还是搞个评论区比较好，就花了几个小时弄了一下。中间遇到一些小问题，就稍微记录一下。

在此之前，要先创建一个GitHub Application。里面Homepage URL和Authorization callback URL写上博客的域名，别的随便写。比如我的是这样：

需要注意两点：

1. 域名结尾的/要加上，否则在后面使用时可能会出现重定向错误。

2. 在这里填的域名是博客的直接域名，否则在后面使用时也可能会出现重定向错误。

   啥意思呢，比如我的博客是基于github pages的，可以通过https://hermitsun.github.io访问；然后我又买了一个域名https://wensun.today，然后把https://hermitsun.github.io重定向到了https://wensun.today。在这里，如果写的是https://hermitsun.github.io，就会出现重定向错误。

然后把生成的Client ID和Client Secret留着，后面要用。

其实gitalk用起来还是挺简单的，文档也比较详细。但是因为用了vuepress，索性就用npm了。当然也可以用HTML，就是要手动document.createElement，不太推荐：

npm i --save gitalk

然后在组件里导入。建议把评论做成组件，这样方便引用。这里给出一个例子：

// Comment.vue
<template>
    <div class="gitalk-container">
        <div id="gitalk-container"></div>
    </div>
</template>

<script>
  import 'gitalk/dist/gitalk.css'
  import Gitalk from 'gitalk'

  export default {
    name: 'comment',
    mounted() {
      const commentConfig = {
        clientID: 'your client id',
        clientSecret: 'your client secret',
        repo: 'HermitSun.github.io',
        owner: 'HermitSun',
        admin: ['HermitSun']
      };
      const gitalk = new Gitalk(commentConfig);
      gitalk.render('gitalk-container');
    }
  };
</script>

这里稍微解释一下几个参数的意思：

• clientID和clientSecret就是刚才生成的，不用多说；
• repo是用于保存issue的仓库（因为gitalk是基于issue的），这个repo必须是public的；我在这里直接用了博客的仓库。
• owner是保存issue的仓库的拥有者。
• admin是保存issue的仓库的管理员（对这个仓库有读写权限），当然也可以是owner了。

然后在md文件里引用这个组件，就可以用了。

但是还有个问题，在使用的时候可能会报错Error: Validation Failed.。这个有可能是因为id过长，导致gitalk无法生成issue。gitalk的文档上说：

id String

Default: location.href.

页面的唯一标识。长度必须小于50。

长度必须小于50个字符。而我们写博客一般都用中文起标题，而中文encode了之后会变得很长，很容易就超过50个字符了，所以必须想办法让他小于50个字符。

目前看起来用md5来做一个编码效果还不错。首先，导入这个md5的库：

npm install blueimp-md5

然后在gitalk的配置里加上id，就可以正常使用了：

const commentConfig = {
  clientID: 'your client id',
  clientSecret: 'your client secret',
  repo: 'HermitSun.github.io',
  owner: 'HermitSun',
  admin: ['HermitSun'],
  id: md5(location.pathname) // <-
};

至于为什么这里是md5(location.pathname)而不是md5(location.href)，因为在微信浏览器里打开时，微信浏览器会给URL加上一些奇怪的参数（issue #104）：

使用的是URL作为issue的tag来进行关联的，在微信中打开会默认增加一些请求参数，导致使用URL无法关联issue而会重新创建issue。

因为href是绝对路径，就会有这个问题；而pathname是相对路径，就不会有这个问题。所以，换成pathname就好了。