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

四、效果

相关推荐
Vicky&James10 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336414 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟22 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386323 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596024 分钟前
前端代理,解决跨域问题讲解
前端
quitv29 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238137 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星39 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端