【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 评论组件,

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

四、效果

相关推荐
逸Y 仙X27 分钟前
Git常见命令--助力开发
java·大数据·git·java-ee·github·idea
CL_IN39 分钟前
企业数据集成:实现高效调拨出库自动化
java·前端·自动化
007_rbq2 小时前
XUnity.AutoTranslator-Gemini——调用Google的Gemini API, 实现Unity游戏中日文文本的自动翻译
人工智能·python·游戏·机器学习·unity·github·机器翻译
浪九天2 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
qianmoQ2 小时前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
椰果uu3 小时前
前端八股万文总结——JS+ES6
前端·javascript·es6
微wx笑3 小时前
chrome扩展程序如何实现国际化
前端·chrome
~废弃回忆 �༄3 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器
CUIYD_19893 小时前
Chrome 浏览器(版本号49之后)‌解决跨域问题
前端·chrome
IT、木易3 小时前
跟着AI学vue第五章
前端·javascript·vue.js