在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所在地

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