VitePress 数据加载

VitePress 提供了一种在构建时加载数据并在客户端组件中访问这些数据的机制。这对于从本地文件（如 JSON, YAML）或远程 API 获取数据并生成静态内容非常有用。

这个功能通过创建 .data.js 或 .data.ts 文件来实现。

基本用法

创建数据加载文件
在你的 docs 目录下的任何位置，创建一个与你的 Markdown 文件同名的 .data.js 文件。例如，如果你有一个 members.md，你可以创建一个 members.data.js。
```
.
└── docs
    ├── members.md
    └── members.data.js
```

编写数据加载脚本

在 .data.js 文件中，你需要导出一个 load 函数。这个函数在 Node.js 环境中于构建时执行。

javascript

// docs/members.data.js
import { createContentLoader } from 'vitepress'

export default createContentLoader('path/to/your/data/*.md', {
  // ... options
})

createContentLoader 是一个辅助函数，用于加载和转换一组 Markdown 文件。第一个参数是一个 glob 模式，用于匹配你想要加载的文件。

你也可以导出一个自定义的 load 函数来从任何地方获取数据：

javascript

// docs/api.data.js
export default {
  async load() {
    const response = await fetch('https://api.example.com/items');
    const data = await response.json();
    return data; // 返回的数据将可用于客户端
  }
}

在组件中访问数据

一旦你定义了数据加载文件，VitePress 会自动处理数据的加载和传递。你可以在与数据文件同名的 .md 文件中直接访问这些数据。

数据会通过 useData 这个 composable 函数暴露出来。

vue

<!-- docs/members.md -->
<script setup>
import { useData } from 'vitepress'

// data 是从 members.data.js 加载而来的
const { data: members } = useData()
</script>

# 团队成员

<ul>
  <li v-for="member of members">
    <a :href="member.url">{{ member.frontmatter.name }}</a>
  </li>
</ul>

在这个例子中，members.data.js 使用 createContentLoader 加载了一系列成员的 Markdown 文件。在 members.md 中，我们通过 useData 获取了这些成员的数据，并使用 v-for 渲染了一个列表。

工作原理

构建时 (Node.js): VitePress 扫描你的文件，找到所有的 .data.js 文件。它会执行每个文件中的 load 函数，并将返回的数据序列化成 JSON。
客户端 (Browser): 当用户访问一个页面时，VitePress 会根据需要异步加载对应页面的数据。useData composable 会返回这些预加载的数据。

缓存

load 函数的结果会被缓存起来。如果你希望在开发模式下，每次文件变更时都重新加载数据，你可以设置 watch 选项。

javascript

// docs/members.data.js
import { createContentLoader } from 'vitepress'

export default createContentLoader('members/*.md', {
  watch: ['path/to/your/data/*.md'], // 监视文件变化
})

数据加载是 VitePress 的一个强大功能，它允许你将静态内容与动态数据源结合起来，创建出更复杂、数据驱动的网站，同时保持静态站点的性能优势。

VitePress 数据加载 ​

基本用法 ​

在组件中访问数据 ​

工作原理 ​

缓存 ​

VitePress 数据加载

基本用法

在组件中访问数据

工作原理

缓存