运行时 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>

结果

主题数据

{
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "示例",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": {
    "/markdown-examples": [
      {
        "text": "示例",
        "items": [
          {
            "text": "Markdown 示例",
            "link": "/markdown-examples"
          },
          {
            "text": "运行时 API 示例",
            "link": "/api-examples"
          }
        ]
      }
    ],
    "/api-examples": [
      {
        "text": "API 文档",
        "items": [
          {
            "text": "概览",
            "link": "/api-examples"
          }
        ]
      }
    ]
  },
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

页面数据

{
  "title": "运行时 API 示例",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1781111278000
}

页面 Frontmatter

{
  "outline": "deep"
}

更多

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