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 小时前
革新Web部署:Amazon Amplify Hosting!
后端·面试·github
掘金安东尼1 小时前
把复杂留给架构,把简单留给开发 —— Amazon Aurora DSQL 宣布:全面可用
面试·架构·github
掘金安东尼2 小时前
蔚来 600 亿研发成本,信还是不信。。
面试·程序员·github
喜欢吃豆2 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
赋范大模型技术社区3 小时前
【LangChain 实战】多智能体协作实现浏览器自动化丨Agents 运行流程丨多工具串&并联调用
架构·github·代码规范
liangdabiao6 小时前
3分钟打造一个无敌的落地页Landing Page - 任何内容都完全自动化
程序员·github
海外空间恒创科技7 小时前
香港站群服务器与普通香港服务器对比
服务器·git·github
JinSo7 小时前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github
寻月隐君8 小时前
【Solana 开发实战】轻松搞定链上 IDL:从上传到获取全解析
后端·web3·github
ai小鬼头18 小时前
Ollama+OpenWeb最新版0.42+0.3.35一键安装教程,轻松搞定AI模型部署
后端·架构·github