VitePress API 示例

本页面演示了 VitePress 提供的一些运行时 API 的使用方法。

主要的 useData() API 可以用来访问当前页面的站点、主题和页面数据。它在 .md 和 .vue 文件中都可以使用：

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## 运行结果

### 主题数据
<pre>{{ theme }}</pre>

### 页面数据
<pre>{{ page }}</pre>

### 页面 Frontmatter
<pre>{{ frontmatter }}</pre>

运行结果

主题数据

{
  "sidebar": [
    {
      "text": "文本",
      "items": [
        {
          "text": "index",
          "link": "/index.md"
        },
        {
          "text": "前端",
          "link": "/前端.md"
        },
        {
          "text": "后端",
          "link": "/后端.md"
        },
        {
          "text": "markdown-examples",
          "link": "/markdown-examples.md"
        },
        {
          "text": "api-examples",
          "link": "/api-examples.md"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "footer": {
    "message": "<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\">粤ICP备2026003175号-1</a>",
    "copyright": "Copyright © 2026"
  }
}

页面数据

{
  "title": "VitePress API 示例",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md"
}

页面 Frontmatter

{
  "outline": "deep"
}

更多信息

查看文档了解 完整的运行时 API 列表。