給你的 VuePress 新增 Gitalk 評論外掛吧
最近在用 VuePress 寫文件。為了更好地和別人交流，決定加上一個評論外掛。考慮到評論外掛要和 GitHub issues 整合，最後篩選出 Gitman 和 Gitalk. 因為前者年代久遠經久失修，而後者的口碑還不錯，遂選擇了 Gitalk。這裡把搭建 Gitalk 的流程以及坑貼出來。
目前 VuePress 的穩定版是 0.44.x，不過這裡我們直接用 1.0.0-alpha.44，因為穩定版功能實在是太爛了... 關於安裝 Vuepress 及配置這裡不詳細說，具體請看官方文件。
網上有一些教程使用 enhanceApp 建立 Gitalk， 但此方法有 bug，即切換頁面時 Gitalk 不更新，所以我們使用元件註冊的方式。
註冊 OAuth
登入你的 GitHub 並開啟 OAuth Application ，點選右上角的按鈕 New OAuth App 填寫表單。
注意 Application name 一定寫成 gitalk .
Authorization callback URL 一定要填專案實際的 URL（很重要）.
註冊成功後你會得到一個 Client ID 和 Client Secret. 理論上密碼可以暴露出來，因為 Authorization callback URL 唯一指向了你設定的回撥 URL，所以別人拿到了私鑰也不能怎樣。
評論元件
我們回到工程，在 docs/.vuepress 下新建一個資料夾 components ，再在 components 資料夾下建一個 comment 資料夾，然後新建檔案 comment.vue ，並複製下面的程式碼。
<template>
<div class="gitalk-container">
<div id="gitalk-container"></div>
</div>
</template>
<script>
export default {
name: 'comment',
data() {
return {};
},
mounted() {
let body = document.querySelector('.gitalk-container');
let script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
body.appendChild(script);
script.onload = () => {
const commentConfig = {
clientID: 'YOUR_CLINENT_ID',
clientSecret: 'YOUR_CLINENT_SECRET',
repo: '此倉庫的名稱',
owner: '你的 GitHub 使用者名稱，注意是使用者名稱！！！',
// 這裡接受一個數組，可以新增多個管理員
admin: ['你的 GitHub 使用者名稱'],
// id 用於當前頁面的唯一標識，一般來講 pathname 足夠了，
// 但是如果你的 pathname 超過 50 個字元，GitHub 將不會成功建立 issue，此情況可以考慮給每個頁面生成 hash 值的方法.
id: location.pathname,
distractionFreeMode: false,
};
const gitalk = new Gitalk(commentConfig);
gitalk.render('gitalk-container');
};
},
};
</script>
複製程式碼
配置元件
在工程根目錄下新建一個資料夾 builds ，並在裡面新建三個檔案，分別是 findMarkdown.js , addComponents.js 和 delComponents.js .
findMarkdown.js
這個檔案讀取你所有的 Markdown 檔案的內容。
const fs = require('fs')
function findMarkdown(dir, callback) {
fs.readdir(dir, function (err, files) {
if (err) throw err
files.forEach((fileName) => {
let innerDir = `${dir}/${fileName}`
if (fileName.indexOf('.') !== 0) {
fs.stat(innerDir, function (err, stat) {
if (stat.isDirectory()) {
findMarkdown(innerDir, callback)
} else {
callback(innerDir)
}
})
}
})
})
}
module.exports = findMarkdown
複製程式碼
addMarkdown.js
此檔案將 comment 元件註冊到每個 Markdown 檔案的最後。
const fs = require('fs')
const findMarkdown = require('./findMarkdown')
const rootDir = './docs'
findMarkdown(rootDir, writeComponents)
function writeComponents(dir) {
fs.appendFile(dir, `\n \n <comment-comment/> \n `, (err) => {
if (err) throw err
console.log(`add components to ${dir}`)
})
}
複製程式碼
delMarkdown.js
此檔案在編譯後執行，目的是將每個 Markdown 檔案的 comment 元件移除，因為我們只想讓 comment 元件打包到編譯後的檔案中，而非工程檔案。
const fs = require('fs')
const findMarkdown = require('./findMarkdown')
const rootDir = './docs'
findMarkdown(rootDir,delComponents)
function delComponents(dir){
fs.readFile(dir,'utf-8', (err, content) => {
if (err) throw err
fs.writeFile(dir, content.replace(/\n \n <comment-comment\/> \n /g,''), (err) => {
if (err) throw err
console.log(`del components from ${dir}`)
})
})
}
複製程式碼
修改 package.json
因此我們需要修改 build 的執行指令碼。
build: "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js" 複製程式碼
去 GitHub 檢查一下
構建並部署到伺服器上之後，任意開啟一個頁面，Gitalk 會自動將此頁面註冊到 GitHub issues（這也是我們不選擇 Gitman 的原因，Gitman 必須人肉新增）。
