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

github仓库必须是公开的

按照CDN的方式引入

打开discussions模块

安装giscus app


配置giscus

就是刚安装了giscus app的仓库

页面往下走,生成了代码:

配置vitepress

采用了CDN的方式引入

使用web component

随便找个地方试试组件

效果

有了

优化

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

  1. 在.vitepress目录下的theme目录下创建组件
html 复制代码
<!-- 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
javascript 复制代码
import DefaultTheme from 'vitepress/theme'
import CommentLayout from './CommentLayout.vue'

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

有了这两文件就好了

相关推荐
大写-凌祁1 小时前
零基础入门深度学习:从理论到实战,GitHub+开源资源全指南(2025最新版)
人工智能·深度学习·开源·github
悟乙己1 小时前
Github | MoneyPrinterTurbo:自动化视频内容生成系统
自动化·github·音视频
雁于飞3 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
icebreaker7 小时前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
Giant1009 小时前
小白也能看懂的 Git 命令手册:从配置到提交,一步到位
github
ruanCat13 小时前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
FreeBuf_14 小时前
Salesloft Drift网络攻击事件溯源:GitHub账户失陷与OAuth令牌窃取
安全·github
第七种黄昏14 小时前
GitHub 项目提交完整流程(含常见问题与解决办法)
github
确定过眼神!15 小时前
GitHub提交到公共项目流程
github·changeset
掘我的金15 小时前
mpc4j 在 macOS M3(Apple Silicon)上的部署实录:JDK 21(Preview)与 FourQ 缺失排错
github