VitePress 添加 Giscus 评论：安装与主题配置

Giscus 使用 GitHub Discussions 为静态站点提供评论。本文以 vitepress-plugin-comment-with-giscus 为例，说明依赖安装、主题入口配置、参数获取和单页禁用方法。

安装评论插件

npm

npm i vitepress-plugin-comment-with-giscus

pnpm

pnpm i vitepress-plugin-comment-with-giscus

yarn

yarn add vitepress-plugin-comment-with-giscus

创建 VitePress 主题入口文件

在.vitepress/theme 下创建index.js 或者index.ts文件

在 index.ts 中配置 Giscus

giscus.ts

// .vitepress/theme/index.js
import { useData, useRoute } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import giscusTalk from 'vitepress-plugin-comment-with-giscus'

export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    DefaultTheme.enhanceApp(ctx)
    // ...
  },
  setup() {
    // 获取前言和路由
    const { frontmatter } = useData()
    const route = useRoute()

    // 评论组件 - https://giscus.app/
    giscusTalk(
      {
        repo: 'xxxxxx/xxxxxx', //仓库地址
        repoId: 'xxxxxx', //仓库ID
        category: 'General', // 默认: `General`
        categoryId: 'xxxxxx', //分类ID
        mapping: 'title', // 默认: `pathname`
        strict: '0',
        reactionsEnabled: '0',
        emitMetadata: '0',
        inputPosition: 'top', // 默认: `top`
        lang: 'zh-CN' // 默认: `zh-CN`
      },
      {
        frontmatter,
        route
      }
    )
  }
}

获取 Giscus 参数

giscus 配置获取

为指定页面关闭评论

如果文章前言添加以下代码，则不会生成评论区

---
comment: false
---