运行时 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": "/zh/"
    },
    {
      "text": "示例",
      "link": "/zh/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "示例",
      "items": [
        {
          "text": "Markdown 示例",
          "link": "/zh/markdown-examples"
        },
        {
          "text": "运行时 API 示例",
          "link": "/zh/api-examples"
        }
      ]
    },
    {
      "text": "指南",
      "items": [
        {
          "text": "快速开始",
          "link": "/zh/guide/getting-started"
        }
      ]
    },
    {
      "text": "基础",
      "items": [
        {
          "text": "VSCode 集成",
          "link": "/zh/foundation/vscode-integration/"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "algolia": {
    "appId": "YOUR_APP_ID",
    "apiKey": "YOUR_API_KEY",
    "indexName": "YOUR_INDEX_NAME"
  }
}

页面数据

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

页面 Frontmatter

{}

更多

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