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

四、效果