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

深碍√TFBOYSˉ_ 2024-03-30 12:27 56阅读 0赞

#### 我搭建的vitepress ####

[https://zqy233.github.io/formatAndSave/][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  
![在这里插入图片描述][f3c0ff364e4f45548fce260db758fbc8.png]

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

[https_zqy233.github.io_formatAndSave]: https://zqy233.github.io/formatAndSave/
[f3c0ff364e4f45548fce260db758fbc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/02a8a99264694cf8812adb85396e1c63.png