运行时 API 示例

VitePress 提供了运行时 API，可以在 Markdown 或 Vue 组件中读取站点、主题、页面和 frontmatter 数据。

下面这个示例会在页面中输出当前站点数据，适合调试主题配置或确认页面元信息。

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

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

## 当前页面

<pre>{{ page }}</pre>

当前站点

{
  "lang": "zh-CN",
  "dir": "ltr",
  "title": "拾光文档馆",
  "description": "一个温柔、清爽、可直接使用的中文 VitePress 文档站。",
  "base": "/",
  "head": [],
  "router": {
    "prefetchLinks": true
  },
  "appearance": true,
  "themeConfig": {
    "logo": "/logo.svg",
    "outline": {
      "label": "本页目录",
      "level": [
        2,
        3
      ]
    },
    "nav": [
      {
        "text": "首页",
        "link": "/"
      },
      {
        "text": "快速开始",
        "link": "/quick-start/quick-start"
      },
      {
        "text": "写作示例",
        "link": "/examples/markdown-examples"
      },
      {
        "text": "进阶玩法",
        "link": "/advanced/custom-theme"
      }
    ],
    "sidebar": [
      {
        "text": "启程",
        "collapsed": false,
        "items": [
          {
            "text": "项目概览",
            "link": "/quick-start/quick-start"
          },
          {
            "text": "安装与启动",
            "link": "/quick-start/quick-start#安装与启动"
          },
          {
            "text": "页面写作",
            "link": "/quick-start/quick-start#页面写作"
          },
          {
            "text": "发布上线",
            "link": "/quick-start/quick-start#发布上线"
          }
        ]
      },
      {
        "text": "进阶玩法",
        "collapsed": false,
        "items": [
          {
            "text": "定制主题",
            "link": "/advanced/custom-theme"
          },
          {
            "text": "Markdown 扩展",
            "link": "/advanced/markdown-extensions"
          },
          {
            "text": "代码高亮",
            "link": "/advanced/code-highlighting"
          }
        ]
      },
      {
        "text": "示例集",
        "collapsed": false,
        "items": [
          {
            "text": "Markdown 示例",
            "link": "/examples/markdown-examples"
          },
          {
            "text": "运行时 API",
            "link": "/examples/api-examples"
          }
        ]
      }
    ],
    "search": {
      "provider": "local"
    },
    "socialLinks": [
      {
        "icon": "github",
        "link": "https://github.com/TencentEdgeOne/pages-templates/tree/main/examples/vitepress-template"
      }
    ],
    "footer": {
      "message": "用 Markdown 写下清楚的想法。",
      "copyright": "Copyright © 2026 拾光文档馆"
    }
  },
  "locales": {},
  "scrollOffset": 134,
  "cleanUrls": true,
  "localeIndex": "root"
}

主题配置

{
  "logo": "/logo.svg",
  "outline": {
    "label": "本页目录",
    "level": [
      2,
      3
    ]
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "快速开始",
      "link": "/quick-start/quick-start"
    },
    {
      "text": "写作示例",
      "link": "/examples/markdown-examples"
    },
    {
      "text": "进阶玩法",
      "link": "/advanced/custom-theme"
    }
  ],
  "sidebar": [
    {
      "text": "启程",
      "collapsed": false,
      "items": [
        {
          "text": "项目概览",
          "link": "/quick-start/quick-start"
        },
        {
          "text": "安装与启动",
          "link": "/quick-start/quick-start#安装与启动"
        },
        {
          "text": "页面写作",
          "link": "/quick-start/quick-start#页面写作"
        },
        {
          "text": "发布上线",
          "link": "/quick-start/quick-start#发布上线"
        }
      ]
    },
    {
      "text": "进阶玩法",
      "collapsed": false,
      "items": [
        {
          "text": "定制主题",
          "link": "/advanced/custom-theme"
        },
        {
          "text": "Markdown 扩展",
          "link": "/advanced/markdown-extensions"
        },
        {
          "text": "代码高亮",
          "link": "/advanced/code-highlighting"
        }
      ]
    },
    {
      "text": "示例集",
      "collapsed": false,
      "items": [
        {
          "text": "Markdown 示例",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "运行时 API",
          "link": "/examples/api-examples"
        }
      ]
    }
  ],
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/TencentEdgeOne/pages-templates/tree/main/examples/vitepress-template"
    }
  ],
  "footer": {
    "message": "用 Markdown 写下清楚的想法。",
    "copyright": "Copyright © 2026 拾光文档馆"
  }
}

页面数据

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

Frontmatter

{
  "outline": "deep"
}

使用建议

如果只是写普通文档，不需要碰运行时 API。只有在做自定义组件、主题扩展或动态展示时再使用它。