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

server/2024/9/24 15:39:39/

什么是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所在地

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


http://www.ppmy.cn/server/121407.html

相关文章

黑马头条day3-2 自媒体文章管理

前边还有一个 素材列表查询 没什么难度 就略过了 查询所有频道和查询自媒体文章也是和素材列表查询类似 就是普通的查询 所以略过了 文章发布 这个其实挺复杂的 一共三张表 一个文章表 一个素材表 一个文章和素材的关联表 区分修改与新增就是看是否存在id 如果是保存草稿…

CertiK因发现Apple Vision Pro眼动追踪技术漏洞,第6次获苹果认可

​2024年9月20日,头部Web3.0安全机构CertiK自豪地宣布,CertiK的工程师因发现Apple Vision Pro MR(混合现实)头显设备中的关键漏洞而获得Apple公司认可,这已经是Apple公司第六次公开发布对CertiK的致谢,Cert…

解决Matlab串口通信中接收到的消息不能正常显示

问题描述 如图,经过函数把接收到的十六进制字符串转换为EEE754标准浮点数后速度角度无法正常解析显示,其中速度角度的解码过程如下: (以速度为例) yv_temp1 dec2hex(data_receive(2)); yv_temp2 dec2hex(data_receive…

二叉树遍历、查找、深度等

在面试中,二叉树问题是一个常见的主题。下面我将展示如何在 Python 3.11 中实现二叉树的基本结构和几种常见的面试题解法,包括二叉树的遍历、查找、深度等。 1. 二叉树节点的定义 class TreeNode:def __init__(self, value0, leftNone, rightNone):sel…

文献笔记 - Reinforcement Learning for UAV Attitude Control

这篇博文是自己看文章顺手做的笔记 只是简单翻译和整理 仅做个人参考学习和分享 如果作者看到觉得内容不妥请联系我 我会及时处理 本人非文章作者,文献的引用格式如下,原文更有价值 Koch W, Mancuso R, West R, et al. Reinforcement learning for UA…

SpringBoot+Aop+注解方式 实现多数据源动态切换

整体思路: 引入基本依赖SpringBootAopMySqlMyBatislombok在配置文件中配置多个数据源创建数据源配置类用于读取配置编写用于标识切换数据源的注解创建数据源切换工具类DataSourceContextHolder编写切面类用于在注解生效处切换数据源编写配置类,加载数据…

【截稿更新 | 11月杭州 | EI稳定 】

【截稿更新 | 11月杭州 | EI稳定 】2024年人机交互与虚拟现实国际会议(HCIVR 2024) ✅会议时间:2024年11月15-17日 ✅会议地点:中国杭州 🔥二轮截稿日期:2024年10月15日 🌈投稿通道已开启&#…

在一个.NET Core项目中使用RabbitMQ进行即时消息管理

为了在一个.NET Core项目中使用RabbitMQ进行即时消息管理,以下是详细的全程操作指南,包括安装、配置、编写代码和调试使用。 一、安装RabbitMQ 1. 安装Erlang RabbitMQ依赖Erlang,因此需要先安装Erlang。 Windows: 下载并运行Erlang安装…