配置 Gitalk 评论

Github 注册新的 OAuth 应用

Github OAuth

安装

npm i --save gitalk

使用 markdown

在每个文档末尾插入：

<script setup>
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";
import { onMounted } from 'vue';
onMounted(() => {
  if(typeof window !==undefined){
    var s_div = document.createElement('div'); 
    s_div.setAttribute("id", "gitalk-container");   
    document.querySelector('.content-container').appendChild(s_div);   
    var gitalk = new Gitalk({  
        clientID: '',          // OAuth App的clientID
        clientSecret: '',  // 填写OAuth App的clientSecret
        repo: '',          // 仓库名
        owner: '',   // github用户名
        admin: [''], // github管理者列表
        id: decodeURI(location.pathname), 
        distractionFreeMode: false 
    })
    gitalk.render('gitalk-container')
  }
})
</script>
<div id="gitalk"></div>

使用 typescript

可以在每个文档后自动生成评论区

.vitepress/theme/components/Gitalk.ts

import { defineComponent, onMounted, watch, nextTick } from "vue";
import "gitalk/dist/gitalk.css";
import { useRouter } from "vitepress";
import Gitalk from "gitalk";

const createGitalk = (path: string) => {
  const gitalk = new Gitalk({
    clientID: "",
    clientSecret: "",
    repo: "",
    owner: "",
    admin: [""],
    id: path,
    distractionFreeMode: false,
  });
  gitalk.render("gitalk-container");
};

const GitalkComponent = defineComponent({
  setup() {
    const router = useRouter();

    // 初始化 Gitalk 的函数
    const initGitalk = () => {
      if (typeof window !== "undefined") {
        const container = document.getElementById("gitalk-container");
        if (container) {
          container.innerHTML = "";
          createGitalk(router.route.path);
        }
      }
    };

    onMounted(() => {
      initGitalk();
      watch(
        () => router.route.path,
        () => {
          nextTick(() => {
            initGitalk();
          });
        }
      );
    });
    return () => null;
  },
});

export default GitalkComponent;

.vitepress/theme/index.ts

import DefaultTheme from "vitepress/theme";
import { h } from "vue";
import GitalkComponent from "./components/Gitalk";
import "./custom.css";

export default {
  extends: { ...DefaultTheme },
  Layout() {
    return h(DefaultTheme.Layout, null, {
      "doc-after": () =>
        h("div", { id: "gitalk-container" }, [h(GitalkComponent)]),
    });
  },
  enhanceApp({}) {},
};