一.添加评论插件
使用giscus
来做vitepress
的评论模块,使用也非常的简单,具体可以参考:giscus 文档,首先安装giscus
npm i @giscus/vue
二.giscus操作
打开giscus 文档,如下图所示,填入你的 github 用户名 + 仓库名
,勾选你需要的配置

如果显示不成功看是否满足上面三个条件:
1.公开仓库
2.在github安装giscuss app插件

3.打开discussion功能
找到setting

往下翻打开discussion

这样之后就会满足条件,giscus找到下面位置内容,后面要用

三.vitePress配置
在.vitepress/theme/
目录下创建myLayout.vue
组件,添加 giscus 评论组件,
javascript
<!--Layout.vue-->
<template>
<Layout>
<template #doc-footer-before> </template>
<template #doc-after>
<div style="margin-top: 24px">
<Giscus
:key="page.filePath"
repo="*"
repo-id="*"
category="*"
category-id="*"
mapping="pathname"
strict="0"
reactions-enabled="1"
emit-metadata="0"
input-position="bottom"
lang="zh-CN"
crossorigin="anonymous"
:theme="isDark ? 'dark' : 'light'"
/>
</div>
</template>
</Layout>
</template>
<script lang="ts" setup>
import Giscus from "@giscus/vue";
import DefaultTheme from "vitepress/theme";
import { watch } from "vue";
import { inBrowser, useData } from "vitepress";
const { isDark, page } = useData();
const { Layout } = DefaultTheme;
watch(isDark, (dark) => {
if (!inBrowser) return;
const iframe = document
.querySelector("giscus-widget")
?.shadowRoot?.querySelector("iframe");
iframe?.contentWindow?.postMessage(
{ giscus: { setConfig: { theme: dark ? "dark" : "light" } } },
"https://giscus.app"
);
});
</script>
在.vitepress/index.js
配置文件中使用自定义布局。
javascript
import DefaultTheme from 'vitepress/theme'
import Layout from './myLayout.vue'
// import Layout from './Layout.vue'
export default {
Layout,
extends: DefaultTheme,
enhanceApp({ app }) {
//app.component('confetti', confetti)
},
}
四、效果
