运行时 API 示例

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

The main useData() API可用于访问当前页面的站点、主题和页面数据。它在以下两种情况下均有效.md and .vue files:

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

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

## 成效

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

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

### 页面前置内容
<pre>{{ frontmatter }}</pre>

成效

主题数据

{
  "logo": "/assets/img/logo.png",
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "网页",
      "link": "/pages/TDSite"
    },
    {
      "text": "桌面",
      "link": "/pages/TDStart"
    },
    {
      "text": "示例",
      "items": [
        {
          "text": "MARKDOWN",
          "link": "/pages/markdown-examples"
        },
        {
          "text": "RUNTIME API",
          "link": "/pages/api-examples"
        },
        {
          "text": "VUE CHARTS",
          "link": "/pages/charts"
        },
        {
          "text": "VUE Data UI",
          "link": "/pages/AverageOccupancy"
        },
        {
          "text": "LIGHT BOX",
          "link": "/pages/lightbox"
        },
        {
          "text": "PRODUCTS",
          "link": "/pages/products"
        },
        {
          "text": "MEDIA PLAYER",
          "link": "/pages/media"
        },
        {
          "text": "PHOTO SWIPE",
          "link": "/pages/gallery"
        },
        {
          "text": "CONTROLLABLE PROPS",
          "link": "/pages/controllableProps"
        },
        {
          "text": "DYNAMIC TABS",
          "link": "/pages/dynamicTabs"
        },
        {
          "text": "VIME PLAYER",
          "link": "/pages/vimePlayer"
        },
        {
          "text": "MOST POP MICE",
          "link": "/pages/popularMice"
        },
        {
          "text": "DATA PAGES",
          "link": "/pages/data"
        }
      ]
    }
  ],
  "sidebar": [
    {
      "text": "侧边栏",
      "items": [
        {
          "text": "MARKDOWN",
          "link": "/pages/markdown-examples"
        },
        {
          "text": "RUNTIME API",
          "link": "/pages/api-examples"
        },
        {
          "text": "VUE CHARTS",
          "link": "/pages/charts"
        },
        {
          "text": "VUE Data UI",
          "link": "/pages/AverageOccupancy"
        },
        {
          "text": "LIGHT BOX",
          "link": "/pages/lightbox"
        },
        {
          "text": "PRODUCTS",
          "link": "/pages/products"
        },
        {
          "text": "MEDIA PLAYER",
          "link": "/pages/media"
        },
        {
          "text": "PHOTO SWIPE",
          "link": "/pages/gallery"
        },
        {
          "text": "CONTROLLABLE PROPS",
          "link": "/pages/controllableProps"
        },
        {
          "text": "DYNAMIC TABS",
          "link": "/pages/dynamicTabs"
        },
        {
          "text": "VIME PLAYER",
          "link": "/pages/vimePlayer"
        },
        {
          "text": "MOST POP MICE",
          "link": "/pages/popularMice"
        },
        {
          "text": "DATA PAGES",
          "link": "/pages/data"
        }
      ]
    }
  ],
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/JV-HUANG/TDSite"
    }
  ],
  "footer": {
    "message": "粤ICP备2025381183号 & 基于 MIT 许可发布",
    "copyright": "Copyright © 2025 JV HUANG"
  }
}

页面数据

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

页面前导内容

{
  "outline": "deep"
}

更多

查看的文档中提供了 full list of runtime APIs.