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