本项目clone自vitepress-blog-pure项目，他这个的评论有不少问题，比如评论框无法置于顶部。所以我就改了下，使用 giscus 。

原来的评论要在每个MD文档里写入< Comment / >，现在修改成没有申明时就自动加载。

在你的 index.ts 文件中，你已经定义了一个自定义主题，并且注册了一些全局组件。为了在你的 VitePress 主题中集成 Giscus 评论系统，你需要进行以下修改：

1. 安装 Giscus 插件

确保你已经安装了 vitepress-plugin-comment-with-giscus 插件：

npm install vitepress-plugin-comment-with-giscus

或者使用 yarn：

yarn add vitepress-plugin-comment-with-giscus

2. 修改 index.ts

在你的 index.ts 文件中，你需要引入 Giscus 插件，并在 setup 函数中进行配置。以下是修改后的代码：

import { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import NewLayout from './components/NewLayout.vue'
import Archives from './components/Archives.vue'
import Category from './components/Category.vue'
import Tags from './components/Tags.vue'
import Page from './components/Page.vue'
import Comment from './components/CommentGiscus.vue' //引入新定义的评论组件
import { App } from 'vue' // 引入 Vue 的 App 类型

import './custom.css'

export default {
    ...DefaultTheme,
    Layout: NewLayout,
    enhanceApp({ app }: { app: App }) {
        // 全局注册后，在Vue里就能直接使用了
        app.component('Tags', Tags)
        app.component('Category', Category)
        app.component('Archives', Archives)
        app.component('Page', Page)
        app.component('Comment', Comment)
    }
} satisfies Theme

3. 在布局文件中添加评论组件

确保在你的 NewLayout.vue 文件中，你已经正确地引入并使用了 Comment 组件。例如：

<template>
    <Layout>
        <template #doc-before>
            <div style="padding-top: 20px" class="post-info" v-if="!$frontmatter.page">
                {{ $frontmatter.date?.substring(0, 10) }} &nbsp;&nbsp;
                <span v-for="item in $frontmatter.tags"
                    ><a :href="withBase(`/pages/tags.html?tag=${item}`)"> {{ item }}</a></span
                >
            </div>
        </template>
        <!--新增加的评论-->
        <template #doc-bottom>
            <Comment />
        </template>
    </Layout>
    <Copyright />
</template>
<script setup>
import DefaultTheme from 'vitepress/theme'
import Copyright from './Copyright.vue'
import { withBase } from 'vitepress'
const { Layout } = DefaultTheme
</script>

4. 增加加评论组件CommentGiscus.vue

在./vitepress/theme/components/ 目录下增加文件 CommentGiscus.vue，并添加如下内容：

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

  <script setup>
  import giscusTalk from 'vitepress-plugin-comment-with-giscus'
  import { useData, useRoute } from 'vitepress'

  const { frontmatter } = useData()
  const route = useRoute()

  giscusTalk(
    {
      repo: 'your-username/your-repo-name', // 仓库名称
      repoId: 'your-repo-id', // 仓库 ID
      category: 'General', // 讨论分类名称
      categoryId: 'your-category-id', // 讨论分类 ID
      mapping: 'pathname',
      inputPosition: 'top',
      lang: 'en',
      lightTheme: 'light',
      darkTheme: 'transparent_dark'
    },
    {
      frontmatter,
      route
    },
    true
  )
  </script>

5. 验证和优化

• 在 VitePress 项目中运行 npm run dev 或 yarn dev，查看评论功能是否正常显示。
• 如果需要在特定页面禁用评论，可以在页面的 Frontmatter 中添加：

  ---
  comment: false
  ---

注意事项

• 确保将 your-username/your-repo-name、your-repo-id、your-category-id 替换为你的实际 Giscus 配置信息。
• 如果你使用了其他主题或插件（如 vitepress-theme-website），确保它们与 Giscus 插件兼容。
• 参考文档：https://vitepress.yiov.top/plugin.html

通过以上步骤，你就可以在你的 VitePress 主题中成功集成 Giscus 评论系统。