免费的行情网站ifind是做团购的家居网站有哪些
一.添加评论插件
使用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)},}四、效果
