Runtime API Examples

This page demonstrates usage of some of the runtime APIs provided by VitePress.

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:

<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

{
  "logo": "/tslj1024-circle-32.ico",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "内功心法",
      "items": [
        {
          "text": "操作系统",
          "link": "/base-op/"
        },
        {
          "text": "网络",
          "link": "/base-net/"
        },
        {
          "text": "数据库",
          "link": "/base-db/"
        },
        {
          "text": "数据结构与算法",
          "link": "/base-ag/"
        },
        {
          "text": "设计模式",
          "link": "/base-dp/"
        }
      ]
    },
    {
      "text": "Java 生态",
      "items": [
        {
          "text": "Java",
          "link": "/java/base/"
        },
        {
          "text": "Spring",
          "link": "/java/boot/"
        },
        {
          "text": "微服务",
          "link": "/java/cloud/"
        }
      ]
    },
    {
      "text": "中间件",
      "link": "/middleware/"
    },
    {
      "text": "Go 生态",
      "link": "/go/"
    },
    {
      "text": "安全",
      "link": "/security/"
    },
    {
      "text": "杂谈",
      "link": "/other/",
      "activeMatch": "^/other/"
    },
    {
      "text": "关于",
      "link": "/about/"
    },
    {
      "text": "示例",
      "link": "/example/markdown-examples"
    }
  ],
  "sidebar": {
    "/example": [
      {
        "text": "示例",
        "collapsed": false,
        "items": [
          {
            "text": "Markdown 示例",
            "link": "/example/markdown-examples"
          },
          {
            "text": "Runtime API 示例",
            "link": "/example/api-examples"
          }
        ]
      }
    ],
    "/other": [
      {
        "text": "前端",
        "collapsed": false,
        "items": [
          {
            "text": "TypeScript速览",
            "link": "/other/"
          }
        ]
      },
      {
        "collapsed": false,
        "items": [
          {
            "text": "2024年迷你主机折腾记录",
            "link": "/other/2024年迷你主机折腾记录"
          }
        ]
      }
    ]
  },
  "outline": {
    "label": "页面导航"
  },
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 448 512\"><title>RSS</title><path d=\"M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z\" fill=\"currentColor\"></path></svg>"
      },
      "link": "https://blog.tslj.top/feed.rss",
      "ariaLabel": "RSS"
    },
    {
      "icon": "github",
      "link": "https://github.com/tslj1024"
    },
    {
      "link": "mailto:[email protected]",
      "icon": {
        "svg": "<svg data-v-12809c3f=\"\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path data-v-12809c3f=\"\" d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline data-v-12809c3f=\"\" points=\"22,6 12,13 2,6\"></polyline></svg>"
      }
    }
  ],
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "footer": {
    "message": "<span style=\"display: inline-block\"><a href=\"https://beian.miit.gov.cn/\" target=\"_blank\">鲁ICP备2024103787号-1</a><p style=\"display: inline\"> <img src=\"/gonganlogo.png\" style=\"width:20px; height:20px; display: inline; vertical-align: middle; object-fit: contain;\"><a href=\"https://beian.mps.gov.cn/#/query/webSearch\" class=\"hover:underline\" target=\"_blank\">鲁公网安备37011202002246号</a></p></span>",
    "copyright": "<span>Copyright © 2024-2026 <a href=\"/\" >泰上老菌的炼丹房</a>. All Rights Reserved. </span>"
  },
  "search": {
    "provider": "local"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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