爲你的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 <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!

更多推薦

前端進階小書（advanced_front_end）

前端每日一題（daily-question）

webpack4 搭建 Vue 應用（createVue）

Canvas 進階（一）二維碼的生成與掃碼識別

Canvas 進階（二）寫一個生成帶logo的二維碼npm插件

Canvas 進階（三）ts + canvas 重寫」辨色「小遊戲

Canvas 進階（四）實現一個「刮刮樂」遊戲

VUI建立日誌(一)——圖片懶加載指令的實現

VUI建立日誌(二)——防抖節流組件的實現