给个人网站集成评论功能

2023-07-02 10:10:50

更新

这篇文章投稿到阮一峰的 weekly 被选上了！！！！访问量暴增

科技爱好者周刊（第 261 期）- 阮一峰的网络日志

正文

我这里选择的是 gitalk 插件，通过文章名来生成一个唯一 id ，用这个在 Github 仓库下开一个 issue ，这个 issue 就成为文章的评论仓库，集成到 vitepress 中，需要动手操作一番，折腾一晚上差不多做好了，踩了一些坑，写在这里帮助后面想为自己的博客集成评论功能的人少走点弯路。

创建 GitHub Application

首先在 github 里创建 Application New OAuth Application，填写就按照图上描述。这里的 Homepage URL 填写自己项目的线上地址。

填写完后点击 Register application，就会进到下面这个页面，点击 Generate a new client secret 创建一个新的 secret，创建完后记得先复制一下，后面再刷新页面就看不到 secret 了。

保存你的 Client ID 和 secret，后面会用到。

再去创建一个新的 github 仓库，用来存储评论。

引入 gitalk

pnpm add -D gitalk

创建文件夹 .vitepress/theme/layout，创建一个新组件，我这里叫 Comment.vue，然后创建一个 Index.vue 组件。

TIP

第10行这里要注意加一个判断，是否在浏览器环境，不然在我们打包的时候找不到 document 会打包失败

<!-- Comment.vue -->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { inBrowser } from 'vitepress'
import Gitalk from 'gitalk'

const commentRef = ref<HTMLElement | null>(null)

const init = () => {
  if (inBrowser) {
    const wrap = document.createElement('div')
    wrap.setAttribute('id', 'gitalk-page-container')
    commentRef.value?.appendChild(wrap) // 把组件加入到想加载的地方 // querySelector的节点可自己根据自己想加载的地方设置
    gitTalk = new Gitalk({
      id: location.pathname, // 可选。默认为 location.href
      owner: 'Richard-Zhang1019', // GitHub repository 所有者
      repo: 'docs-comment', // GitHub repo
      clientID: '74655634d116b2021bd7', // clientID
      clientSecret: 'f173e6706df746b4ba8bbffd3cc817c119f5a844', // clientSecret
      admin: ['Richard-Zhang1019'], // GitHub repo 所有者
      labels: ['GitTalk'], // GitHub issue 标签
      proxy:
        'https://mellifluous-bombolone-049a57.netlify.app/github_access_token',
      createIssueManually: true //如果当前页面没有相应的 issue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
    })
    gitTalk.render('gitalk-page-container')
  }
}

onMounted(() => {
  init()
})
</script>
<template>
  <div class="commentRef"></div>
</template>

完成后在 Index.vue 中引入，通过 Layout 的 插槽 将 Comment 组件注入。

<!-- Index.vue -->
<script setup>
import Theme from 'vitepress/theme'
import Comment from './Comment.vue'

const { Layout } = Theme
</script>
<template>
  <Layout>
    <!-- #doc-after 表示在每篇文章的最后位置添加 Comment组件 -->
    <template #doc-after>
      <Comment />
    </template>
  </Layout>
</template>

进入到 .vitepress/theme/index.ts 文件，引入 gitalk 的 css 样式，把刚才写好的布局引入。

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import LayoutIndex from './layout/Index.vue'

import 'gitalk/dist/gitalk.css'

const theme: Theme = {
  ...DefaultTheme,
  Layout: LayoutIndex
}

export default theme

问题

proxy

如此一来就都可以了，但是会发现还是会失败，发现会有network error的报错，github 获取 token 的接口被墙了，导致无法使用，所以我们这里需要做一个代理，就是上面提到的 proxy 地址。

解决 Gitalk 无法获取 Github Token 问题

这篇文章里讲述了前因后果，感谢这位作者，然后我们可以直接使用博主提供地址，或者将这个 repo 直接 fork 到自己的 github 中，在 vercel 或 netify 上进行部署，将 url 后面加上 /github_access_token 填入到我们上面的 proxy 中，就可以进行使用了。

现在就可以看到实际的效果了

调试

调试的时候发现本地的一些功能是不好使的，点击登录会直接跳到线上的地址，这里要改一下我们前面创建 Github application 时的地址，把下面的这里的 callback url 改成我们本地调试的地址，在调试完后别忘了改回线上的地址

切换路由时内容没有刷新

因为我们这里是通过 vitepress 的 Layout 插槽把 Comment 组件放入到每篇文章的后面，当我们点击其他文章切换路由时，Comment 组件并没有刷新，而是保持着刚才的状态，所以评论里的内容不会更新，还是原来的文章里的内容，只有当我们刷新页面时才会重新加载。

所以我们这里选择一些 歪门邪道 的方法来强制组件刷新，我们来到 Index.vue 文件，为 Comment 组件添加一个 key，通过 watch 来监听路由改变，每当路由切换时让 key++，这样就达到了我们所需要的一个效果。

<!-- Index.vue -->
<script lang="ts" setup>
import Theme from 'vitepress/theme'
import { watch, ref } from 'vue'
import { useRoute } from 'vitepress'

import Comment from './Comment.vue'

const { Layout } = Theme
const route = useRoute()
const num = ref(0)

watch(
  () => route.path,
  () => {
    num.value++
  }
)
</script>
<template>
  <Layout>
    <template #doc-after>
      <Comment :key="num" />
    </template>
  </Layout>
</template>

这样就完成在 vitepress 中集成评论功能了，快动手来试试吧