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

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

news 2026/2/9 17:36:13

什么是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 //…...

编程日记 2024/9/23 11:23:33

神经网络面试题目

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

编程日记 2024/9/23 11:22:32

C语言题目之单身狗2

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

编程日记 2024/9/23 11:20:29

Vue2学习笔记(03关于VueComponent)

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

编程日记 2024/9/23 11:19:27

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

认证授权 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…...

编程日记 2024/9/23 11:17:24

[深度学习]Pytorch框架

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

编程日记 2024/9/23 11:14:20

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

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

编程日记 2024/9/23 11:13:18

[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…...

编程日记 2024/9/23 11:11:15

新版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…...

编程日记 2024/9/23 11:10:14

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…...

编程日记 2024/9/23 11:09:12

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

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

编程日记 2024/9/23 11:05:06

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

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

编程日记 2024/9/23 11:04:04

react + antDesign封装图片预览组件（支持多张图片）

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

编程日记 2024/9/23 11:03:03

逻辑回归 和 支持向量机（SVM）比较

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

编程日记 2024/9/23 11:02:02

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

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

编程日记 2024/9/23 10:57:57

[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…...

编程日记 2024/9/23 10:51:49

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

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

编程日记 2024/9/23 10:50:48

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;然后使…...

编程日记 2024/9/23 10:49:47

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

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

编程日记 2024/9/23 10:46:44

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

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

编程日记 2024/9/23 10:43:40

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17