本來博客是沒有評論功能的，後來經imwxz提醒，覺得還是搞個評論區比較好，就花了幾個小時弄了一下。中間遇到一些小問題，就稍微記錄一下。
在此之前，要先創建一個GitHub Application。裏面Homepage URL和Authorization callback URL寫上博客的域名，別的隨便寫。比如我的是這樣：
需要注意兩點：
-
域名結尾的
/要加上，否則在後面使用時可能會出現重定向錯誤。 -
在這裏填的域名是博客的直接域名，否則在後面使用時也可能會出現重定向錯誤。
啥意思呢，比如我的博客是基於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
StringDefault:
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就好了。