VitePress运行时API详解

本文将详细介绍VitePress提供的运行时API，这些API可以帮助我们更好地控制页面行为和获取站点数据。

useData() API

useData() 是VitePress提供的主要运行时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>

实际结果

主题数据

{
  "search": {
    "provider": "local",
    "options": {}
  },
  "outline": {
    "level": [
      1,
      6
    ],
    "label": "目录"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "博客",
      "link": "/posts/"
    },
    {
      "text": "关于",
      "link": "/about/about"
    }
  ],
  "sidebar": {
    "/posts/": [
      {
        "text": "前端",
        "collapsed": false,
        "items": [
          {
            "text": "在win11开发兼容ie的网页",
            "link": "/posts/frontend/develop-ie-win11/develop-ie-win11"
          },
          {
            "text": "最近开发时遇到的问题(var和async)",
            "link": "/posts/frontend/problem-for-var-and-async/problem-for-var-and-async"
          }
        ]
      },
      {
        "text": "总结",
        "collapsed": true,
        "items": [
          {
            "text": "2025总结.md",
            "link": "/posts/summary/2025总结.md"
          }
        ]
      },
      {
        "text": "vitepress示例",
        "collapsed": true,
        "items": [
          {
            "text": "给文章添加tag并支持搜索索引",
            "link": "/posts/vitepress/article-tag"
          },
          {
            "text": "基于github的discussion为博客添加评论",
            "link": "/posts/vitepress/blog-comment-by-github-discussion"
          },
          {
            "text": "我的第一篇博客",
            "link": "/posts/vitepress/my-first-post"
          },
          {
            "text": "VitePress使用技巧",
            "link": "/posts/vitepress/vitepress-tips"
          },
          {
            "text": "VitePress中的Markdown扩展功能",
            "link": "/posts/vitepress/markdown-extensions"
          },
          {
            "text": "VitePress运行时API详解",
            "link": "/posts/vitepress/runtime-api-examples"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/mqnu00"
    },
    {
      "icon": "rss",
      "link": "/blog/rss.xml"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2025-present 广习习"
  },
  "docFooter": {
    "prev": false,
    "next": false
  }
}

页面数据

{
  "title": "VitePress运行时API详解",
  "description": "",
  "frontmatter": {
    "title": "VitePress运行时API详解",
    "date": "2025-01-18T00:00:00.000Z",
    "author": "广习习",
    "tags": [
      "技术分享",
      "VitePress",
      "API"
    ],
    "outline": "deep",
    "url": "https://mqnu00.github.io/blog/posts/vitepress/runtime-api-examples.html",
    "discussion": {
      "id": "D_kwDOQdT3Qc4Alc3u",
      "number": 62,
      "title": "VitePress运行时API详解",
      "url": "https://github.com/mqnu00/blog/discussions/62",
      "createdAt": "2026-04-03T05:22:56Z"
    }
  },
  "headers": [],
  "relativePath": "posts/vitepress/runtime-api-examples.md",
  "filePath": "posts/vitepress/runtime-api-examples.md",
  "git": {
    "updated": "2026-04-03 13:24:30 +08:00",
    "history": [
      {
        "sha": "31d110f137ec761d2e130d19942d7c058845ecdd",
        "author": "mqnu00",
        "date": "2026-04-03 13:24:30 +08:00",
        "message": "docs: 重新调整文章对应的discussion",
        "url": "https://github.com/mqnu00/blog/commit/31d110f137ec761d2e130d19942d7c058845ecdd"
      },
      {
        "sha": "bea3eef20fbbef43385db3b64a318f3ca7d9e8f3",
        "author": "mqnu00",
        "date": "2026-04-03 11:26:05 +08:00",
        "message": "Revert \"docs: 对应discussion地址\"\n\nThis reverts commit ae1454d42c75ff2a8879c9c561499689b0224b3c.",
        "url": "https://github.com/mqnu00/blog/commit/bea3eef20fbbef43385db3b64a318f3ca7d9e8f3"
      },
      {
        "sha": "ed6e4c3c7e0b0b3a9956bae653af200a0f334d90",
        "author": "mqnu00",
        "date": "2026-04-03 10:49:57 +08:00",
        "message": "docs: 对应discussion地址",
        "url": "https://github.com/mqnu00/blog/commit/ed6e4c3c7e0b0b3a9956bae653af200a0f334d90"
      },
      {
        "sha": "40f5e7eebfb75ddda473f7bcadfad0d6eebd8c1e",
        "author": "mqnu00",
        "date": "2026-04-03 09:41:03 +08:00",
        "message": "docs: 提交 md 对应 页面网址",
        "url": "https://github.com/mqnu00/blog/commit/40f5e7eebfb75ddda473f7bcadfad0d6eebd8c1e"
      },
      {
        "sha": "730a7d117141f9fc9106caec61861070e057affd",
        "author": "mqnu00",
        "date": "2025-11-27 10:20:16 +08:00",
        "message": "refactor: 配置文章结构",
        "url": "https://github.com/mqnu00/blog/commit/730a7d117141f9fc9106caec61861070e057affd"
      }
    ]
  },
  "url": "https://mqnu00.github.io/blog/posts/vitepress/runtime-api-examples.html"
}

页面Frontmatter

{
  "title": "VitePress运行时API详解",
  "date": "2025-01-18T00:00:00.000Z",
  "author": "广习习",
  "tags": [
    "技术分享",
    "VitePress",
    "API"
  ],
  "outline": "deep",
  "url": "https://mqnu00.github.io/blog/posts/vitepress/runtime-api-examples.html",
  "discussion": {
    "id": "D_kwDOQdT3Qc4Alc3u",
    "number": 62,
    "title": "VitePress运行时API详解",
    "url": "https://github.com/mqnu00/blog/discussions/62",
    "createdAt": "2026-04-03T05:22:56Z"
  }
}

应用场景

useData() API可以用于：

• 根据站点配置动态渲染内容
• 访问页面级的元数据
• 在自定义组件中访问VitePress的内部数据

更多运行时API的详细信息，请查看 官方文档。