給你的 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 必須人肉添加）。