添加 Gitalk 添加评论功能

注册 GitHub Application

1、首先，你需要在 github 上注册一个 GitHub Application ，填写参考如下：

提示

• Application name 填写你的应用名称，例如：docsify

• Homepage URL 填写你的网站地址，例如：https://docsify.js.org

• Authorization callback URL 填写你的网站地址，例如：https://docsify.js.org

2、创建一个 Client secret 来验证作为 API 的应用程序

注意

创建后先复制新创建的 Client secret，刷新页面就看不到了

找到 Client ID 和 Client secret 保存下来，后面会用到。

配置 Gitalk

1、安装 gitalk 插件

pnpm add -D gitalk

2、在 docs/.vitepress/theme 目录下创建 index.ts 文件，替换默认的 layout 组件

import DefaultTheme from 'vitepress/theme'
import Layout from './components/Layout.vue'

export default {
  extends: DefaultTheme,
  Layout
}

3、在 docs/.vitepress/components 目录下创建 Layout.vue 文件，添加 gitalk 评论组件

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'

import Gitalk from './Gitalk.vue'
</script>

<template>
  <!-- eslint-disable-next-line vue/component-name-in-template-casing -->
  <DefaultTheme.Layout>
    <template #doc-after>
      <Gitalk />
    </template>
  </DefaultTheme.Layout>
</template>

4、在 docs/.vitepress/components 目录下创建 Gitalk.vue 文件，添加 gitalk 评论组件

<script lang="ts" setup>
import Gitalk from 'gitalk'
import { useRoute } from 'vitepress'
import 'gitalk/dist/gitalk.css'

const route = useRoute()

function initGitalk() {
  // 切换页面时，刷新评论组件
  const gitTalk = new Gitalk({
    // 客户端 ID
    clientID: 'xxx',
    // 客户端密钥
    clientSecret: 'xxx',
    // 存储评论的仓库
    repo: 'mhaibaraai.github.io',
    // 仓库的拥有者
    owner: 'mhaibaraai',
    // 存储评论的仓库的管理员
    admin: ['mhaibaraai'],
    // 每个页面的唯一标识
    id: route.path,
    // 是否开启专注模式
    distractionFreeMode: false,
    // 是否手动创建 issue
    createIssueManually: true,
  })

  gitTalk.render('gitalk-container')
}

onMounted(() => {
  initGitalk()
})

watch(
  () => route.path,
  initGitalk,
)
</script>

<template>
  <div id="gitalk-container" />
</template>

提示

本地调试时，可以先把 Authorization callback URL 改为本地调试地址，例如: http://localhost:3000

错误：未找到相关的 Issues 进行评论？

先登录 GitHub，然后在 GitHub 仓库的 Issues 里面创建一个新的 Issue，然后刷新页面就可以看到评论了。

发现评论重复？

尝试在 Gitalk 组件上添加 :key="Date.now()" 属性，强制刷新组件。

<Gitalk :key="Date.now()" />