给你的 VuePress 添加 Gitalk 评论插件吧-CSDN博客

最近在用 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 必须人肉添加）。