当前位置: 首页 > news >正文

在vue中嵌入vitepress,基于markdown文件生成静态网页从而嵌入社团周报系统的一些想法和思路

什么是vitepress

vitepress是一种将markdown文件渲染成静态网页的技术


 

其使用仅需几行命令即可

//在根目录安装vitepress
npm add -D vitepress
//初始化vitepress,添加相关配置文件,选择主题,描述,框架等
npx vitepress init
//然后就生成了示例静态站点

更多路由部署相关知识参看官方中文文档vitepress
 

前端部分

使用iframe作为静态站点容器,当社员上传markdown文件时,文件会传输至后端,后端返回一串地址,该地址是该markdown文件生成的静态站点,静态站点服务器运行于公网或内网服务器中,

然后前端将该串url地址放于iframe的src属性中,因此,静态站点位于该iframe中

后端部分

接收前端传来的markdown文件后,生成markdown文件并写入到前端文件夹的docs的目录中,生成的markdown文件命名采用唯一制,比如UUID,将markdown文件插入目录后,返回一串可访问的url给前端(根据vitepress路由可得),然后执行脚本文件,重新进行vitepress渲染

脚本文件的内容大概为执行npm run docs:dev重新构建命令,将新增的md文件添加入静态网站

然后可以根据vitepress路由规则,访问新的静态站点

所以,在服务器中,会有一个端口运行vitepress,该端口下有着多个md静态网站,通过路由规则可访问

vitepress路由规则

嵌入结果如下

另一种想法:

借鉴csdn,我们知道,csdn也是基于md的博客网站,在访问一篇博客后,显示的博客界面就是以md形式展示的,于是可以查看csdn是怎么样渲染md文件的

在某一个get请求中,其返回的数据是一个html文件

但是其html的展示是几乎没有样式的

看到这个html,和vitepress打包生成的html文件几乎一样

下面为本地使用vitepress将md文件打包后生成的html文件(打包后的html文件需有服务器启动端口服务才会展示原来md样式)

csdn这种返回html文件的渲染方法也是一种可行性,具体实现目前还未去思考

静态网站托管之gitpage

在了解该项目时了解到了gitpage静态网站部署,于是自己动手尝试了一下

首先,你得有一个github账号(gitee的gitpage服务现在停了)

然后新建一个仓库,仓库名必须为账号名.github.io

新建好仓库后,点击 uploading an existing file上传网站文件,注意根目录一定是index.html所在地

之后访问仓库名就可以访问网站了

相关文章:

在vue中嵌入vitepress,基于markdown文件生成静态网页从而嵌入社团周报系统的一些想法和思路

什么是vitepress vitepress是一种将markdown文件渲染成静态网页的技术 其使用仅需几行命令即可 //在根目录安装vitepress npm add -D vitepress //初始化vitepress,添加相关配置文件,选择主题,描述,框架等 npx vitepress init //…...

神经网络面试题目

1. 批规范化(Batch Normalization)的好处都有啥?、 A. 让每一层的输入的范围都大致固定 B. 它将权重的归一化平均值和标准差 C. 它是一种非常有效的反向传播(BP)方法 D. 这些均不是 正确答案是:A 解析: ‌‌‌‌  batch normalization 就…...

C语言题目之单身狗2

文章目录 一、题目二、思路三、代码实现 提示:以下是本篇文章正文内容,下面案例可供参考 一、题目 二、思路 第一步 在c语言题目之打印单身狗我们已经讲解了在一组数据中出现一个单身狗的情况,而本道题是出现两个单身狗的情况。根据一个数…...

Vue2学习笔记(03关于VueComponent)

1.school组件本质是一个名为Vuecomponent的构造函数&#xff0c;且不是程序员定义的&#xff0c;是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>&#xff0c;Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new Vuecompo…...

微服务架构中常用技术框架

认证授权 Spring Security OAuth 2.0 JWT Keycloak Istio Apache Shiro 日志监控 ELK Prometheus Grafana Fluentd CI/CD Jenkins GitLab CI CircleCI ArgoCD 服务通信 gRPC REST API Apache Thrift Apache Avro Apache Dubbo OpenFegin 断路器 Hystr…...

[深度学习]Pytorch框架

1 深度学习简介 应用领域:语音交互、文本处理、计算机视觉、深度学习、人机交互、知识图谱、分析处理、问题求解2 发展历史 1956年人工智能元年2016年国内开始关注深度学习2017年出现Transformer框架2018年Bert和GPT出现2022年,chatGPT出现,进入AIGC发展阶段3 PyTorch框架简…...

华为HarmonyOS灵活高效的消息推送服务(Push Kit) - 5 发送通知消息

场景介绍 通知消息通过Push Kit通道直接下发&#xff0c;可在终端设备的通知中心、锁屏、横幅等展示&#xff0c;用户点击后拉起应用。您可以通过设置通知消息样式来吸引用户。 开通权益 Push Kit根据消息内容&#xff0c;将通知消息分类为服务与通讯、资讯营销两大类别&…...

[Meachines] [Medium] Querier XLSM宏+MSSQL NTLM哈希窃取(xp_dirtree)+GPP凭据泄露

信息收集 IP AddressOpening Ports10.10.10.125TCP:135, 139, 445, 1433, 5985, 47001, 49664, 49665, 49666, 49667, 49668, 49669, 49670, 49671 $ nmap -p- 10.10.10.125 --min-rate 1000 -sC -sV -Pn PORT STATE SERVICE VERSION 135/tcp open msrp…...

新版ssh客户端无法连接旧版服务器sshd的方法

新安装完的windows 版本&#xff0c;连Linux服务器直接报错 C:\Users\wang>ssh root192.168.110.50 Unable to negotiate with 192.168.110.50 port 22: no matching key exchange method found. Their offer: diffie-hellman-group14-sha1,diffie-hellman-group1-sha1,kex…...

MyBatis操作数据库-XML实现

目录 1.MyBatis的简单介绍 2.MyBatis操作数据库的步骤 2.1 添加依赖 2.2 配置文件 2.3 写持久层代码 2.4 方法测试 3.MyBatis操作数据库(增删查改) 3.1 CRUD标签 3.2 参数传递 3.3 Insert-新增 3.4 Delete-删除 3.5 Update-修改 3.6 Select-查询(映射问题) 1.MyB…...

华为HarmonyOS地图服务 5 - 利用UI控件和手势进行地图交互

场景介绍 本章节将向您介绍如何使用地图的手势。 Map Kit提供了多种手势供用户与地图之间进行交互&#xff0c;如缩放、滚动、旋转和倾斜。这些手势默认开启&#xff0c;如果想要关闭某些手势&#xff0c;可以通过MapComponentController类提供的接口来控制手势的开关。 接口…...

解决DockerDesktop启动redis后采用PowerShell终端操作

如图&#xff1a; 在启动redis容器后&#xff0c;会计入以下界面 &#xff1a; 在进入执行界面后如图&#xff1a; 是否会觉得界面过于单调&#xff0c;于是想到使用PowerShell来操作。 步骤如下&#xff1a; 这样就能使用PowerShell愉快地敲命令了&#xff08;颜值是第一生…...

react + antDesign封装图片预览组件(支持多张图片)

需求场景&#xff1a;最近在开发后台系统时经常遇到图片预览问题&#xff0c;如果一个一个的引用antDesign的图片预览组件就有点繁琐了&#xff0c;于是在antDesign图片预览组件的基础上二次封装了一下&#xff0c;避免重复无用代码的出现 效果 公共预览组件代码 import React…...

逻辑回归 和 支持向量机(SVM)比较

为了更好地理解为什么在二分类问题中使用 SVM&#xff0c;逻辑回归的区别&#xff0c;我们需要深入了解这两种算法的区别、优势、劣势&#xff0c;以及它们适用于不同场景的原因。 逻辑回归和 SVM 的比较 1. 模型的核心思想 • 逻辑回归&#xff1a; • 基于概率的模型&…...

GS-SLAM论文阅读笔记--TAMBRIDGE

前言 本文提出了一个自己的分类方法&#xff0c;传统的视觉SLAM通常使用以帧为中心的跟踪方法&#xff0c;但是3DGS作为一种高效的地图表达方法好像更侧重于地图的创建。这两种方法都有各自的优缺点&#xff0c;但是如果能取长补短&#xff0c;互相结合&#xff0c;那么就会是…...

[Redis面试高频] - zset的底层数据结构

文章目录 [Redis面试高频] - zset的底层数据结构一、引言二、zset 的底层数据结构1、zset 的编码方式1.1、ziplist 编码1.2、skiplist 编码 1.3、ziplist 编码适用条件1.4、skiplist 编码适用条件2、zset 的操作命令 三、zset 的性能考量1、内存效率2、搜索效率 四、总结 [Redi…...

搜维尔科技:OptiTrack将捕捉到的人类动作数据映射到人形机器人的各个关节上进行遥操作

OptiTrack将捕捉到的人类动作数据映射到人形机器人的各个关节上进行遥操作 搜维尔科技&#xff1a;OptiTrack将捕捉到的人类动作数据映射到人形机器人的各个关节上进行遥操作...

CentOS Linux教程(6)--CentOS目录

文章目录 1. 根目录2. cd目录切换命令3. CentOS目录介绍4. pwd命令介绍5. ls命令介绍5.1 ls5.2 ls -a5.3 ls -l 1. 根目录 Windows电脑的根目录是计算机(我的电脑)&#xff0c;然后C盘、D盘。 Linux系统的根目录是/&#xff0c;我们可以使用cd /进入根目录&#xff0c;然后使…...

观察者模式全攻略:从设计原理到 SpringBoot 实践案例

观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;使得当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都能得到通知并自动更新。 核心思想&#xff1a; 观察者模式将**观…...

【MyBatis】Java 数据持久层框架:认识 MyBatis

Java 数据持久层框架&#xff1a;认识 MyBatis 1.CRUD 注解2.映射注解3.高级注解3.1 高级注解3.2 MyBatis 3 注解的用法举例 MyBatis 和 JPA 一样&#xff0c;也是一款优秀的 持久层框架&#xff0c;它支持定制化 SQL、存储过程&#xff0c;以及高级映射。它可以使用简单的 XML…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...