1. Create OAuth Apps

> Github Settings > Settings/Developer Settings/OAuth Apps/new OAuth Apps Save it and we’ll use it later.

2 Create a comment component

Vuepress components in the. Vuepress/Components folder are registered globally by default, so we create a comment component called gittalk. CSS as follows

<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 clientID'.clientSecret: 'your clientSecret'.repo: 'Name of your warehouse'.owner: 'Your username'.// This accepts an array where you can add multiple administrators, including yourself
        admin: ['Admin User name'].// id is the unique identifier for the current page. Generally speaking, pathName is sufficient,
        // However, GitHub will not successfully create an issue if your pathname is more than 50 characters long, in which case consider generating hash values for each page.
        id: location.pathname,
        distractionFreeMode: false};const gitalk = new Gitalk(commentConfig);
      gitalk.render('gitalk-container'); }; }};</script>
<style>
@import '.. /css/gittalk.css';
</style>
Copy the code

3. Use a comment component

In theory, we could add this component directly to each Markdown file, but adding it each time is a bit cumbersome, 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}`); }); }}Copy the code
// 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}`); }); }); }Copy the code
// 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 {
                        // Skip the readme file, although you can modify it yourself
                        if (/\.md$/.test(fileName) && !/README/.test(fileName)) callback(innerDir); }}); }}); }); }module.exports = findMarkdown;
Copy the code

Modify package.json scripts by adding components for each MD file, then packaging, and finally removing the comment component in markdown one by one

"build": "node ./builds/addComponents.js && vuepress build docs && node ./builds/delComponents.js".Copy the code

4 Effect Preview

My project