为你的VuePress博客添加GitTalk评论

怼烎@ 2023-02-12 05:52 59阅读 0赞

## 1. 创建一个 OAuth Apps ##

> 在 Github 设置中找到`Settings / Developer settings / OAuth Apps / new OAuth Apps`, 创建一个应用  
> 创建成功有 Client ID 和 Client Secret ，保存下来，后面我们会用到。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDkzNTU2_size_16_color_FFFFFF_t_70]

## 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",

## 4 效果预览 ##

[我的项目][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDkzNTU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200524213920207.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDkzNTU2,size_16,color_FFFFFF,t_70
[Link 1]: http://ourlang.github.io/