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": "/favicon.ico",
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "基础知识",
"link": "/basic-knowledge"
},
{
"text": "算法",
"link": "/alg"
},
{
"text": "技术",
"link": "/tech"
},
{
"text": "面试",
"link": "/interview"
}
],
"sidebar": {
"/alg/": [
{
"text": "LeetCode算法",
"link": "/alg",
"items": [
{
"text": "数据结构",
"link": "/alg/data-structure"
},
{
"text": "合并两个有序链表",
"link": "/alg/merge-two-sorted-lists"
},
{
"text": "只出现一次的数字",
"link": "/alg/single-number"
},
{
"text": "环形链表",
"link": "/alg/linked-list-cycle"
},
{
"text": "多数元素",
"link": "/alg/majority-element"
},
{
"text": "反转链表",
"link": "/alg/reverse-linked-list"
},
{
"text": "移动零",
"link": "/alg/move-zeroes"
},
{
"text": "二叉树的层序遍历",
"link": "/alg/binary-tree-level-order-traversal"
},
{
"text": "找到所有数组中消失的数字",
"link": "/alg/find-all-numbers-disappeared-in-an-array"
},
{
"text": "汉明距离",
"link": "/alg/hamming-distance"
},
{
"text": "二分查找",
"link": "/alg/base-search"
},
{
"text": "基本排序算法",
"link": "/alg/base-sort"
},
{
"text": "有效括号",
"link": "/alg/valid-parentheses"
}
]
}
],
"/tech/": [
{
"text": "技术分享",
"link": "/tech",
"items": [
{
"text": "常见Ubuntu命令",
"link": "/tech/ubuntu-command"
},
{
"text": "自动化部署",
"link": "/tech/ci-cd"
},
{
"text": "设计模式",
"link": "/tech/design-pattern",
"items": [
{
"text": "发布订阅模式",
"link": "/tech/design-pattern/publish-subscribe"
}
]
},
{
"text": "Commonjs 和 Es Module",
"link": "/tech/cjs-es"
}
]
}
],
"/interview/": [
{
"text": "面试总结",
"items": [
{
"text": "第一次记录",
"link": "/interview/"
},
{
"text": "第二次记录",
"link": "/interview/second"
},
{
"text": "第三次记录",
"link": "/interview/third"
},
{
"text": "第四次记录",
"link": "/interview/fourth"
}
]
}
],
"/basic-knowledge/": [
{
"text": "CSS",
"items": [
{
"text": "布局",
"link": "/basic-knowledge/css"
}
]
},
{
"text": "JS",
"items": [
{
"text": "JS",
"link": "/basic-knowledge/js/"
},
{
"text": "Promise",
"link": "/basic-knowledge/js/promise"
},
{
"text": "节流&防抖",
"link": "/basic-knowledge/js/debounce-throttle"
},
{
"text": "手写new",
"link": "/basic-knowledge/js/new-custom"
}
]
},
{
"text": "ES6",
"items": [
{
"text": "ES6",
"link": "/basic-knowledge/es6"
}
]
},
{
"text": "Vue",
"items": [
{
"text": "vue2",
"link": "/basic-knowledge/vue2"
}
]
},
{
"text": "Webpack",
"items": [
{
"text": "Webpack",
"link": "/basic-knowledge/webpack/"
},
{
"text": "配置",
"link": "/basic-knowledge/webpack/configuration"
}
]
},
{
"text": "Node.js",
"items": [
{
"text": "常见场景",
"link": "/basic-knowledge/nodejs"
}
]
},
{
"text": "计算机网络",
"items": [
{
"text": "http",
"link": "/basic-knowledge/network/"
},
{
"text": "websoket",
"link": "/basic-knowledge/network/websoket"
}
]
},
{
"text": "其他",
"items": [
{
"text": "SEO",
"link": "/basic-knowledge/other"
}
]
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/mantougg"
},
{
"icon": {
"svg": "<svg t=\"1723982415564\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4576\" width=\"200\" height=\"200\"><path d=\"M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m259.168-568.896h-290.752a25.28 25.28 0 0 0-25.28 25.28l-0.032 63.232c0 13.952 11.296 25.28 25.28 25.28h177.024a25.28 25.28 0 0 1 25.28 25.28v12.64a75.84 75.84 0 0 1-75.84 75.84h-240.224a25.28 25.28 0 0 1-25.28-25.28v-240.192a75.84 75.84 0 0 1 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.28l0.064-63.2a25.376 25.376 0 0 0-25.28-25.312H417.184a189.696 189.696 0 0 0-189.632 189.6v353.952c0 13.952 11.328 25.28 25.28 25.28h372.928a170.656 170.656 0 0 0 170.656-170.656v-145.376a25.28 25.28 0 0 0-25.28-25.28z\" p-id=\"4577\"></path></svg>"
},
"link": "https://gitee.com/mantoucode"
}
],
"outline": {
"level": [
2,
3
],
"label": "文章目录"
},
"footer": {
"copyright": "版权所有 © 2024-2025 WangMT",
"message": "\n <a target=\"_blank\" href=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37172302372082\">鲁公网安备37172302372082号</a>\n <a target=\"_blank\" href=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37172302372082\">鲁ICP备2023015175号-1</a>\n "
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "examples/api-examples.md",
"filePath": "examples/api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.