EN | 中文文档
vitepress
comment section plugin based ongiscus
// npm
npm i vitepress-plugin-comment-with-giscus
// yarn
yarn add vitepress-plugin-comment-with-giscus
// .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
);
}
};
For the parameter acquisition method of giscus
, please refer to:giscus configuration
When the configuration option enables the comment area by default, add the following code, the comment area will not be generated
---
comment: false
---
When the configuration options do not enable the comment area by default, you can still enable the comment area on the current page through the following code
---
comment: true
---
You may be interested in these plugins: Click me to view more vitepress plugins