Skip to content

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:

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

{
  "logo": "http://47.113.122.255:9000/xingchao/logo.svg",
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "前端",
      "link": "/front/vue",
      "activeMatch": "^/front/"
    },
    {
      "text": "后端",
      "link": "/back/lead",
      "activeMatch": "^/back/"
    },
    {
      "text": "毕设",
      "link": "/project/lead",
      "activeMatch": "^/project/"
    },
    {
      "text": "面试",
      "link": "/interview/lead",
      "activeMatch": "^/interview/"
    },
    {
      "text": "博客",
      "items": [
        {
          "text": "博客后台",
          "link": "http://47.113.122.255"
        },
        {
          "text": "博客后台",
          "link": "http://47.113.122.255"
        }
      ]
    },
    {
      "text": "关于",
      "link": "/about"
    }
  ],
  "sidebar": {
    "/back": [
      {
        "text": "后端",
        "items": [
          {
            "text": "导语",
            "link": "/back/lead"
          },
          {
            "text": "windows",
            "link": "/back/windows"
          },
          {
            "text": "Minio对象存储",
            "link": "/back/minio"
          },
          {
            "text": "bushu",
            "link": "/back/bushu"
          },
          {
            "text": "Frp内网穿透",
            "link": "/back/frp"
          }
        ]
      }
    ],
    "/front": [
      {
        "text": "前端",
        "items": [
          {
            "text": "vue",
            "link": "/front/vue"
          },
          {
            "text": "react",
            "link": "/front/react"
          },
          {
            "text": "js",
            "link": "/front/js"
          }
        ]
      }
    ],
    "/project": [
      {
        "text": "毕业设计",
        "items": [
          {
            "text": "引导语",
            "link": "/project/lead"
          }
        ]
      },
      {
        "text": "SpringBoot+Vue",
        "collapsed": false,
        "items": [
          {
            "text": "项目一",
            "link": "/project/one"
          },
          {
            "text": "项目二",
            "link": "/project/two"
          },
          {
            "text": "项目三",
            "link": "/project/three"
          }
        ]
      },
      {
        "text": "Python",
        "collapsed": false,
        "items": [
          {
            "text": "项目四",
            "link": "/project/four"
          },
          {
            "text": "项目五",
            "link": "/project/five"
          },
          {
            "text": "项目六",
            "link": "/project/six"
          }
        ]
      },
      {
        "text": "Java",
        "collapsed": false,
        "items": [
          {
            "text": "项目七",
            "link": "/project/seven"
          },
          {
            "text": "项目八",
            "link": "/project/eight"
          },
          {
            "text": "项目九",
            "link": "/project/nine"
          }
        ]
      }
    ],
    "/interview": [
      {
        "text": "面试八股文",
        "items": [
          {
            "text": "导语",
            "link": "/interview/lead"
          }
        ]
      },
      {
        "text": "Java",
        "collapsed": true,
        "items": [
          {
            "text": "Java基础知识",
            "link": "/interview/Java/Java基础"
          },
          {
            "text": "Java集合容器",
            "link": "/interview/Java/Java集合容器"
          },
          {
            "text": "Java异常",
            "link": "/interview/Java/Java异常"
          },
          {
            "text": "Java并发编程",
            "link": "/interview/Java/Java多线程"
          },
          {
            "text": "Java虚拟机",
            "link": "/interview/Java/JVM"
          }
        ]
      },
      {
        "text": "Spring",
        "collapsed": true,
        "items": [
          {
            "text": "SpringBoot",
            "link": "/interview/SpringBoot/SpringBoot"
          },
          {
            "text": "项目五",
            "link": "/interview/five"
          },
          {
            "text": "项目六",
            "link": "/interview/six"
          }
        ]
      },
      {
        "text": "前端",
        "collapsed": true,
        "items": [
          {
            "text": "项目四",
            "link": "/interview/four"
          },
          {
            "text": "项目五",
            "link": "/interview/five"
          },
          {
            "text": "项目六",
            "link": "/interview/six"
          }
        ]
      },
      {
        "text": "Linux",
        "collapsed": true,
        "items": [
          {
            "text": "项目七",
            "link": "/interview/seven"
          },
          {
            "text": "项目八",
            "link": "/interview/eight"
          },
          {
            "text": "项目九",
            "link": "/interview/nine"
          }
        ]
      },
      {
        "text": "数据库",
        "collapsed": true,
        "items": [
          {
            "text": "项目七",
            "link": "/interview/seven"
          },
          {
            "text": "项目八",
            "link": "/interview/eight"
          },
          {
            "text": "项目九",
            "link": "/interview/nine"
          }
        ]
      },
      {
        "text": "算法",
        "collapsed": true,
        "items": [
          {
            "text": "项目七",
            "link": "/interview/seven"
          },
          {
            "text": "项目八",
            "link": "/interview/eight"
          },
          {
            "text": "项目九",
            "link": "/interview/nine"
          }
        ]
      },
      {
        "text": "网络",
        "collapsed": true,
        "items": [
          {
            "text": "项目七",
            "link": "/interview/seven"
          },
          {
            "text": "项目八",
            "link": "/interview/eight"
          },
          {
            "text": "项目九",
            "link": "/interview/nine"
          }
        ]
      },
      {
        "text": "操作系统",
        "collapsed": true,
        "items": [
          {
            "text": "项目七",
            "link": "/interview/seven"
          },
          {
            "text": "项目八",
            "link": "/interview/eight"
          },
          {
            "text": "项目九",
            "link": "/interview/nine"
          }
        ]
      },
      {
        "text": "其他",
        "collapsed": true,
        "items": [
          {
            "text": "项目七",
            "link": "/interview/seven"
          },
          {
            "text": "项目八",
            "link": "/interview/eight"
          },
          {
            "text": "项目九",
            "link": "/interview/nine"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "wechat",
      "link": "http://47.113.122.255:9000/xingchao/wechat.jpg"
    }
  ],
  "outlineTitle": "目录",
  "outline": "deep",
  "search": {
    "provider": "local"
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2023-2050 xingchao"
  }
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "front/vue.md",
  "filePath": "front/vue.md"
}

Page Frontmatter

{
  "outline": "deep"
}

More

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

Released under the MIT License.