0
点赞
收藏
分享

微信扫一扫

云原生巡检监控报告

才德的女子 2024-06-23 阅读 39
github

按照CDN的方式引入

打开discussions模块

在这里插入图片描述

安装giscus app

在这里插入图片描述
在这里插入图片描述

配置giscus

就是刚安装了giscus app的仓库
在这里插入图片描述
页面往下走,生成了代码:
在这里插入图片描述

配置vitepress

采用了CDN的方式引入
在这里插入图片描述

使用web component

随便找个地方试试组件
在这里插入图片描述

效果

在这里插入图片描述

在这里插入图片描述

有了
在这里插入图片描述

在这里插入图片描述

优化

那么多页面,一个一个的添加评论组件不现实。封装个评论组件覆盖原来的vitepress layout

  1. 在.vitepress目录下的theme目录下创建组件
<!-- Layout.vue -->
<template>
  <Layout>
    <template #doc-after>
      <giscus-widget
        id="comments"
        repo="chergn/questions"
        repoid=""
        category="Announcements"
        categoryid=""
        mapping="title"
        term="Welcome to giscus!"
        reactionsenabled="1"
        emitmetadata="0"
        inputposition="top"
        theme="light"
        lang="en"
        loading="lazy"
      ></giscus-widget>
    </template>
  </Layout>
</template>

<script lang="ts" setup>
import DefaultTheme from "vitepress/theme";
const { Layout } = DefaultTheme;
</script>
  1. 在.vitepress目录下的theme目录下的index.js文件配置layout
import DefaultTheme from 'vitepress/theme'
import CommentLayout from './CommentLayout.vue'

export default {
  extends: DefaultTheme,
  // 使用注入插槽的包装组件覆盖 Layout
  Layout: CommentLayout
}

在这里插入图片描述

有了这两文件就好了
在这里插入图片描述

举报

相关推荐

0 条评论