【vitePress】基于github快速添加评论功能（giscus）

一.添加评论插件

使用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 评论组件，

<!--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配置文件中使用自定义布局。

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)},}

四、效果