运行时 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": [
    {
      "title": "Blog",
      "link": "/blog",
      "activeMatch": "/blog/"
    },
    {
      "title": "Photos",
      "link": "/photos",
      "activeMatch": "/photos/"
    },
    {
      "title": "About",
      "link": "/about"
    }
  ],
  "photo": {
    "base": "photos",
    "items": [
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-1.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-2.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-3.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-4.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-5.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-6.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-7.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-8.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-9.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-10.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-11.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-12.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-13.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-14.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-15.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-16.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-17.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-18.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-19.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-20.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-21.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-22.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-23.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-24.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-25.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-26.jpg"
      },
      {
        "date": "2025-03-21",
        "desc": "上海鲁迅公园",
        "src": "/images/photos/photo-27.jpg"
      }
    ]
  },
  "footbar": {
    "showVitePress": true,
    "items": [
      {
        "title": "GitHub",
        "link": "https://github.com/lianginx"
      },
      {
        "title": "X/Twitter",
        "link": "https://x.com/Niujunliang"
      },
      {
        "title": "2021-2026 © Liang"
      }
    ]
  }
}

页面数据

{
  "title": "运行时 API 示例",
  "description": "",
  "frontmatter": {
    "title": "运行时 API 示例",
    "date": "2024-12-28",
    "layout": "page"
  },
  "headers": [],
  "relativePath": "blog/api-examples.md",
  "filePath": "blog/api-examples.md"
}

页面 Frontmatter

{
  "title": "运行时 API 示例",
  "date": "2024-12-28",
  "layout": "page"
}

更多内容

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