vitepress配置评论(gitalk)

1,014 阅读2分钟

因为VitePress没有像VuePress那样的可以直接安装配置的评论插件,所以就需要自己动手,这里使用gitalk作为插件使用。

创建GitHub Application

使用gitalk之前,得先创建GitHub Application,为了后续提供给gitalk的两个数据, Client IDClient secrets,如下图

本地调试的时候,修改callback url为本地服务的链接

安装

两种方式

直接引入

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

  <!-- or -->

  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

npm 安装

npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

第一种方式在vitepress中不是太好使,使用第二种方式,在需要使用的地方导入即可,一般是自定义的首页组件里面,和所有的文章下面

使用

想要在所有文章下面使用,又不想每个文章里面都写一遍咋办?这里就需要我们去改一下vitepress的配置,自定义一下文章页面的主题。

.vitepress下面新建一个theme的文件夹,创建两个文件index.jsMyLayout.vue,这个layout文件就是我们包装每个文章页面的根组件,

导入之前安装的gitalk

<!--.vitepress/theme/MyLayout.vue-->
<script setup>
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
</script>

生成gitalk插件
需要注意的是,vitepress在编译的时候无法使用window(不知道说的对不对),而gitalk是依赖window.document去加载节点的, 而且在setup中可能还获取不到需要挂载的节点,所以得在onMounted以后去处理,然后判断window是否可用。

<script setup>
import { onMounted } from 'vue'
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

onMounted(() => {
  if(typeof window !==undefined){
    var s_div = document.createElement('div');   // 创建节点
    s_div.setAttribute("id", "gitalk-page-container");   // 设置id
    document.querySelector('.content-container').appendChild(s_div);   // querySelector的节点可自己根据自己想加载的地方设置
    var gitment = new Gitalk({
      id: location.pathname, // 可选。默认为 location.href
      owner: 'Younglina', // GitHub repository 所有者
      repo: 'Younglina.github.io', // GitHub repository
      clientID: '******', // 自己的clientID
      clientSecret: '******',// 自己的clientSecret
      admin: ['Younglina'], // GitHub repository 所有者
      labels: ['Gitalk'], // GitHub issue 的标签
      createIssueManually: true, //如果当前页面没有相应的 isssue 且登录的用户属于 admin,则会自动创建 issue。如果设置为 true,则显示一个初始化页面,创建 issue 需要点击 init 按钮。
    })
    gitment.render('gitalk-page-container')
  }
})
</script>

按理说在完成上述操作以后,gitalk就能正常使用了,但是发现github获取token的接口被墙了,导致出现network error而无法使用

去gitalk的git上一看,很多人都有这样的问题,随后在网上一番搜索,找到了一个亲测有效的方法

参考文章,就是需要我们自己去搭一个nodejs的服务进行代理,不愿看的或者没有域名的同学们,可以直接使用我按照文章方法设置的。

在gitalk的配置中加入下面一句即可

proxy: "https://vercel.younglina.top/github_access_token",

成功以后的效果