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

vitepress的使用

创建项目并启动项目

// 1.创建项目,直接在空项目下安装vitepress(npm/yarn等都可以,这个可以看官网,官网给了好几种安装方式)
yarn add -D vitepress
// 2.初始化配置项目(npm/官网也给了多种包管理工具的安装方式)
npx vitepress init
// 初始化命令执行完会遇到以下几个问题
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?  // 将哪个目录作为根目录(默认./)./docs
│
◇  Site title: // 设置标题(有默认的,可以直接回车,后期可以改)
│  My Awesome Project
│
◇  Site description: // 设置网站描述(也是可以默认的,后期可以改)A VitePress Site
│
◆  Theme: //选择使用的主题模版
│  ● Default Theme (Out of the box, good-looking docs)  //默认的主题模版
│  ○ Default Theme + Customization //使用默认+自定义的,我选的这个
│  ○ Custom Theme //使用自定义主题
◇  Use TypeScript for config and theme files? //是否使用ts作为模版(我选的是no)
│  ● Yes / ○ No
◆  Add VitePress npm scripts to package.json? //是否将package.json作为配置文件(这里选择yes)
│  ● Yes / ○ No
└
// 整体为:./docs 回车 回车 第二个 no yes

这样就创建完毕了,目前项目的结构应该是如下所示:

├─ docs
│  ├─ .vitepress //当前目录所在的位置就是文档的根目录
│  │  └─ config.js //项目的配置文件,最重要
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

项目启动

yarn docs:dev

得到如下页面(这样项目就搭建完成了)
在这里插入图片描述

运行原理:项目启动后会允许根目录下的index.md,在项目里面所有的md文档均会被编译为html,这里项目的根目录被设置为了./docs,因此会先运行/docs/index.md以下所有介绍的根目录均代表./docs目录下

配置介绍

首页

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home  //指定以home格式呈现(一共有三种模式呈现doc,page,home,默认以doc格式呈现)//下面的这些都是页面的显示各位可以去参考页面
hero:name: "My Awesome Project"text: "A VitePress Site"tagline: My great project taglineimage:scr:/logo.svg  //默认找根目录下的public文件夹内的图片alt:VitePressactions:- theme: brandtext: Markdown Exampleslink: /markdown-examples- theme: alttext: API Exampleslink: /api-examplesfeatures:- title: Feature Adetails: Lorem ipsum dolor sit amet, consectetur adipiscing elit- title: Feature Bdetails: Lorem ipsum dolor sit amet, consectetur adipiscing elit- title: Feature Cdetails: Lorem ipsum dolor sit amet, consectetur adipiscing elit
---

文件路由

根目录下的config.mjs里面

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({title: "萧寂博客园",description: "A VitePress Site",themeConfig: {// https://vitepress.dev/reference/default-theme-confignav: [  //右上角导航栏{text: '前端', items: [{ text: '前端子页面', link: '/web/index' },{text: '',  //这个写东西了就代表有标题了items: [{ text: '前端子页面', link: '/web/进阶基础' },]}]},{ text: '标签页', link: '/markdown-examples' }],sidebar: {// 下面这个当匹配到对应的路由时会动态加载侧边栏,例如下面我这个就是匹配到/web/index这个时才展示侧边栏// 下面这种方法可以保证页面切换左边侧边栏不会消失'/web/index': {title: 'web前端',items: [{ text: '前端首页', link: '/web/index' },{ text: '前端侧边栏', link: '/web/进阶基础' }]},'/web/进阶基础': {title: '进阶基础',items: [{ text: '前端首页', link: '/web/index' },{ text: '前端侧边栏', link: '/web/进阶基础' },]}},socialLinks: [  // 右上角的图标(如github这种){ icon: 'github', link: 'https://github.com/vuejs/vitepress' }]}
})

文档模式

一共有三种模式呈现doc,page,home,默认以doc格式呈现
更改文档模式如下(在当前指定的md文件最上面填写如下代码)

---
layout:home
---

图片资源

图片资源放在根目录下的public文件夹内,可以直接写名字,默认这个名字的资源是去找public文件夹第一层去找同名文件

相关文章:

vitepress的使用

创建项目并启动项目 // 1.创建项目,直接在空项目下安装vitepress(npm/yarn等都可以,这个可以看官网,官网给了好几种安装方式) yarn add -D vitepress // 2.初始化配置项目(npm/官网也给了多种包管理工具的安装方式) npx vitepress init // 初始化命令执行完会遇到以下几个问题…...

Discuz论坛自动采集发布软件

随着网络时代的不断发展,Discuz论坛作为一个具有广泛用户基础的开源论坛系统,其采集全网文章的技术也日益受到关注。在这篇文章中,我们将专心分享通过输入关键词实现Discuz论坛的全网文章采集,同时探讨采集过程中伪原创的发布方法…...

B树在数据库的应用

B树(B-tree)是一种自平衡的树状数据结构,广泛应用于数据库和文件系统等领域,其设计的目标是提供一种高效的插入、删除和查找操作。B树的设计是为了在磁盘等存储介质上存储和操作大量的数据。 主要特点包括: 平衡性&a…...

Android 源码编译

一,虚拟机安装 ​ 1.1 进入https://cn.ubuntu.com/download中文官网下载iso镜像 1.2 这里我们下载Ubuntu 18.04 LTS 1.3虚拟VM机安装ubuntu系统,注意编译源码需要至少16G运行内存和400G磁盘空间,尽量设大点 二 配置编译环境 2.1 下载andr…...

信而泰 SSL测试方法介绍

[本文介绍在ALPS平台上进行SSL测试的内容和方法] 什么是SSL SSL全称是Secure Sockets Layer,指安全套接字协议,为基于TCP的应用层协议提供安全连接;SSL介于TCP/IP协议栈的第四层和第五层之间,广泛用于电子商务、网上银行等。 SSL…...

Redis--15--缓存穿透 击穿 雪崩

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 缓存穿透 击穿 雪崩运行速度:1 缓存穿透问题描述:如何解决: 2 缓存击穿问题描述:如何解决: 3 缓存雪崩说明:解决方案: 缓存穿透 击穿 雪崩 问题描述: 由于海量的用…...

excel表格在线编辑(开源版)

文章目录 前言一、Luckysheetvue3vite 例子如有启发,可点赞收藏哟~ 前言 本文记录好用的开源在线表格 具体如图显示 另外记录下更名后的univer~,如下图(有兴趣可自行详细了解) univer 在线思维导图 一、Luckysheet 参考git…...

17.字符串处理函数——字符串比较函数

文章目录 前言一、题目描述 二、解题 程序运行代码 总结 前言 本系列为字符串处理函数编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 二、解题 程序运行代码 #include<stdio.h> #include<string.h> int main() {char *str1 "hello wo…...

【面试HOT200】二叉树——深度优先搜索篇

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于【CodeTopHot200】进行的&#xff0c;每个知识点的修正和深入主要参…...

价值投资选股的方法

价值投资法是一种长期投资策略&#xff0c;其核心思想是寻找被市场低估的股票&#xff0c;即股票的市场价格低于其内在价值。这种策略认为&#xff0c;投资者应该关注公司的基本面&#xff0c;如盈利能力、成长潜力、财务状况等&#xff0c;而不是短期的市场波动。以下是价值投…...

java中如何将mysql里面的数据取出来然后通过stream流的方式进行数据处理代码实例?

在 Java 中使用 Stream 流的方式从 MySQL 数据库中取出数据并进行处理&#xff0c;你可以通过 JDBC&#xff08;Java Database Connectivity&#xff09;来实现。下面是一个简单的代码示例&#xff1a; import java.sql.*; import java.util.stream.Stream; public class MySQ…...

C++服务器 支持http、tcp protobuf、websocket,linux开源框架 零依赖轻松编译部署 Reactor

开源地址: https://github.com/crust-hub/tubekit/tree/main Github:https://github.com/gaowanlu 诚招有兴趣的小伙伴加入开发维护 Tubekit The C TCP server framework based on the Reactor model continues to implement POSIX thread pool, Epoll, non blocking IO, obj…...

1688API接口系列,1688开放平台接口使用方案(商品详情数据+搜索商品列表+商家订单类)

1688商品详情接口是指1688平台提供的API接口&#xff0c;用于获取商品详情信息。通过该接口&#xff0c;您可以获取到商品的详细信息&#xff0c;包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口&#xff0c;您需要先申请1688的API权限&#xff0c;并获取ac…...

CentOS服务器网页版Rstudio-server及R包批量安装最佳实践

CentOS服务器安装网页版Rstudio-server及R包批量安装 以下为CentOS 7/8的Rstudio-server安装、配置和R包安装操作 1. 软件包安装 Centos 7安装 # 下载安装包&#xff0c;大小115.14 MB wget -c https://download2.rstudio.org/server/centos7/x86_64/rstudio-server-rhel-…...

centos7内核升级(k8s基础篇)

1.查看系统内核版本信息 uname -r 2.升级内核 2.1更新yum源仓库 yum -y update更新完成后&#xff0c;启用 ELRepo 仓库并安装ELRepo仓库的yum源 ELRepo 仓库是基于社区的用于企业级 Linux 仓库&#xff0c;提供对 RedHat Enterprise (RHEL) 和 其他基于 RHEL的 Linux 发行…...

数据结构与算法设计分析——NP完全理论

目录 一、P类问题与NP类问题的定义二、常见的NP类问题&#xff08;一&#xff09;旅行商问题&#xff08;TSP&#xff09;&#xff08;二&#xff09;哈密尔顿回路问题&#xff08;三&#xff09;判断回路问题&#xff08;四&#xff09;图的着色问题&#xff08;五&#xff09…...

AGNES层次聚类

已知数据集D中有9个数据点&#xff0c;分别是(1,2)&#xff0c;(2&#xff0c;3)&#xff0c;(2,1), (3,1),(2,4),(3,5),(4,3),(1,5),(4,2)。要求&#xff1a; (1)采用层次聚类的聚集算法进行聚类&#xff0c;k2。 (2)距离计算采用欧几里得距离。 (3)簇之间的距离采用单链接方…...

HCIP —— 双点重发布 + 路由策略 实验

目录 实验拓扑&#xff1a; 实验要求&#xff1a; 实验配置&#xff1a; 1.配置IP地址 2.配置动态路由协议 —— RIP 、 OSPF R1 RIP R4 OSPF R2 配置RIP、OSPF 双向重发布 R3配置RIP、OSPF 双向重发布 3.查询路由表学习情况 4.使用路由策略控制选路 R2 R3 5.检…...

Python标准库:datetime模块【侯小啾python领航班系列(二十五)】

Python标准库:datetime模块【侯小啾python领航班系列(二十五)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…...

新版idea如何开启多台JVM虚拟机

1.看看自己的项目 2.可能开始的时候啥也没有&#xff0c;就点Run Configuration Type 3.再点击Edit Configurations... 4.点击号添加SpringBoot 5.主类选择一下&#xff0c;一般就一个&#xff0c;点他选了就行。 6.然后点击Modify Options 选择添加add VM Options 7.点击appl…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...