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

github仓库必须是公开的。

按照CDN的方式引入

打开discussions模块

在这里插入图片描述

安装giscus app

配置giscus

就是刚安装了giscus app的仓库

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

配置vitepress

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

使用web component

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

效果

在这里插入图片描述

有了
在这里插入图片描述

在这里插入图片描述

优化

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

在.vitepress目录下的theme目录下创建组件

<!-- Layout.vue -->
<template><Layout><template #doc-after><giscus-widgetid="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,// 使用注入插槽的包装组件覆盖 LayoutLayout: CommentLayout
}