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
}

有了这两文件就好了

相关推荐
赋范大模型技术社区24 分钟前
【LangChain 实战】多智能体协作实现浏览器自动化丨Agents 运行流程丨多工具串&并联调用
架构·github·代码规范
liangdabiao3 小时前
3分钟打造一个无敌的落地页Landing Page - 任何内容都完全自动化
程序员·github
海外空间恒创科技4 小时前
香港站群服务器与普通香港服务器对比
服务器·git·github
JinSo4 小时前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github
寻月隐君5 小时前
【Solana 开发实战】轻松搞定链上 IDL:从上传到获取全解析
后端·web3·github
ai小鬼头15 小时前
Ollama+OpenWeb最新版0.42+0.3.35一键安装教程,轻松搞定AI模型部署
后端·架构·github
李大玄20 小时前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
每天吃饭的羊20 小时前
github上部署自己的静态项目
github
泰勒朗斯21 小时前
如何在新机器上设置github完成内容git push
git·github
qianmoQ21 小时前
GitHub 趋势日报 (2025年07月05日)
github