为你的VuePress博客添加GitTalk评论

背景

突发奇想，想让自己的《前端进阶小书》拥有评论功能，于是开始了探索之路

实现之路

1. 创建一个 OAuth Apps

在 Github 设置中找到 Settings / Developer settings / OAuth Apps / new OAuth Apps, 创建一个应用

创建成功有 Client ID 和 Client Secret ，保存下来，后面我们会用到。

2. 创建评论组件

Vuepress 默认 .vuepress / components 文件夹下的组件会全局注册, 因此我们创建一个 comment 组件

gittalk.css 请点击这里

<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: '你的clientID',
        clientSecret: '你的clientSecret',
        repo: '你的仓库名称',
        owner: '你的用户名',
        // 这里接受一个数组，可以添加多个管理员，可以是你自己
        admin: ['管理用户名'],
        // id 用于当前页面的唯一标识，一般来讲 pathname 足够了，
        // 但是如果你的 pathname 超过 50 个字符，GitHub 将不会成功创建 issue，此情况可以考虑给每个页面生成 hash 值的方法.
        id: location.pathname,
        distractionFreeMode: false,
      };
      const gitalk = new Gitalk(commentConfig);
      gitalk.render('gitalk-container');
    };
  },
};
script>
<style>
@import '../css/gittalk.css';
style>
 
复制代码

3. 使用评论组件

理论上，我们在每个 markdown 文件里直接加入这个组件即可，但是每次都添加有点麻烦，还是让 node 来帮我们吧

根目录创建 build 文件夹, 创建三个文件 addComponents.js, delComponents.js, findMarkdown.js, 分别代码如下：

// addComponents.js
const fs = require("fs");
const findMarkdown = require("./findMarkdown");
const rootDir = "./docs";

findMarkdown(rootDir, writeComponents);

function writeComponents(dir) {
    if (!/README/.test(dir)) {
        fs.appendFile(dir, `n n  n `, err => {
            if (err) throw err;
            console.log(`add components to ${dir}`);
        });
    }
}
复制代码

// delComponents.js
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  n /g, ""),
            err => {
                if (err) throw err;
                console.log(`del components from ${dir}`);
            }
        );
    });
}
复制代码

// findMarkdown.js
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 {
                        // 跳过readme 文件，当然你也可以自行修改
                        if (/.md$/.test(fileName) && !/README/.test(fileName))
                            callback(innerDir);
                    }
                });
            }
        });
    });
}
module.exports = findMarkdown;
复制代码

修改 package.json 的 scripts, 先为每个 md 文件添加组件，然后打包，最后再一一删除 markdown 中的 comment 组件

"build": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js",

OK，大功告成，将你的项目推上 github 试试看吧

效果可以看我的项目《前端进阶小书》查看。 That is all!