安装

npm

npm i vitepress-plugin-comment-with-giscus

pnpm

pnpm i vitepress-plugin-comment-with-giscus

yarn

yarn add vitepress-plugin-comment-with-giscus

创建 index 文件

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

配置 index.ts

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import giscusTalk from 'vitepress-plugin-comment-with-giscus'
import { useData, useRoute } from 'vitepress'
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
---