# 在VuePress中添加Gitalk评论

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

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

image.png

需要注意两点:

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

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

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

然后把生成的Client IDClient 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就好了。

最后更新于: 6/25/2020, 5:47:39 PM