使用vitepress快速搭建个人网站或官方文档网站

news2025/2/9 7:00:15

使用vitepress快速搭建个人网站或官方文档网站

1. vitepress是什么?

官方首页的介绍, 翻译过来就是,vitevue组成的强大的静态网站构造器。简单、强大和快速,是你一直想要的SSG(Static Site Generator)框架。

官网地址:https://vitepress.dev/

2. vitepress可以做什么?

按照以前的思维,我们搭建一个个人的博客网站,或者写一个官方文档的网站,还需要自己设计加写代码来实现一个网站。现在我们使用vitepress可以直接一键生成网站模板,只需要把对应的内容栏目改成自己所需即可。

vitepress官方文档如下图:

使用vitepress生成的页面如下:

简直是一个模子里刻出来了(不是简直,就是~)

3. 如何使用vitepress?

按照官方文档顺序

  • 新建一个空文件夹, 在终端执行npm install -D vitepress,这一步是安装vitepress依赖

安装vitepress

  • 安装vitepress之后,继续执行npx vitepress init

项目初始化

  • 初始化配置目录和项目名称等等,可以自定义,此处我们都按照官方默认的

默认配置项

  • 运行项目,npm run docs:dev

运行项目

  • 打开本地运行地址 http://localhost:5173/,预览项目

首页

Examples

  • 修改自定义配置

到此,我们就可以自己修改项目中的内容来实现我们自己的页面了

config.ts修改前

config.ts修改后

demo1

demo2

其他更多配置信息,见官方文档。

  • 打包项目,npm run docs:build

把生成的dist文件夹部署在服务器即可访问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/646149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python mitmproxy抓包库

一.简介 mitmproxy是一款用Python编写的支持HTTP(S)的中间人代理工具。它可以拦截、查看、修改、重放和保存HTTP/HTTPS流量 ,支持命令行界面和图形界面,可用于安全测试、网络调试、API开发和反向工程等场景。mitmproxy具有很高的灵活性和扩展性&#xf…

GUT|IF30+的联合分析文章:宏基因加代谢组

● 代谢组学是基于LC-MS/MS液质联用技术对生物样本中的小分子代谢物进行定性和相对定量分析; ● 宏基因组-代谢组的联合分析可以用来解释差异菌群与差异代谢物的关联性; ● 从而帮助建立微生物-代谢物-表型之间的逻辑关系。 凌恩生物的宏基因组学引入了…

JS:yFiles for HTML Complete 2.5.0 Crack

yFiles for HTML Complete 是市场上最先进、最完整的图表解决方案。我们强大而灵活的 API 提供了广泛的功能——开箱即用。只需选择最符合您需求的那些。 适用于每个用例的布局 从大量预定义的布局中进行选择并配置它们以完美地适应手头的任务。 yFiles 提供业内最广泛的高质量…

Sentinel与Hystix的线程隔离有什么差别

线程隔离有两种方式实现: 线程池隔离(hystix 默认采用) 优点:支持主动超时,支持异步调用 缺点: 线程的额外开销比较大 场景: 低扇出(服务A调用服务B这种简单的调用)信号…

新能源共享叉车充电桩管理系统设计思路

一、充电桩系统设计思路 1、总后台端,电脑版 1.1运营商管理。后台可以添加运营商,运营商可以添加无限添加充电站、充电桩、站点合伙人、充电操作员等,运营商、站点合伙人均有独立的后台入口,可以管理和查看与当前运营商相关充电站…

测试行业干了6年,从只会点点点到了现在的测试开发,总算是证明了自己

测试不止是点点点 我感觉我是一个比较有发言权的人吧,我在测试行业摸爬滚打6年,以前经常听到开发对我说,天天的点点点有意思没? 和IT圈外的同学、朋友聊起自己的工作,往往一说自己是测试,无形中也会被大家…

如何优雅的给SpringBoot部署的jar包瘦身?

一、需求背景 我们知道Spring Boot项目,是可以通过java -jar 包名 启动的。 那为什么Spring Boot项目可以通过上述命令启动,而其它普通的项目却不可以呢? 原因在于我们在通过以下命令打包时 mvn clean package一般的maven项目的打包命令&…

k8s kubeadm高可用集群证书续期

1.查看证书期限 kubeadm certs check-expiration 2.更改系统时间为证书过期的时间 因为要保持集群的时间一直,使用xshell对多个会话同时执行以下命令 systemctl stop chrondy #停止时间同步工具 date -s 06/15/2024 #更改系统时间为证书过期后的时间 date …

2023年JDK要升级到多少?看看七家大模型给的答案

前言 在2023年很多公司应该还在用JDK8,目前JDK已经更新到JDK20,JDK21也将在2023年9月发布,那么在2023年如果我们要升级JDK,到底升级到哪个版本比较合适呢?这个问题我们可以交给大模型,看看各家大模型是怎么…

使用Jemeter对HTTP接口压测

我们不应该仅仅局限于某一种工具,性能测试能使用的工具非常多,选择适合的就是最好的。笔者已经使用Loadrunner进行多年的项目性能测试实战经验,也算略有小成,任何性能测试(如压力测试、负载测试、疲劳强度测试等&#…

MySQL表CRUD

目录 一、Create 1.1 单行数据全列插入 1.2 多行数据指定列插入 1.3 插入否则更新 1.4 替换数据 二、Retrieve 2.1 SELECT列 2.2 WHERE条件 2.3 结果排序 2.4 筛选分页结果 三、Update 四、Delete 4.1 删除数据 4.2 截断表 五、插入查询结果 六、聚合函数 七…

IM相关技术

messages表 保存的消息记录(Saved Messages) bff,session TON以及tdlib 官方版设置中文 tg://setlanguage?langclassic-zh-cn https://web.telegram.org/k/ https://web.telegram.org/a/ https://github.com/TGX-Android https://github.com/NekoX-Dev/NekoX, 内置公共代理不…

C++类与对象(上)

类与对象(上) 1.面向过程与面向对象初步认识2.类的引入3.类的定义4.类的访问限定符以及封装4.1访问限定符4.2 封装 5.类的作用域6.类的实例化7.类对象模型7.1计算类对象的大小7.2类对象的存储方式的猜想 8.this指针8.2this指针的特性 1.面向过程与面向对…

JavaWeb之JSP

文章目录 JSP的基本介绍JSP的本质JSP的三种语法JSP头部的page指令language属性contentType属性image.pngpageEncoding属性import属性autoFlush属性 - 给out输出流使用buffer属性 - 给out输出流使用errorPage属性isErrorPage属性session属性extends属性 JSP中的常用脚本声明脚本…

贸易企业缺进项严重,如何减轻13%的增值税税负?

贸易企业缺进项严重,如何减轻13%的增值税税负? 《税筹顾问》专注于园区招商,您的贴身节税小能手,合理合规节税! 贸易企业的增值税税负很重,这不仅是因为13%的高额增值税税率,也因为贸易企业缺进…

K8s 部署 Apache Kudu 集群

一、K8s 部署 Apache Kudu 集群 安装规划 组件replicaskudu-master3kudu-tserver3 1. 创建命名空间 vi kudu-ns.yamlapiVersion: v1 kind: Namespace metadata:name: apache-kudulabels:name: apache-kudukubectl apply -f kudu-ns.yaml查看命名空间: kubectl …

傻白入门芯片设计,形式化验证方法学——AveMC工具学习(二十)

一、形式验证方法学 (一)什么是形式化验证? 形式化验证方法学是使用数学证明的方法,分析设计中所有可能的状态空间来验证设计是否符合预期。形式化验证方法主要有三个方面的应用:定理证明、模型检验和等价性检查。 …

让你不再疑惑语音翻译怎么弄

语音是人类交流的一种最基本的方式,但是当我们需要和来自不同国家或地区的人交流时,语言的限制往往让我们感到无力。然而,如今的语音翻译技术正在以惊人的速度发展,使得我们的声音可以轻松地跨越语言的界限。那么,你知…

强化学习:蒙特卡洛方法(MC)

引入蒙特卡洛方法例子 以抛硬币为例,将结果(正面朝上或反面朝上)表示为作为随机变量 X X X ,如果正面朝上则 X 1 X1 X1 ,如果反面朝上,则 X − 1 X-1 X−1,现在要计算 E [ X ] E[X] E[X]。    我们通常很容易…

JDK常用的数据类型【1】 ——HashMap(分享篇)

x mod 2^n x & (2^n - 1) 1. 拿到 key 的 hashCode 值 2. 将 hashCode 的高位参与运算,重新计算 hash 值 3. 将计算出来的 hash 值与 (table.length - 1) 进行 & 运算数据结构 1.B树 和 B树 B树叶子节点可以存放多个元素B树的叶子节点之间是有指针的 红…