运行时 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": "Slot Provider API",
      "link": "/slot-provider-api-v1"
    },
    {
      "text": "Markdown 示例",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "接口文档",
      "items": [
        {
          "text": "Slot Provider API v1",
          "link": "/slot-provider-api-v1"
        }
      ]
    },
    {
      "text": "VitePress 示例",
      "items": [
        {
          "text": "Markdown 扩展示例",
          "link": "/markdown-examples"
        },
        {
          "text": "运行时 API 示例",
          "link": "/api-examples"
        }
      ]
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "displayDetails": "显示详细结果",
          "resetButtonTitle": "清除搜索条件",
          "backButtonTitle": "关闭搜索",
          "noResultsText": "没有找到相关结果",
          "footer": {
            "selectText": "选择",
            "selectKeyAriaLabel": "回车键",
            "navigateText": "切换结果",
            "navigateUpKeyAriaLabel": "向上键",
            "navigateDownKeyAriaLabel": "向下键",
            "closeText": "关闭",
            "closeKeyAriaLabel": "Esc 键"
          }
        }
      },
      "miniSearch": {
        "options": {}
      }
    }
  },
  "outline": {
    "level": "deep",
    "label": "页面导航"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "lastUpdated": {
    "text": "最后更新于"
  },
  "sidebarMenuLabel": "菜单",
  "returnToTopLabel": "返回顶部",
  "skipToContentLabel": "跳转到正文",
  "langMenuLabel": "切换语言",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

页面数据

{
  "title": "运行时 API 示例",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [
    {
      "level": 2,
      "title": "运行结果",
      "slug": "运行结果",
      "link": "#运行结果",
      "children": [
        {
          "level": 3,
          "title": "主题数据",
          "slug": "主题数据",
          "link": "#主题数据",
          "children": []
        },
        {
          "level": 3,
          "title": "页面数据",
          "slug": "页面数据",
          "link": "#页面数据",
          "children": []
        },
        {
          "level": 3,
          "title": "页面 Frontmatter",
          "slug": "页面-frontmatter",
          "link": "#页面-frontmatter",
          "children": []
        }
      ]
    },
    {
      "level": 2,
      "title": "了解更多",
      "slug": "了解更多",
      "link": "#了解更多",
      "children": []
    }
  ],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 0
}

页面 Frontmatter

{
  "outline": "deep"
}

了解更多

请参阅 VitePress 文档中的 运行时 API 完整列表。