vitepress搭建的博客系统cdn引入github discussions评论系统

news2024/9/19 10:41:18

github仓库必须是公开的。

按照CDN的方式引入

打开discussions模块

在这里插入图片描述

安装giscus app

配置giscus

就是刚安装了giscus app的仓库

页面往下走，生成了代码：

配置vitepress

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

使用web component

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

效果

在这里插入图片描述

有了
在这里插入图片描述

在这里插入图片描述

优化

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

在.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>

在.vitepress目录下的theme目录下的index.js文件配置layout

import DefaultTheme from 'vitepress/theme'
import CommentLayout from './CommentLayout.vue'

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