最近寻找一个vitepess评论插件，发现了一个不错的插件，分享给大家

---

1. 背景

最近寻找一个vitepess评论插件，发现了一个不错的插件，分享给大家

2. vitepress-plugin-comment-with-giscus

一个基于 Giscus 的vitepess评论插件

2.1 安装

npm

npm i vitepress-plugin-comment-with-giscus

yarn

yarn add vitepress-plugin-comment-with-giscus

pnpm

pnpm add vitepress-plugin-comment-with-giscus

2.2 使用

// .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() {
        // Get frontmatter and route
        const { frontmatter } = useData();
        const route = useRoute();
        
        // Obtain configuration from: https://giscus.app/
        giscusTalk({
            repo: 'your github repository', 
            repoId: 'your repository id',   
            category: 'your category', // default: `General` 
            categoryId: 'your category id', 
            mapping: 'pathname', // default: `pathname`
            inputPosition: 'top', // default: `top`
            lang: 'en', // default: `zh-CN`
            lightTheme: 'light', // default: `light`
            darkTheme: 'transparent_dark', // default: `transparent_dark`
            // ...
        }, {
            frontmatter, route
        },
            // Whether to activate the comment area on all pages.
            // The default is true, which means enabled, this parameter can be ignored;
            // If it is false, it means it is not enabled.
            // You can use `comment: true` preface to enable it separately on the page.
            true
        );
    }
};

因为是基于 giscus 的，所以需要去 giscus 创建一个 giscus 应用，获取 repo 和 repoId等参数，

2.3 giscusTalk 参数

giscusTalk的参数获取方法，具体可以参考 giscus 官网

输入的你的GitHub 仓库名，作为你的评论区的唯一标识

启用 giscus里面的参数，输入到 giscusTalk里面即可

扩展使用

在 vitepressmd文件中，可以通过 在frontmatter 配置 comment 来控制单个md文件是否启用评论区

当配置选项默认启用评论区时，添加以下代码，则不会生成评论区

---
comment: false
---

当配置选项默认不启用评论区时，您仍可以通过以下代码在当前页面启用评论区

---
comment: true
---

结尾

愉快的使用评论吧，如果有问题，欢迎留言

参考

• giscus
• vitepress-plugin-comment-with-giscus