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": "/stars.png",
"search": {
"provider": "local"
},
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "前端",
"items": [
{
"text": "HTML",
"link": "/html/1"
},
{
"text": "CSS",
"link": "/css/1"
},
{
"text": "JavaScript",
"link": "/javascript/1"
},
{
"text": "ajax",
"link": "/ajax/1"
},
{
"text": "less and scss",
"link": "/less and scss/1"
},
{
"text": "TypeScript",
"link": "/typescript/1"
},
{
"text": "Vue3",
"link": "/vue3/1"
},
{
"text": "浏览器工作原理",
"link": "/browser/1"
}
]
},
{
"text": "安全",
"items": [
{
"text": "Kali",
"link": "/kali/1"
},
{
"text": "网络安全",
"link": "/network security/1"
},
{
"text": "安全设备",
"link": "/security devices/1"
}
]
},
{
"text": "Python",
"link": "/python/1"
},
{
"text": "Nodejs",
"link": "/nodejs/1"
},
{
"text": "Git",
"link": "/git/1"
},
{
"text": "Linux",
"link": "/linux/1"
}
],
"sidebar": {
"/python/": [
{
"text": "目录",
"items": [
{
"text": "Python环境搭建与输入输出",
"link": "/python/1"
},
{
"text": "Python运算符与if结构",
"link": "/python/2"
},
{
"text": "Python中的循环结构",
"link": "/python/3"
},
{
"text": "Python数据序列(一)",
"link": "/python/4"
},
{
"text": "Python数据序列(二)",
"link": "/python/5"
},
{
"text": "Python中的函数",
"link": "/python/6"
},
{
"text": "Python函数进阶",
"link": "/python/7"
},
{
"text": "Python文件操作",
"link": "/python/8"
},
{
"text": "Python面向对象",
"link": "/python/9"
},
{
"text": "Python的异常、模块以及包管理",
"link": "/python/10"
},
{
"text": "Python线程进程和协程",
"link": "/python/11"
}
]
}
],
"/nodejs/": [
{
"text": "目录",
"items": [
{
"text": "一、Node.js基础",
"link": "/nodejs/1"
},
{
"text": "二、Express",
"link": "/nodejs/2"
},
{
"text": "三、MongoDB",
"link": "/nodejs/3"
},
{
"text": "四、接口规范与业务分层",
"link": "/nodejs/4"
},
{
"text": "五、登录鉴权",
"link": "/nodejs/5"
},
{
"text": "六、文件上传管理",
"link": "/nodejs/6"
},
{
"text": "七、APIDOC - API 文档生成工具",
"link": "/nodejs/7"
},
{
"text": "八、Koa2",
"link": "/nodejs/8"
},
{
"text": "九、MySQL",
"link": "/nodejs/9"
},
{
"text": "十、Socket编程",
"link": "/nodejs/10"
},
{
"text": "十一、mocha",
"link": "/nodejs/11"
}
]
}
],
"/html/": [
{
"text": "目录",
"items": [
{
"text": "一、前序知识",
"link": "/html/1"
},
{
"text": "二、HTML 简介",
"link": "/html/2"
},
{
"text": "三、HTML 入门",
"link": "/html/3"
},
{
"text": "四、HTML 基础",
"link": "/html/4"
},
{
"text": "五、HTML5简介",
"link": "/html/5"
},
{
"text": "六、新增语义化标签",
"link": "/html/6"
},
{
"text": "七、新增表单功能",
"link": "/html/7"
},
{
"text": "八、新增多媒体标签",
"link": "/html/8"
},
{
"text": "九、新增全局属性（了解）",
"link": "/html/9"
},
{
"text": "十、HTML5兼容性处理",
"link": "/html/10"
}
]
}
],
"/css/": [
{
"text": "目录",
"items": [
{
"text": "一、CSS基础",
"link": "/css/1"
},
{
"text": "二、CSS选择器",
"link": "/css/2"
},
{
"text": "三、CSS三大特性",
"link": "/css/3"
},
{
"text": "四、CSS常用属性",
"link": "/css/4"
},
{
"text": "五、CSS盒子模型",
"link": "/css/5"
},
{
"text": "六、浮动",
"link": "/css/6"
},
{
"text": "七、定位",
"link": "/css/7"
},
{
"text": "八、布局",
"link": "/css/8"
},
{
"text": "九、CSS3 简介",
"link": "/css/9"
},
{
"text": "十、CSS3 基本语法",
"link": "/css/10"
}
]
}
],
"/javascript/": [
{
"text": "目录",
"items": [
{
"text": "-----【JavaScript 基础】-----",
"link": "/javascript/1"
},
{
"text": "介绍",
"link": "/javascript/2"
},
{
"text": "变量和常亮",
"link": "/javascript/3"
},
{
"text": "数据类型",
"link": "/javascript/4"
},
{
"text": "类型转换",
"link": "/javascript/5"
},
{
"text": "运算符",
"link": "/javascript/6"
},
{
"text": "语句",
"link": "/javascript/7"
},
{
"text": "for 语句",
"link": "/javascript/8"
},
{
"text": "数组",
"link": "/javascript/9"
},
{
"text": "函数",
"link": "/javascript/10"
},
{
"text": "-----【Web APIs】-----",
"link": "/javascript/11"
},
{
"text": "介绍",
"link": "/javascript/12"
},
{
"text": "DOM基本操作",
"link": "/javascript/13"
},
{
"text": "DOM注册事件",
"link": "/javascript/14"
},
{
"text": "事件进阶",
"link": "/javascript/15"
},
{
"text": "DOM进阶",
"link": "/javascript/16"
},
{
"text": "BOM操作",
"link": "/javascript/17"
},
{
"text": "正则表达式",
"link": "/javascript/18"
},
{
"text": "-----【JavaScript 进阶】-----",
"link": "/javascript/19"
},
{
"text": "作用域",
"link": "/javascript/20"
},
{
"text": "函数",
"link": "/javascript/21"
},
{
"text": "解构赋值",
"link": "/javascript/22"
},
{
"text": "综合案例",
"link": "/javascript/23"
},
{
"text": "深入对象",
"link": "/javascript/24"
},
{
"text": "内置构造函数",
"link": "/javascript/25"
},
{
"text": "属性描述符",
"link": "/javascript/26"
},
{
"text": "编程思想",
"link": "/javascript/27"
},
{
"text": "类",
"link": "/javascript/28"
},
{
"text": "原型对象",
"link": "/javascript/29"
},
{
"text": "面向对象综合案例",
"link": "/javascript/30"
},
{
"text": "深浅拷贝",
"link": "/javascript/31"
},
{
"text": "异常处理",
"link": "/javascript/32"
},
{
"text": "处理this",
"link": "/javascript/33"
},
{
"text": "防抖节流",
"link": "/javascript/34"
}
]
}
],
"/git/": [
{
"text": "目录",
"items": [
{
"text": "1、预前配置",
"link": "/git/1"
},
{
"text": "2、基本命令",
"link": "/git/2"
},
{
"text": "3、Git远程仓库",
"link": "/git/3"
},
{
"text": "4、快速推送",
"link": "/git/4"
}
]
}
],
"/linux/": [
{
"text": "目录",
"items": [
{
"text": "远程连接",
"link": "/linux/1"
},
{
"text": "vim编辑器",
"link": "/linux/2"
},
{
"text": "重定向/环境变量",
"link": "/linux/3"
},
{
"text": "Linux命令",
"link": "/linux/4"
},
{
"text": "用户和权限",
"link": "/linux/5"
},
{
"text": "存储和硬盘",
"link": "/linux/6"
},
{
"text": "RAID和LVM",
"link": "/linux/7"
},
{
"text": "Shell编程",
"link": "/linux/8"
},
{
"text": "进阶玩法",
"link": "/linux/9"
},
{
"text": "问题篇",
"link": "/linux/10"
}
]
}
],
"/ajax/": [
{
"text": "目录",
"items": [
{
"text": "01 【AJAX】",
"link": "/ajax/1"
},
{
"text": "02【Axios】",
"link": "/ajax/2"
},
{
"text": "03 【Fetch】",
"link": "/ajax/3"
},
{
"text": "04 【跨域初识】",
"link": "/ajax/4"
}
]
}
],
"/less and scss/": [
{
"text": "目录",
"items": [
{
"text": "LESS",
"link": "/less and scss/1"
},
{
"text": "SASS",
"link": "/less and scss/2"
}
]
}
],
"/browser/": [
{
"text": "目录",
"items": [
{
"text": "事件循环",
"link": "/browser/1"
},
{
"text": "渲染原理",
"link": "/browser/2"
},
{
"text": "CSS 属性计算过程",
"link": "/browser/3"
}
]
}
],
"/vue3/": [
{
"text": "目录",
"items": [
{
"text": "1. Vue3简介",
"link": "/vue3/1"
},
{
"text": "2. 创建Vue3工程",
"link": "/vue3/2"
},
{
"text": "3. Vue3核心语法",
"link": "/vue3/3"
},
{
"text": "4. 路由",
"link": "/vue3/4"
},
{
"text": "5. pinia ",
"link": "/vue3/5"
},
{
"text": "6. 组件通信",
"link": "/vue3/6"
},
{
"text": "7. 其它 API",
"link": "/vue3/7"
},
{
"text": "8. Vue3新组件",
"link": "/vue3/8"
}
]
}
],
"/typescript/": [
{
"text": "目录",
"items": [
{
"text": "环境配置",
"link": "/typescript/1"
},
{
"text": "基础类型",
"link": "/typescript/2"
},
{
"text": "配置与调试",
"link": "/typescript/3"
},
{
"text": "断言使用",
"link": "/typescript/4"
},
{
"text": "类与接口",
"link": "/typescript/5"
},
{
"text": "泛型 Generics",
"link": "/typescript/6"
},
{
"text": "装饰器",
"link": "/typescript/7"
},
{
"text": "模块管理",
"link": "/typescript/8"
},
{
"text": "webpack",
"link": "/typescript/9"
},
{
"text": "类型工具",
"link": "/typescript/10"
}
]
}
],
"/network security/": [
{
"text": "目录",
"items": [
{
"text": "一、dos基本命令",
"link": "/network security/1"
},
{
"text": "二、用户与组管理",
"link": "/network security/2"
},
{
"text": "三、服务器的远程管理",
"link": "/network security/3"
},
{
"text": "四、破解windows系统密码",
"link": "/network security/4"
},
{
"text": "五、NTFS安全权限",
"link": "/network security/5"
},
{
"text": "六、文件共享服务器",
"link": "/network security/6"
},
{
"text": "七、DHCP部署与安全",
"link": "/network security/7"
},
{
"text": "八、DNS部署与安全",
"link": "/network security/8"
},
{
"text": "九、WEB服务器和FTP服务器",
"link": "/network security/9"
},
{
"text": "十、域",
"link": "/network security/10"
},
{
"text": "十一、PKI",
"link": "/network security/11"
},
{
"text": "十二、扫描与爆破",
"link": "/network security/12"
}
]
}
],
"/kali/": [
{
"text": "目录",
"items": [
{
"text": "一、被动信息收集",
"link": "/kali/1"
},
{
"text": "二、主动信息收集",
"link": "/kali/2"
},
{
"text": "三、WireShark抓包及常用协议分析",
"link": "/kali/3"
},
{
"text": "四、NMAP高级使用技巧和漏洞扫描发现",
"link": "/kali/4"
},
{
"text": "五、漏洞利用",
"link": "/kali/5"
}
]
}
],
"/security devices/": [
{
"text": "目录",
"items": [
{
"text": "网络安全基础",
"link": "/security devices/1"
},
{
"text": "防火墙基础原理",
"link": "/security devices/2"
},
{
"text": "防火墙NAT",
"link": "/security devices/3"
},
{
"text": "防火墙高可靠性技术",
"link": "/security devices/4"
},
{
"text": "防火墙用户管理技术",
"link": "/security devices/5"
},
{
"text": "加解密及PKI",
"link": "/security devices/6"
},
{
"text": "VPN",
"link": "/security devices/7"
},
{
"text": "防火墙流量管理",
"link": "/security devices/8"
},
{
"text": "防火墙虚拟系统",
"link": "/security devices/9"
}
]
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/yage-zhu"
}
],
"footer": {
"copyright": "Copyright © 2024-present <a href=\"mailto:xuzn@msn.com\">xuzn@msn.com</a>"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.