给 vitepress 添加评论系统

使用 vitepress 已经快有一年了, 见证了 vitepress 的发展 从最开始的 alpha 到 beta ,到目前的 rc 版本, vitepress 的发展越来越快。

我理解 vitepress 是一个静态的博客系统, 但有时候还是希望能有个评论系统,有读者能够参与到我的博客中,给出一些意见和建议。

最近在看阮老师的 ts 教程, 发现他教程站提供了一个评论系统, 可以在博客中添加评论。这个评论系统的好处是 不需要自己部署额外的服务, 简单,轻松。

这就是大名鼎鼎的 disqus 评论系统, 今天我也给自己的博客上线了, 记录一下上线过程。

注册 disqus 账号

这一步没什么难度, https://disqus.com/ 在这里注册一个账号。

配置评论系统

这一步也不难, 访问 https://disqus.com/admin/create/ 按照下图所示进行基本配置

访问 https://你填写的域名.disqus.com/admin/settings/install/ 准备在网站安装 disqus

虽然 disqus 支持了众多博客框架系统, 但目前 vitepress 还是没有被支持, 我们只能选择通用代码,来添加到 vitepress 中。

下面这段代码就是我们需要的:

观察代码,这里通过原生 JS 获取了 document ,并试图创建 script 标签。Vitepress 是基于 Vue3 来构建的, 所以我们可以通过 Vue3 的 API 来操作 DOM。

而且,由于我们已经有了很多篇文章, 我们不可能在每一篇文章下面去添加 disqus 的代码,所以我们需要通过 Loyout 的插槽来解决这个问题

具体的流程是:

1. 创建docs/components/Discussion.vue

   <script setup>
     import { onMounted, onBeforeUnmount } from 'vue'
   
     const ID = '_disqus_js'
   
     onMounted(() => {
       const s = document.createElement('script')
       s.id = ID
       s.src = 'https://你的域名.disqus.com/embed.js'
       s.setAttribute('data-timestamp', +new Date())
       document.body.appendChild(s)
     })
   
     onBeforeUnmount(() => {
       document.getElementById(ID)?.remove()
     })
   </script>
   
   <template>
     <div id="disqus_thread" />
   </template>

2. 创建docs/.vitepress/theme/Layout.vue

   <script setup>
     import DefaultTheme from 'vitepress/theme'
     import Discussion from '../../components/Discussion.vue'
   </script>
   
   <template>
     <DefaultTheme.Layout>
       <template #doc-after>
         <Discussion />
       </template>
     </DefaultTheme.Layout>
   </template>

   

   官网链接: Loyout 的插槽

3. 修改(如果没有就创建)docs/.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import Layout from './Layout.vue'

export default {
  extends: DefaultTheme,
  Layout,
}

检查配置是否生效

在开发模式下预览你的博客,此时应该是可以在博客下看到 disqus 的评论系统,但是要注意,需要你有科学上网的环境,毕竟这个系统是老外的项目。

附图:

然后打包可能会提示 chunks 超过 500kb 的问题,我专门查看了自己的博客,并没有发现有超过 chunks 超过 500kb 的问题。所以这个问题我打算无视了。

最后的注意

disqus 提供了夜间模式,根据文档描述,他们通过对文字颜色的灰度来判断是否开启夜间模式,但是这个在 vitepress 中表现的不是很好, 所以我推荐配合 dark reader 插件来实现夜间模式。