Skip to content

Runtime API Examples

This page demon111strates usage of some of the runtime APIs provided by VitePress1111111.

The main useData() API can be used to access site, theme, and page data for the current page. It works in both .md and .vue files:

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

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

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

Results

Theme Data

{
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "About me",
      "link": "/me"
    }
  ],
  "sidebar": [
    {
      "text": "运维",
      "items": [
        {
          "text": "运维基础",
          "link": "/运维基础"
        },
        {
          "text": "系统运维工程师",
          "link": "/系统运维工程师"
        },
        {
          "text": "数据库运维工程师",
          "link": "/数据库运维工程师"
        },
        {
          "text": "自动化运维",
          "link": "/自动化运维"
        },
        {
          "text": "容器运维",
          "link": "/容器运维"
        },
        {
          "text": "云计算+云安全",
          "link": "/云计算+云安全"
        },
        {
          "text": "国产信创运维",
          "link": "/国产信创运维"
        }
      ]
    },
    {
      "text": "前端",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    },
    {
      "text": "每日小结",
      "items": [
        {
          "text": "shell 命令行的格式以及如何使用 &shell中常用的通配符& Shell的输入重定向、输出重定向与错误重定向",
          "link": "/每日小结/0411"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/youtubhexo"
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md"
}

Page Frontmatter

{
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.