VitePress使用手册

初始化Vitepress

1. 在空目录安装vitepress依赖。

npm add -D vitepress

2. 运行vitepress初始化向导

npx vitepress init

• 项目根目录：项目根目录是 VitePress 将尝试寻找 .vitepress 特殊目录的地方。.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的预留位置。可以将项目根目录设置为doc目录。

.
├─ docs                    # 项目根目录
│  ├─ .vitepress           # 配置目录
│  ├─ getting-started.md
│  └─ index.md
└─ ...

• 源目录：源目录是 Markdown 源文件所在的位置。默认情况下，它与项目根目录相同。但是，可以通过 srcDir 配置选项对其进行配置。

数据加载

vitepress提供了数据加载功能，它允许将加载的数据导入到md文件或vue组件中。数据加载只在构建时执行，最终的数据将被序列化为 JavaScript 包中的 JSON。

1. 定义数据加载对象，并返回需要的数据。 一个数据加载功能的文件必须以.data.js或.date.ts结尾。文件默认导出一个具有load()方法的对象。

//mydataload.data.js
export default {
	//添加async可以实现异步加载
	async load(){
		return "hello world";
	}
}

2. 在md文件或vue组件中，导入数据加载对象。

<script setup>
import { data } from './mydataload.data.js'
</script>

<pre>{{ data }}</pre>

注意：导出时需要使用data导出。

构建钩子

1. buildEnd：是一个构建 CLI 钩子，它将在构建 SSG 完成后但在 VitePress CLI 进程退出之前运行。
2. postRender：是一个构建钩子，在 SSG 渲染完成时调用。它将允许在 SSG 期间处理传递的内容。
3. transformHead：是一个构建钩子，用于在生成每个页面之前转换 head。它将允许添加无法静态添加到 VitePress 配置中的 head entries。只需要返回额外的 entries，它们将自动与现有 entries 合并。
4. transformHtml：是一个构建钩子，用于在保存到磁盘之前转换每个页面的内容。
5. transformPageData：是一个钩子，用于转换每个页面的 pageData。可以直接改变 pageData 或返回将合并到 PageData 中的更改值。

frontmatter（前言）配置

在每个markdown文件的开始部分配置，可以覆盖站点级别或主题级别的配置选项，或当前页面的一些配置。

格式：

---
title: docs with Vitepress
editlink: true
---

在文档中通过 Vue 表达式中的 $frontmatter 全局变量访问 frontmatter 数据

{{ $frontmatter.title }}

徽章

徽标可让你为标题添加状态。例如，指定部分的类型或支持的版本可能很有用。

### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="^1.9.0" />
### Title <Badge type="warning" text="beta" />
### Title <Badge type="danger" text="caution" />

• type：默认为 tip。可为'info' | 'tip' | 'warning' | 'danger'
• text：string

显示团队成员

使用VPTeamMembers组件实现团队成员信息展示，该组件会以卡片形式展示成员。

import { VPTeamMembers } from 'vitepress/theme

VPTeamMembers组件有一个members属性，用于接收成员数组。