高级功能

站点地图（Sitemap）

站点地图帮助搜索引擎发现你的页面，VitePress 一行配置就能开启：

export default defineConfig({
  sitemap: {
    hostname: 'https://你的域名.com'
  }
})

带 lastUpdated 的话会自动在 sitemap 中加入 <lastmod> 标签：

export default defineConfig({
  lastUpdated: true,
  sitemap: {
    hostname: 'https://你的域名.com'
  }
})

MPA 模式

默认下 VitePress 是 SPA（页面间无刷新切换）。如果希望零 JavaScript、更快的首屏评分，可以开启 MPA 模式：

export default defineConfig({
  mpa: true
})

代价是：每次切换页面会完全刷新，失去 SPA 的流畅感。适合纯文档站，不适合有交互的场景。

构建时数据加载

VitePress 可以在构建时加载外部数据（从 API、本地文件等），再注入到页面中。

基本用法

创建一个 .data.js 文件：

// posts.data.js
export default {
  async load() {
    const res = await fetch('https://api.example.com/posts')
    return res.json()
  }
}

在 .md 或 .vue 文件中导入：

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

<template>
  <ul>
    <li v-for="post in data" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

加载本地文件

import fs from 'node:fs'

export default {
  watch: ['./data/*.json'],  // 文件变化时自动重新加载
  load(watchedFiles) {
    return watchedFiles.map(f => JSON.parse(fs.readFileSync(f, 'utf-8')))
  }
}

createContentLoader

VitePress 内置了 createContentLoader 辅助函数，专门用于遍历 Markdown 文件：

// posts.data.js
import { createContentLoader } from 'vitepress'

export default createContentLoader('posts/*.md', {
  excerpt: true,   // 包含摘要
  transform(data) {
    return data.sort((a, b) => {
      return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
    })
  }
})

加载到的数据格式：

interface ContentData {
  url: string               // 页面 URL
  frontmatter: Record<string, any>  // frontmatter 数据
  src?: string              // 原始 markdown 源
  html?: string             // 渲染后的 HTML
  excerpt?: string          // 摘要
}

提示

数据加载只在构建时执行，数据会序列化为 JSON 打包进客户端。适合中小规模数据，不要加载太大的数据集。