运行时 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>

结果

主题数据

{
  "outline": {
    "level": [
      1,
      3
    ]
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "学习笔记",
      "link": "/notes/"
    },
    {
      "text": "分类",
      "link": "/categories/"
    },
    {
      "text": "归档",
      "link": "/archives/"
    },
    {
      "text": "标签",
      "link": "/tags/"
    },
    {
      "text": "学习计划",
      "link": "/plan/"
    }
  ],
  "sidebar": [
    {
      "text": "学习",
      "items": [
        {
          "text": "学习笔记",
          "link": "/notes/"
        },
        {
          "text": "分类",
          "link": "/categories/"
        },
        {
          "text": "归档",
          "link": "/archives/"
        },
        {
          "text": "标签",
          "link": "/tags/"
        },
        {
          "text": "学习计划",
          "link": "/plan/"
        }
      ]
    },
    {
      "text": "示例与参考",
      "collapsed": true,
      "items": [
        {
          "text": "Markdown 扩展示例",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "运行时 API 示例",
          "link": "/examples/api-examples"
        },
        {
          "text": "自定义主题",
          "link": "/advanced/custom-theme"
        },
        {
          "text": "Markdown 扩展",
          "link": "/advanced/markdown-extensions"
        },
        {
          "text": "代码高亮",
          "link": "/advanced/code-highlighting"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/TencentEdgeOne/pages-templates/tree/main/examples/vitepress-template"
    }
  ]
}

页面数据

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

页面 Frontmatter

{
  "outline": "deep"
}

更多

查看文档以获取完整的运行时 API 列表。