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
{
"nav": [
{
"text": "精选好文",
"link": "/blog/转载博客.md"
},
{
"text": "我的分类",
"items": [
{
"items": [
{
"text": "万花筒",
"link": "/docs/HTML/01-html介绍"
}
]
},
{
"items": [
{
"text": "见闻录",
"link": "/notes/2023月刊少女"
}
]
},
{
"items": [
{
"text": "百宝袋",
"link": "/program/awesome/awesome常用合集"
}
]
}
]
},
{
"text": "wx",
"link": "/experience/wx对接"
},
{
"text": "Drop Menu",
"items": [
{
"text": "Uniapp",
"link": "/docs/Miniapp/uniapp"
},
{
"text": "Basic setting",
"link": "/program/standard/01-baseConfig"
},
{
"text": "More Settings",
"link": "/program/standard/02-replenishConfig"
},
{
"text": "JsDoc",
"link": "/program/standard/jsdoc"
},
{
"text": "Browser",
"link": "/experience/浏览器"
}
]
}
],
"sidebar": {
"/docs/": [
{
"text": "DOCS",
"items": [
{
"text": "HTML",
"collapsed": true,
"items": [
{
"text": "html介绍",
"link": "/docs/HTML/01-html介绍",
"fileOrder": 1
},
{
"text": "meta",
"link": "/docs/HTML/02-meta",
"fileOrder": 2
},
{
"text": "a",
"link": "/docs/HTML/03-a",
"fileOrder": 3
},
{
"text": "input",
"link": "/docs/HTML/07-input",
"fileOrder": 7
}
],
"order": 0
},
{
"text": "CSS",
"collapsed": true,
"items": [
{
"text": "选择器",
"link": "/docs/CSS/03-选择器",
"fileOrder": 3
},
{
"text": "Flex布局",
"link": "/docs/CSS/04-Flex布局",
"fileOrder": 4
},
{
"text": "Grid布局",
"link": "/docs/CSS/05-Grid布局",
"fileOrder": 5
},
{
"text": "伪类",
"link": "/docs/CSS/07-伪类",
"fileOrder": 7
},
{
"text": "margin参照物",
"link": "/docs/CSS/12-margin参照物",
"fileOrder": 12
},
{
"text": "包含块",
"link": "/docs/CSS/13-包含块",
"fileOrder": 13
},
{
"text": "瀑布流布局",
"link": "/docs/CSS/14-瀑布流布局",
"fileOrder": 14
},
{
"text": "特殊css属性",
"link": "/docs/CSS/17-特殊css属性",
"fileOrder": 17
},
{
"text": "backdrop-filter",
"link": "/docs/CSS/18-backdrop-filter",
"fileOrder": 18
},
{
"text": "background",
"link": "/docs/CSS/19-background",
"fileOrder": 19
},
{
"text": "all",
"link": "/docs/CSS/20-all",
"fileOrder": 20
},
{
"text": "mask",
"link": "/docs/CSS/21-mask",
"fileOrder": 21
},
{
"text": "border",
"link": "/docs/CSS/22-border",
"fileOrder": 22
},
{
"text": "可替换元素与层叠上下文",
"link": "/docs/CSS/23-可替换元素与层叠上下文",
"fileOrder": 23
},
{
"text": "padding-block",
"link": "/docs/CSS/25-padding-block",
"fileOrder": 25
},
{
"text": "去除滚动条",
"link": "/docs/CSS/26-去除滚动条",
"fileOrder": 26
},
{
"text": "滚动穿透",
"link": "/docs/CSS/27-滚动穿透",
"fileOrder": 27
},
{
"text": "less预处理器",
"link": "/docs/CSS/28-less预处理器",
"fileOrder": 28
},
{
"text": "文字溢出",
"link": "/docs/CSS/29-文字溢出",
"fileOrder": 29
},
{
"text": "css导入",
"link": "/docs/CSS/30-css导入",
"fileOrder": 30
},
{
"text": "filter",
"link": "/docs/CSS/31-filter",
"fileOrder": 31
},
{
"text": "混合模式",
"link": "/docs/CSS/41-混合模式",
"fileOrder": 41
},
{
"text": "遗漏知识点",
"link": "/docs/CSS/79-遗漏知识点",
"fileOrder": 79
},
{
"text": "常见问题汇总",
"link": "/docs/CSS/常见问题汇总"
}
],
"order": 5
},
{
"text": "JavaScript",
"collapsed": true,
"items": [
{
"text": "好文推荐",
"link": "/docs/JavaScript/01-好文推荐",
"fileOrder": 1
},
{
"text": "ES6",
"link": "/docs/JavaScript/02-ES6",
"fileOrder": 2
},
{
"text": "事件",
"link": "/docs/JavaScript/03-事件",
"fileOrder": 3
},
{
"text": "常见内置方法",
"link": "/docs/JavaScript/04-常见内置方法",
"fileOrder": 4
},
{
"text": "this指向问题",
"link": "/docs/JavaScript/05-this指向问题",
"fileOrder": 5
},
{
"text": "原型链",
"link": "/docs/JavaScript/06-原型链",
"fileOrder": 6
},
{
"text": "原型链相关",
"link": "/docs/JavaScript/07-原型链相关",
"fileOrder": 7
},
{
"text": "连续赋值",
"link": "/docs/JavaScript/10-连续赋值",
"fileOrder": 10
},
{
"text": "DOM",
"link": "/docs/JavaScript/11-DOM",
"fileOrder": 11
},
{
"text": "Data URL",
"link": "/docs/JavaScript/12-Data URL",
"fileOrder": 12
},
{
"text": "Web API",
"link": "/docs/JavaScript/15-Web API",
"fileOrder": 15
},
{
"text": "indexedDB",
"link": "/docs/JavaScript/17-indexedDB",
"fileOrder": 17
},
{
"text": "剪切粘贴",
"link": "/docs/JavaScript/18-剪切粘贴",
"fileOrder": 18
},
{
"text": "localStorage",
"link": "/docs/JavaScript/19-localStorage",
"fileOrder": 19
},
{
"text": "执行上下文",
"link": "/docs/JavaScript/19-执行上下文",
"fileOrder": 19
},
{
"text": "File System Access API",
"link": "/docs/JavaScript/21-File System Access API",
"fileOrder": 21
},
{
"text": "JavaScript 运行时",
"link": "/docs/JavaScript/22-JavaScript 运行时",
"fileOrder": 22
},
{
"text": "export default和export",
"link": "/docs/JavaScript/24-export default和export",
"fileOrder": 24
},
{
"text": "IntersectionObserver API",
"link": "/docs/JavaScript/26-IntersectionObserver API",
"fileOrder": 26
},
{
"text": "跨标签页通信",
"link": "/docs/JavaScript/29-跨标签页通信",
"fileOrder": 29
},
{
"text": "强引用与弱引用",
"link": "/docs/JavaScript/30-强引用与弱引用",
"fileOrder": 30
},
{
"text": "设计模式-发布订阅",
"link": "/docs/JavaScript/38-设计模式-发布订阅",
"fileOrder": 38
},
{
"text": "虚拟滚动",
"link": "/docs/JavaScript/41-虚拟滚动",
"fileOrder": 41
},
{
"text": "service-worker",
"link": "/docs/JavaScript/44-service-worker",
"fileOrder": 44
},
{
"text": "Object.create和new",
"link": "/docs/JavaScript/45-Object.create和new",
"fileOrder": 45
},
{
"text": "手写系列",
"link": "/docs/JavaScript/49-手写系列",
"fileOrder": 49
},
{
"text": "compose和pipe函数",
"link": "/docs/JavaScript/50-compose和pipe函数",
"fileOrder": 50
},
{
"text": "常用工具函数",
"link": "/docs/JavaScript/59-常用工具函数",
"fileOrder": 59
}
],
"order": 10
},
{
"text": "Vue",
"collapsed": true,
"items": [
{
"text": "常用插件",
"link": "/docs/Vue/01-常用插件",
"fileOrder": 1
},
{
"text": "全局状态管理",
"link": "/docs/Vue/02-全局状态管理",
"fileOrder": 2
},
{
"text": "vite.config.js",
"link": "/docs/Vue/03-vite.config.js",
"fileOrder": 3
},
{
"text": "Transition",
"link": "/docs/Vue/06-Transition",
"fileOrder": 6
},
{
"text": "shallowRef",
"link": "/docs/Vue/07-shallowRef",
"fileOrder": 7
},
{
"text": "全局变量",
"link": "/docs/Vue/08-全局变量",
"fileOrder": 8
},
{
"text": "自定义指令",
"link": "/docs/Vue/09-自定义指令",
"fileOrder": 9
},
{
"text": "v-model",
"link": "/docs/Vue/10-v-model",
"fileOrder": 10
},
{
"text": "Hook Event",
"link": "/docs/Vue/17-Hook Event",
"fileOrder": 17
},
{
"text": "vue 中动态引入图片方案",
"link": "/docs/Vue/vue 中动态引入图片方案"
},
{
"text": "vue2中注册全局组件",
"link": "/docs/Vue/vue2中注册全局组件"
},
{
"text": "vue2构建一个ui组件库",
"link": "/docs/Vue/vue2构建一个ui组件库"
},
{
"text": "vue3父子组件传值",
"link": "/docs/Vue/vue3父子组件传值"
},
{
"text": "vue3返回上一页",
"link": "/docs/Vue/vue3返回上一页"
},
{
"text": "vue中动态更改css变量",
"link": "/docs/Vue/vue中动态更改css变量"
}
],
"order": 15
},
{
"text": "React",
"collapsed": true,
"items": [
{
"text": "创建react",
"link": "/docs/React/01-创建react",
"fileOrder": 1
},
{
"text": "jsx使用与理解",
"link": "/docs/React/02-jsx使用与理解",
"fileOrder": 2
},
{
"text": "数据流",
"link": "/docs/React/03-数据流",
"fileOrder": 3
},
{
"text": "事件处理",
"link": "/docs/React/04-事件处理",
"fileOrder": 4
},
{
"text": "react生命周期",
"link": "/docs/React/05-react生命周期",
"fileOrder": 5
},
{
"text": "逃生舱",
"link": "/docs/React/06-逃生舱",
"fileOrder": 6
},
{
"text": "Router路由",
"link": "/docs/React/10-Router路由",
"fileOrder": 10
},
{
"text": "ref",
"link": "/docs/React/11-ref",
"fileOrder": 11
},
{
"text": "hooks",
"link": "/docs/React/14-hooks",
"fileOrder": 14
},
{
"text": "router",
"link": "/docs/React/18-router",
"fileOrder": 18
},
{
"text": "状态管理",
"link": "/docs/React/19-状态管理",
"fileOrder": 19
},
{
"text": "css modules",
"link": "/docs/React/20-css modules",
"fileOrder": 20
},
{
"text": "css in js",
"link": "/docs/React/21-css in js",
"fileOrder": 21
},
{
"text": "TypeScript中使用",
"link": "/docs/React/28-TypeScript中使用",
"fileOrder": 28
},
{
"text": "使用customize-cra",
"link": "/docs/React/31-使用customize-cra",
"fileOrder": 31
},
{
"text": "Antd Form",
"link": "/docs/React/32-Antd Form",
"fileOrder": 32
},
{
"text": "Redux",
"link": "/docs/React/60-Redux",
"fileOrder": 60
},
{
"text": "Nextjs",
"link": "/docs/React/70-Nextjs",
"fileOrder": 70
},
{
"text": "八股",
"link": "/docs/React/81-八股",
"fileOrder": 81
},
{
"text": "react-use学习",
"link": "/docs/React/83-react-use学习",
"fileOrder": 83
},
{
"text": "Fiber(阅读记录)",
"link": "/docs/React/90-Fiber(阅读记录)",
"fileOrder": 90
},
{
"text": "Render流程(阅读记录)",
"link": "/docs/React/91-Render流程(阅读记录)",
"fileOrder": 91
},
{
"text": "常用三方库",
"link": "/docs/React/96-常用三方库",
"fileOrder": 96
},
{
"text": "常见问题",
"link": "/docs/React/99-常见问题",
"fileOrder": 99
},
{
"text": "必读文章",
"link": "/docs/React/100-必读文章",
"fileOrder": 100
},
{
"text": "Tips",
"link": "/docs/React/Tips"
}
],
"order": 20
},
{
"text": "TypeScript",
"collapsed": true,
"items": [
{
"text": "装饰器",
"link": "/docs/TypeScript/02-装饰器",
"fileOrder": 2
},
{
"text": "泛型",
"link": "/docs/TypeScript/03-泛型",
"fileOrder": 3
},
{
"text": "逆变与协变",
"link": "/docs/TypeScript/05-逆变与协变",
"fileOrder": 5
},
{
"text": "类型断言",
"link": "/docs/TypeScript/11-类型断言",
"fileOrder": 11
},
{
"text": "infer",
"link": "/docs/TypeScript/infer"
},
{
"text": "TS常见内置类型",
"link": "/docs/TypeScript/TS常见内置类型"
}
],
"order": 25
},
{
"text": "Webpack",
"collapsed": true,
"items": [
{
"text": "url-loader处理css图片资源问题",
"link": "/docs/Webpack/url-loader处理css图片资源问题"
}
],
"order": 30
},
{
"text": "Vite",
"collapsed": true,
"items": [
{
"text": "env",
"link": "/docs/Vite/04-env",
"fileOrder": 4
},
{
"text": "vite-plugin-svg-icons",
"link": "/docs/Vite/06-vite-plugin-svg-icons",
"fileOrder": 6
}
],
"order": 45
},
{
"text": "Miniapp",
"collapsed": true,
"items": [
{
"text": "支付宝开发常见问题汇总",
"link": "/docs/Miniapp/01-支付宝开发常见问题汇总",
"fileOrder": 1
},
{
"text": "微信开发常见问题",
"link": "/docs/Miniapp/02-微信开发常见问题",
"fileOrder": 2
},
{
"text": "微信H5支付",
"link": "/docs/Miniapp/023-微信H5支付",
"fileOrder": 23
},
{
"text": "uniapp",
"link": "/docs/Miniapp/uniapp"
}
],
"order": 55
},
{
"text": "Network",
"collapsed": true,
"items": [
{
"text": "浏览器垃圾回收机制",
"link": "/docs/Network/02-浏览器垃圾回收机制",
"fileOrder": 2
},
{
"text": "HTTP 数据传输方式",
"link": "/docs/Network/03-HTTP 数据传输方式",
"fileOrder": 3
},
{
"text": "HTTP状态码",
"link": "/docs/Network/04-HTTP状态码",
"fileOrder": 4
},
{
"text": "Q&A",
"link": "/docs/Network/Q&A"
}
],
"order": 60
},
{
"text": "Node",
"collapsed": true,
"items": [
{
"text": "CommonJs 和 ESM",
"link": "/docs/Node/01-CommonJs 和 ESM",
"fileOrder": 1
},
{
"text": "node中引入json",
"link": "/docs/Node/02-node中引入json",
"fileOrder": 2
}
],
"order": 60
},
{
"text": "Web",
"collapsed": true,
"items": [
{
"text": "浏览器跨标签页通信",
"link": "/docs/Web/03-浏览器跨标签页通信",
"fileOrder": 3
},
{
"text": "createObjectURL",
"link": "/docs/Web/05-createObjectURL",
"fileOrder": 5
},
{
"text": "IntersectionObserver 监听元素进入离开指定可视区域",
"link": "/docs/Web/IntersectionObserver 监听元素进入离开指定可视区域"
},
{
"text": "web API",
"link": "/docs/Web/web API"
}
],
"order": 70
},
{
"text": "NestJs",
"collapsed": true,
"items": [
{
"text": "认识NestJs",
"link": "/docs/NestJs/01-认识NestJs",
"fileOrder": 1
},
{
"text": "设置静态资源",
"link": "/docs/NestJs/02-设置静态资源",
"fileOrder": 2
},
{
"text": "创建crud服务",
"link": "/docs/NestJs/03-创建crud服务",
"fileOrder": 3
},
{
"text": "项目结构",
"link": "/docs/NestJs/04-项目结构",
"fileOrder": 4
},
{
"text": "认识 IOC",
"link": "/docs/NestJs/05-认识 IOC",
"fileOrder": 5
},
{
"text": "配置",
"link": "/docs/NestJs/06-配置",
"fileOrder": 6
},
{
"text": "设置全局路由前缀",
"link": "/docs/NestJs/07-设置全局路由前缀",
"fileOrder": 7
},
{
"text": "装饰器",
"link": "/docs/NestJs/08-装饰器",
"fileOrder": 8
},
{
"text": "AOP(切面编程)",
"link": "/docs/NestJs/09-AOP(切面编程)",
"fileOrder": 9
},
{
"text": "各部分执行时机",
"link": "/docs/NestJs/10-各部分执行时机",
"fileOrder": 10
},
{
"text": "各模块部分总结",
"link": "/docs/NestJs/88-各模块部分总结",
"fileOrder": 88
},
{
"text": "TypeORM",
"link": "/docs/NestJs/TypeORM"
},
{
"text": "相关文档",
"link": "/docs/NestJs/相关文档"
}
],
"order": 75
},
{
"text": "NextJs",
"collapsed": true,
"items": [
{
"text": "配置alias",
"link": "/docs/NextJs/01-配置alias",
"fileOrder": 1
},
{
"text": "NextJs文件结构及渲染",
"link": "/docs/NextJs/02-NextJs文件结构及渲染",
"fileOrder": 2
},
{
"text": "路由",
"link": "/docs/NextJs/03-路由",
"fileOrder": 3
},
{
"text": "环境变量",
"link": "/docs/NextJs/04-环境变量",
"fileOrder": 4
},
{
"text": "项目搭建",
"link": "/docs/NextJs/项目搭建"
}
],
"order": 80
},
{
"text": "AIGC",
"collapsed": true,
"items": [
{
"text": "架构图",
"link": "/docs/AIGC/03-架构图",
"fileOrder": 3
},
{
"text": "音频相关",
"link": "/docs/AIGC/04-音频相关",
"fileOrder": 4
},
{
"text": "短视频",
"link": "/docs/AIGC/05-短视频",
"fileOrder": 5
},
{
"text": "TODO",
"link": "/docs/AIGC/TODO"
},
{
"text": "TTS",
"link": "/docs/AIGC/TTS"
}
],
"order": 999
},
{
"text": "Bash",
"collapsed": true,
"items": [
{
"text": "blog教程",
"link": "/docs/Bash/blog教程"
}
],
"order": 999
},
{
"text": "Docker",
"collapsed": true,
"items": [
{
"text": " docker的使用",
"link": "/docs/Docker/01- docker的使用",
"fileOrder": 1
}
],
"order": 999
},
{
"text": "Linux",
"collapsed": true,
"items": [
{
"text": "md5sum",
"link": "/docs/Linux/04-md5sum",
"fileOrder": 4
},
{
"text": "查看进程",
"link": "/docs/Linux/05-查看进程",
"fileOrder": 5
}
],
"order": 999
},
{
"text": "Python",
"collapsed": true,
"items": [
{
"text": "使用虚拟环境",
"link": "/docs/Python/03-使用虚拟环境",
"fileOrder": 3
},
{
"text": "pipx",
"link": "/docs/Python/04-pipx",
"fileOrder": 4
},
{
"text": "Poetry",
"link": "/docs/Python/05-Poetry",
"fileOrder": 5
},
{
"text": "安装下载",
"link": "/docs/Python/安装下载"
}
],
"order": 999
}
]
}
],
"/blog/": [
{
"text": "Blog",
"items": [
{
"text": "面试宝典audition",
"link": "/blog/../blog/01-面试宝典audition",
"fileOrder": 1
},
{
"text": "AIGC",
"link": "/blog/../blog/AIGC"
},
{
"text": "AST",
"link": "/blog/../blog/AST"
},
{
"text": "enjoy",
"link": "/blog/../blog/enjoy"
},
{
"text": "tags",
"link": "/blog/../blog/tags"
},
{
"text": "转载博客",
"link": "/blog/../blog/转载博客"
},
{
"text": "阿里云服务器",
"link": "/blog/../blog/阿里云服务器"
}
]
}
]
},
"logo": "/images/logo-lev1.png",
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/alice-ti/Blog"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md",
"lastUpdated": 1748594539000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.