当前位置：首页 > news >正文

VitePress搭建-接入giscus的注意事项。

news 来源：原创 2025/4/24 13:00:48

VitePress搭建-接入giscus的注意事项。

如何创建就不说了。教程很多。

说几个注意项目。

这是App地址，十分有用。
在这里你可以直接获取到你使用的一些参数，以及检查你的仓库可不可用。
仓库要求

是 public的，这个很简单。
安装giscus app 应用。 app安装地址，点进去就行，按步骤操作直接完成就好了。没别的问题。
打开Discussions ， settings 直接下拉，找到Discussions 勾选上。完成。

在使用giscus有几个用户信息需要自己填。好在 App地址有工具。

在repository 输入框输入 {用户名}/{仓库名} 后他会检测仓库要求是否全部达成。
然后就是设置Discussions 的相关设置，其中 Discussion Category 需要自己选的。也就是让你的评论储存在Discussions 的那块地方，有 announcements、General、Ideas，随便选。
选完后，在往下会有这个。

<script src="https://giscus.app/client.js"data-repo="xxx" //后续需要用data-repo-id="xxx" //后续需要用data-category="General"//后续需要用data-category-id="xxx"//后续需要用data-mapping="pathname"data-strict="0"data-reactions-enabled="1"data-emit-metadata="0"data-input-position="bottom"data-theme="preferred_color_scheme"data-lang="zh-CN"crossorigin="anonymous"async>
</script>

有了这些信息就可以在VitePress用了。

在.vitepress 里的theme 文件夹里新建一个myLayout.vue文件。

<script setup lang="ts">
import Giscus from "@giscus/vue";import escookTheme from "@escook/vitepress-theme";
import { watch } from "vue";
import { inBrowser, useData } from "vitepress";const { isDark, page } = useData();const { Layout } = escookTheme;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>
<template><Layout><template #doc-footer-before> </template><template #doc-after><div style="margin-top: 24px"><Giscus id="comments" repo="用户名/仓库名" repoId="仓库Id" category="分类名称"categoryId="分类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>
<style scoped></style>

把之前拿到的repo、repoId、category、categoryId填上去。

escookTheme 是我用的自定义主题，如果不用用DefaultTheme 也就行

import DefaultTheme from "vitepress/theme";
const { Layout } = DefaultTheme;

然后在theme的index 文件引用即可。

import { h } from "vue";
import type { Theme } from "vitepress";import "@escook/vitepress-theme/style.css";
import "./style.css";
import myLayout from "./components/myLayout.vue";import dataShow from "./components/dataShow.vue";export default {Layout: () => {return h(myLayout, null, {});},enhanceApp({ app, router, siteData }) {app.component("dataShow", dataShow);},
} satisfies Theme;