---
url: https://eoht.net/notes/vitepress/giscu.md
description: >-
  本文介绍如何在 VitePress 主题中安装并配置 vitepress-plugin-comment-with-giscus，创建
  .vitepress/theme/index.ts、获取 Giscus 参数，并通过 comment: false 为指定页面关闭评论区。
---

# VitePress 添加 Giscus 评论：安装与主题配置 {#add-giscus-comments-to-vitepress}

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

## 安装评论插件 {#install-giscus-plugin}

::: code-group

```sh [npm]
npm i vitepress-plugin-comment-with-giscus
```

```sh [pnpm]
pnpm i vitepress-plugin-comment-with-giscus
```

```sh [yarn]
yarn add vitepress-plugin-comment-with-giscus
```

:::

## 创建 VitePress 主题入口文件 {#create-vitepress-theme-entry}

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

## 在 index.ts 中配置 Giscus {#configure-giscus-in-theme}

```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 参数 {#get-giscus-parameters}

[giscus 配置获取](https://giscus.app/zh-CN)

## 为指定页面关闭评论 {#disable-comments-on-selected-pages}

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

```md
---
comment: false
---
```