为你的VuePress博客添加GitTalk评论

2019 年 11 月 5 日
筆記

背景

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

实现之路

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 <comment/> 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 <comment/> 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!