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": "/logo.svg",
"langMenuLabel": "多语言",
"returnToTopLabel": "返回顶部",
"sidebarMenuLabel": "菜单",
"darkModeSwitchLabel": "主题",
"lightModeSwitchTitle": "切换到浅色模式",
"darkModeSwitchTitle": "切换到深色模式",
"outline": {
"label": "目录",
"level": "deep"
},
"nav": [
{
"text": "主页",
"link": "/"
},
{
"text": "前端",
"items": [
{
"text": "CSS相关",
"items": [
{
"text": "CSS基础",
"link": "/docs/fe-css/css-base/CSS 基础"
},
{
"text": "CSS布局",
"link": "/docs/fe-css/css-layout/Flex经典等分布局"
},
{
"text": "CSS特效",
"link": "/docs/fe-css/css-effect/文字渐变"
},
{
"text": "TailwindCSS",
"link": "/docs/fe-css/css-tailwind/TailwindCSS"
}
]
},
{
"text": "前端小组件",
"items": [
{
"text": "React小组件",
"link": "/docs/fe-small-components/react/React18-列表数据实现用户删除、批量删除"
},
{
"text": "Vue小组件",
"link": "/docs/fe-small-components/vue/Vue3---路由优化（刷新时候，在当前路由）"
}
]
},
{
"text": "React数据流",
"items": [
{
"text": "Redux",
"link": "/docs/fe-redux/1. redux 学习进阶---Redux核心"
},
{
"text": "Mobx",
"link": "/docs/fe-mobx/mobx"
},
{
"text": "Hooks.formik",
"link": "/docs/hooks.formik/0-ReactHook技巧"
}
]
},
{
"text": "前端组件化",
"link": "/docs/fe-components/受控组件与非受控组件的选用标准"
},
{
"text": "Nextjs",
"link": "/docs/fe/nextjs"
},
{
"text": "Typescript",
"link": "/docs/fe-ts/0-如何学习TS"
},
{
"text": "前端测试",
"link": "/docs/fe/test/"
},
{
"text": "数据可视化",
"link": "/docs/fe-date-visit/D3js使用"
},
{
"text": "性能优化",
"link": "/docs/fe-perfor-opt/webpack-------路径优化alias"
},
{
"text": "小程序开发",
"link": "/docs/fe-small-code/小程序开发"
},
{
"text": "微前端",
"items": [
{
"text": "微前端基础",
"link": "/docs/fe/micro-fe-base/"
},
{
"text": "微前端实战",
"link": "/docs/fe/micro-fe-demo/"
}
]
}
]
},
{
"text": "后端",
"items": [
{
"text": "Nodejs",
"items": [
{
"text": "Nodejs入门",
"link": "/docs/be/node-demo/"
},
{
"text": "Nodejs小工具",
"link": "/docs/be/node-tools/"
}
]
},
{
"text": "数据库",
"items": [
{
"text": "Mysql",
"link": "/docs/be-mysql/"
},
{
"text": "Mongodb",
"link": "/docs/be-mongodb/"
}
]
},
{
"text": "Koa",
"link": "/docs/be-koa/Koa 入门"
}
]
},
{
"text": "运维",
"items": [
{
"text": "Docker",
"link": "/docs/ops-docker/Docker"
},
{
"text": "K8s",
"link": "/docs/ops-k8s/"
}
]
},
{
"text": "所有项目",
"link": "/all-pages"
},
{
"text": "其他",
"items": [
{
"text": "代码通用缩写表",
"link": "/docs/other/代码通用缩写表/"
},
{
"text": "前端Web系统架构设计",
"link": "/docs/other/前端Web系统架构设计/"
},
{
"text": "如何搭建并部署自己的博客网站",
"link": "/docs/other/如何搭建并部署自己的博客网站/"
},
{
"text": "Anaconda常用命令",
"link": "/docs/other/Anaconda常用命令/"
}
]
}
],
"sidebar": {
"/": [
{
"text": "案例",
"collapsed": true,
"items": [
{
"text": "Markdown案例",
"link": "/markdown-examples"
},
{
"text": "Runtime API Examples",
"link": "/api-examples"
}
]
}
],
"docs/fe-css/css-base/": [
{
"text": "CSS 基础",
"link": "/docs/fe-css/css-base/CSS 基础"
}
],
"docs/fe-css/css-layout/": [
{
"text": "Flex经典等分布局",
"link": "/docs/fe-css/css-layout/Flex经典等分布局"
},
{
"text": "StickFooter布局",
"link": "/docs/fe-css/css-layout/StickFooter布局"
},
{
"text": "Table布局",
"link": "/docs/fe-css/css-layout/Table布局"
},
{
"text": "伸缩布局",
"link": "/docs/fe-css/css-layout/伸缩布局"
},
{
"text": "响应式布局",
"link": "/docs/fe-css/css-layout/响应式布局"
},
{
"text": "左右形结构",
"link": "/docs/fe-css/css-layout/左右形结构"
},
{
"text": "栅格布局",
"link": "/docs/fe-css/css-layout/栅格布局"
},
{
"text": "流式布局",
"link": "/docs/fe-css/css-layout/流式布局"
},
{
"text": "项目案例",
"link": "/docs/fe-css/css-layout/项目案例"
}
],
"docs/fe-css/css-effect/": [
{
"text": "文字渐变",
"link": "/docs/fe-css/css-effect/文字渐变"
},
{
"text": "边框渐变",
"link": "/docs/fe-css/css-effect/边框渐变"
},
{
"text": "遮罩类",
"link": "/docs/fe-css/css-effect/遮罩类"
}
],
"docs/fe-css/css-tailwind/": [
{
"text": "Antd组件库设计",
"link": "/docs/fe-css/css-tailwind/Antd组件库设计"
},
{
"text": "TailwindCSS",
"link": "/docs/fe-css/css-tailwind/TailwindCSS"
}
],
"docs/fe-redux/": [
{
"text": "1. redux 学习进阶---Redux核心",
"link": "/docs/fe-redux/1. redux 学习进阶---Redux核心"
},
{
"text": "2. redux 学习进阶---React + Redux",
"link": "/docs/fe-redux/2. redux 学习进阶---React + Redux"
},
{
"text": "3. redux 学习进阶---Redux 中间件",
"link": "/docs/fe-redux/3. redux 学习进阶---Redux 中间件"
},
{
"text": "4. redux 学习进阶---Redux常用中间件",
"link": "/docs/fe-redux/4. redux 学习进阶---Redux常用中间件"
},
{
"text": "5. redux 学习进阶---Redux shopping实战案例",
"link": "/docs/fe-redux/5. redux 学习进阶---Redux shopping实战案例"
}
],
"docs/fe-mobx/": [
{
"text": "mobx",
"link": "/docs/fe-mobx/mobx"
}
],
"docs/hooks.formik/": [
{
"text": "0-ReactHook技巧",
"link": "/docs/hooks.formik/0-ReactHook技巧"
},
{
"text": "1-react useState使用与常见问题",
"link": "/docs/hooks.formik/1-react useState使用与常见问题"
},
{
"text": "1.1-useState语法讲解",
"link": "/docs/hooks.formik/1.1-useState语法讲解"
},
{
"text": "2-react useEffect使用与常见问题",
"link": "/docs/hooks.formik/2-react useEffect使用与常见问题"
},
{
"text": "2.1-useEffect语法讲解",
"link": "/docs/hooks.formik/2.1-useEffect语法讲解"
},
{
"text": "3-react useRef使用与常见问题",
"link": "/docs/hooks.formik/3-react useRef使用与常见问题"
},
{
"text": "3.1-useRef语法讲解",
"link": "/docs/hooks.formik/3.1-useRef语法讲解"
},
{
"text": "4-react useContext使用与常见问题",
"link": "/docs/hooks.formik/4-react useContext使用与常见问题"
},
{
"text": "4.1-useContext 和 useReducer语法讲解",
"link": "/docs/hooks.formik/4.1-useContext 和 useReducer语法讲解"
},
{
"text": "5-React.memo 性能优化",
"link": "/docs/hooks.formik/5-React.memo 性能优化"
},
{
"text": "5.1-memo、 useMemo 和 useCallback语法讲解",
"link": "/docs/hooks.formik/5.1-memo、 useMemo 和 useCallback语法讲解"
},
{
"text": "6-react useCallback与useMemo函数使用与常见问题",
"link": "/docs/hooks.formik/6-react useCallback与useMemo函数使用与常见问题"
},
{
"text": "7-react useReducer使用与常见问题",
"link": "/docs/hooks.formik/7-react useReducer使用与常见问题"
},
{
"text": "8-react18并发模式与startTransition(搜索高亮思路)",
"link": "/docs/hooks.formik/8-react18并发模式与startTransition(搜索高亮思路)"
},
{
"text": "9-React18之useTransition与useDeferredValue",
"link": "/docs/hooks.formik/9-React18之useTransition与useDeferredValue"
},
{
"text": "10-函数组件功能复用之自定义HOOK",
"link": "/docs/hooks.formik/10-函数组件功能复用之自定义HOOK"
},
{
"text": "11-测试题（实操）",
"link": "/docs/hooks.formik/11-测试题（实操）"
},
{
"text": "Hooks",
"link": "/docs/hooks.formik/Hooks"
},
{
"text": "formik",
"link": "/docs/hooks.formik/formik"
}
],
"docs/fe-components/": [
{
"text": "CSS-Module",
"link": "/docs/fe-components/CSS-Module"
},
{
"text": "CSS-in-js",
"link": "/docs/fe-components/CSS-in-js"
},
{
"text": "ChakraUI",
"link": "/docs/fe-components/ChakraUI"
},
{
"text": "从MomentJs到DayJs",
"link": "/docs/fe-components/从MomentJs到DayJs"
},
{
"text": "受控组件与非受控组件的选用标准",
"link": "/docs/fe-components/受控组件与非受控组件的选用标准"
}
],
"docs/fe-date-visit/": [
{
"text": "D3js使用",
"link": "/docs/fe-date-visit/D3js使用"
}
],
"docs/fe-small-components/react": [
{
"text": "React18-列表数据实现用户删除、批量删除",
"link": "/docs/fe-small-components/react/React18-列表数据实现用户删除、批量删除"
},
{
"text": "React18-完成弹窗封装",
"link": "/docs/fe-small-components/react/React18-完成弹窗封装"
},
{
"text": "React18-树形菜单-递归",
"link": "/docs/fe-small-components/react/React18-树形菜单-递归"
},
{
"text": "React18-模拟列表数据实现基础表格功能",
"link": "/docs/fe-small-components/react/React18-模拟列表数据实现基础表格功能"
},
{
"text": "如何使用react在画布上实现redo-undo",
"link": "/docs/fe-small-components/react/如何使用react在画布上实现redo-undo"
},
{
"text": "移动端上拉加载，下拉刷新实现方案",
"link": "/docs/fe-small-components/react/移动端上拉加载，下拉刷新实现方案"
}
],
"docs/fe-small-components/vue": [
{
"text": "Vue3---路由优化（刷新时候，在当前路由）",
"link": "/docs/fe-small-components/vue/Vue3---路由优化（刷新时候，在当前路由）"
},
{
"text": "Vue组件------star组件设计",
"link": "/docs/fe-small-components/vue/Vue组件------star组件设计"
},
{
"text": "Vue组件------入离场动画",
"link": "/docs/fe-small-components/vue/Vue组件------入离场动画"
},
{
"text": "Vue组件------列表组件设计",
"link": "/docs/fe-small-components/vue/Vue组件------列表组件设计"
},
{
"text": "Vue组件------商品列表页面",
"link": "/docs/fe-small-components/vue/Vue组件------商品列表页面"
},
{
"text": "Vue组件------小标题组件设计",
"link": "/docs/fe-small-components/vue/Vue组件------小标题组件设计"
}
],
"docs/fe-perfor-opt/": [
{
"text": "webpack-------路径优化alias",
"link": "/docs/fe-perfor-opt/webpack-------路径优化alias"
},
{
"text": "图标优化-------IconMoon 图标制作",
"link": "/docs/fe-perfor-opt/图标优化-------IconMoon 图标制作"
},
{
"text": "开发过程中那些包应该放到devDependencies,dependencies",
"link": "/docs/fe-perfor-opt/开发过程中那些包应该放到devDependencies,dependencies"
}
],
"docs/fe-ts/": [
{
"text": "0-如何学习TS",
"link": "/docs/fe-ts/0-如何学习TS"
},
{
"text": "1-Typecript and React",
"link": "/docs/fe-ts/1-Typecript and React"
},
{
"text": "2-TypeScript 常用的工具类型",
"link": "/docs/fe-ts/2-TypeScript 常用的工具类型"
},
{
"text": "3-如何通过typescript写一个包",
"link": "/docs/fe-ts/3-如何通过typescript写一个包"
},
{
"text": "4-Ts中常用的引用类型",
"link": "/docs/fe-ts/4-Ts中常用的引用类型"
},
{
"text": "5-TS学习总结",
"link": "/docs/fe-ts/5-TS学习总结"
},
{
"text": "6-[前端] 简易购物车的Hook版本",
"link": "/docs/fe-ts/6-[前端] 简易购物车的Hook版本"
},
{
"text": "7-[前端]使用TS编写任务管理系统",
"link": "/docs/fe-ts/7-[前端]使用TS编写任务管理系统"
},
{
"text": "8-[后端]使用TS编写任务管理系统----Express",
"link": "/docs/fe-ts/8-[后端]使用TS编写任务管理系统----Express"
}
],
"docs/be-koa/": [
{
"text": "Koa 入门",
"link": "/docs/be-koa/Koa 入门"
},
{
"text": "Koa 原理实现",
"link": "/docs/be-koa/Koa 原理实现"
},
{
"text": "Koa 配置跨域步骤",
"link": "/docs/be-koa/Koa 配置跨域步骤"
}
],
"docs/ops-docker/": [
{
"text": "Dify金融投资接入谷歌搜索",
"link": "/docs/ops-docker/Dify金融投资接入谷歌搜索"
},
{
"text": "Dify金融投资智能体",
"link": "/docs/ops-docker/Dify金融投资智能体"
},
{
"text": "Docker",
"link": "/docs/ops-docker/Docker"
},
{
"text": "LLAM3实战",
"link": "/docs/ops-docker/LLAM3实战"
},
{
"text": "MCP开发实战",
"link": "/docs/ops-docker/MCP开发实战"
},
{
"text": "私有化部署dify入门",
"link": "/docs/ops-docker/私有化部署dify入门"
}
],
"docs/other/": [
{
"text": "Anaconda常用命令",
"link": "/docs/other/Anaconda常用命令"
},
{
"text": "api-examples",
"link": "/docs/other/api-examples"
},
{
"text": "markdown-examples",
"link": "/docs/other/markdown-examples"
},
{
"text": "代码通用缩写表",
"link": "/docs/other/代码通用缩写表"
},
{
"text": "前端Web系统架构设计",
"link": "/docs/other/前端Web系统架构设计"
},
{
"text": "如何搭建并部署自己的博客网站",
"link": "/docs/other/如何搭建并部署自己的博客网站"
}
]
},
"lastUpdated": {
"text": "更新时间",
"formatOptions": {
"dateStyle": "short",
"timeStyle": "short"
}
},
"search": {
"provider": "local",
"options": {
"translations": {
"button": {
"buttonText": "搜索",
"buttonAriaLabel": "搜索"
},
"modal": {
"searchBoxPlaceholder": "搜索文档",
"resetButtonTitle": "清除查询条件",
"closeButtonAriaLabel": "关闭搜索",
"noResultsText": "没有找到结果",
"footer": {
"selectText": "选择",
"closeText": "关闭",
"navigateText": "切换"
}
}
}
}
},
"docFooter": {
"prev": "上一篇",
"next": "下一篇"
},
"footer": {
"copyright": "Copyright © 2025 - 2025 dL-hx"
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/dL-hx"
},
{
"icon": {
"svg": "<svg t=\"1676025513460\" class=\"icon\" viewBox=\"0 0 1129 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2745\" width=\"200\" height=\"200\"><path d=\"M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0\" fill=\"#20B0E3\" p-id=\"2746\"></path><path d=\"M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0\" fill=\"#20B0E3\" p-id=\"2747\"></path></svg>"
},
"link": "https://space.bilibili.com/344263208"
},
{
"icon": {
"svg": "<svg t=\"1741495433539\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1904\" width=\"200\" height=\"200\"><path d=\"M0 0h1024v1024H0z\" fill=\"#FF6633\" p-id=\"1905\"></path><path d=\"M698.9824 42.3936c-158.8736-32.5632-289.536 31.2832-324.9152 48.5888-94.72 46.2848-147.712 108.288-174.4896 140.288-25.9584 31.0272-82.7392 105.9328-108.288 215.8592-21.6576 93.1328-10.752 167.7824-6.0416 194.2528 11.4688 64.3072 33.28 186.88 150.4256 275.2 132.5056 99.8912 293.4784 85.5552 342.9888 80.9472 107.264-10.0352 289.4848-57.2928 300.8512-145.7152 5.1712-39.936-24.4224-89.4464-66.2016-102.5024-65.6384-20.5312-108.3392 63.5392-228.6592 80.9472-8.5504 1.2288-126.5664 16.6912-216.6272-48.5888-105.8816-76.6976-98.9696-211.3024-96.256-264.3968 1.536-30.5664 5.5808-93.5424 48.128-161.8944 14.7968-23.7568 60.3136-94.5664 156.4672-134.912 25.2928-10.5984 76.8512-31.5904 144.4352-26.9824 70.0416 4.7616 120.9856 34.5088 144.4352 48.5888 75.8272 45.4144 86.528 90.0608 120.3712 86.3232 35.8912-3.9424 69.9904-59.2896 66.2016-107.9296-7.424-93.7984-155.5968-158.1056-252.8256-178.0736z\" fill=\"#FFFFFF\" p-id=\"1906\"></path></svg>"
},
"link": "https://blog.csdn.net/qq_35812380"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "docs/other/api-examples.md",
"filePath": "docs/other/api-examples.md",
"lastUpdated": 1741624563000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.