安装
sh
npm i vitepress-plugin-comment-with-giscus
npm i vitepress-plugin-comment-with-giscus
sh
pnpm i vitepress-plugin-comment-with-giscus
pnpm i vitepress-plugin-comment-with-giscus
sh
yarn add vitepress-plugin-comment-with-giscus
yarn add vitepress-plugin-comment-with-giscus
创建 index 文件
在.vitepress/theme
下创建index.js
或者index.ts
文件
配置 index.ts
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
}
)
}
}
// .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 获取参数
拓展使用
如果文章前言添加以下代码,则不会生成评论区
md
---
comment: false
---
---
comment: false
---