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
}
有了这两文件就好了
