vitepress如何集成gitalk评论系统、修复黑色模式下字体白色的问题

我搭建的vitepress

https://zqy233.github.io/formatAndSave/
该示例集成了gitalk评论系统，还是挺好用的
接下来教大家如何集成

1.首先获取clientID和clientSecret

在github官网右上角/Settings/Developer settings/OAuth Apps中创建应用
第一个应用名随意，两个URL设置成网站网址，比如我使用的github pages，填的就是https://zqy233.github.io/formatAndSave/
创建成功后获取clientID和clientSecret

2..vitepress目录下新建components\git-talk.vue

npm i -s md5 gitalk

默认gitalk存在黑色模式下字体白色，背景色也是白色，导致看不见字体，所以样式里设置一下

<template>
  <div class="gitalk-container">
    <div id="gitalk-container"></div>
  </div>
</template>
<script>
import md5 from "md5"
import Gitalk from "gitalk"
import "gitalk/dist/gitalk.css"
export default {
  name: "git-talk",
  data() {
    return {}
  },
  mounted() {
    const commentConfig = {
      clientID: "",
      clientSecret: "",
      repo: "你的仓库名",
      owner: "你的账户名",
      admin: ["你的账户名"],
      id: md5(location.pathname),
      distractionFreeMode: false,
    }
    const gitalk = new Gitalk(commentConfig)
    gitalk.render("gitalk-container")
  },
}
</script>
<style>
.gt-container .gt-header-textarea {
  color: #000;
}
</style>

3..vitepress/theme/index.ts注册全局组件

import Theme from "vitepress/theme"

import "../style/vars.css"
// @ts-ignore
import comment from "../components/git-talk.vue"
export default {
  ...Theme,
  enhanceApp(ctx) {
    Theme.enhanceApp(ctx)
    ctx.app.component("git-talk", comment)
  },
}

4.在需要的文档底部加入<git-talk/>组件即可，打包vitepress发布到github即可，还有问题可以参考我的vitepress