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
}

有了这两文件就好了

相关推荐
逛逛GitHub8 小时前
飞书多维表“独立”了!功能强大的超出想象。
人工智能·github·产品
努力的小雨10 小时前
混元开源之力:spring-ai-hunyuan 项目功能升级与实战体验
后端·github
NocoBase10 小时前
GitHub 上 Star 数量前 10 的开源项目管理工具
开源·github·资讯
绝无仅有10 小时前
面试实战总结:数据结构与算法面试常见问题解析
后端·面试·github
绝无仅有10 小时前
Docker 面试常见问题及解答
后端·面试·github
逛逛GitHub1 天前
斩获 2 万多 Star!国外老哥把全网 n8n 工作流都开源了
github·工作流引擎
杨杨杨大侠1 天前
Atlas Mapper 案例 01:初级开发者 - 电商订单系统开发
java·开源·github
绝无仅有1 天前
后端 Go 经典面试常见问题解析与总结
后端·面试·github
绝无仅有1 天前
后端工程师面试常见问题与回答解析总结
后端·面试·github
逛逛GitHub2 天前
发现一个 AI 大模型服务质量榜单。
github