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
{
"lastUpdatedText": "最后更新",
"nav": [
{
"text": "首页",
"link": "/"
},
{
"text": "Java",
"link": "/java/"
},
{
"text": "前端",
"link": "/前端/"
},
{
"text": "运维",
"link": "/运维/"
},
{
"text": "Python",
"link": "/python/"
},
{
"text": "QA",
"link": "/QA/"
},
{
"text": "成长",
"link": "/成长/"
},
{
"text": "友链",
"items": [
{
"text": "二维码生成",
"link": "https://cli.im/"
},
{
"text": "文本对比",
"link": "https://www.jyshare.com/front-end/8006/"
},
{
"text": "sql压缩",
"link": "https://www.wetools.com/sql-minify"
},
{
"text": "json工具",
"link": "https://www.json.cn/json/"
},
{
"text": "东哥",
"link": "http://i.heyige.cn/interview/"
},
{
"text": "优质博客",
"link": "https://java-family.cn/#/"
}
]
}
],
"sidebar": {
"/java": [
{
"text": "介绍",
"link": "/java/index"
},
{
"text": "part1",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 众里寻他千百度-初见java",
"link": "/java/part1/01"
},
{
"text": "02 小爪说基础—标识符、变量等",
"link": "/java/part1/02"
},
{
"text": "03 小孩子才做选择—分支结构",
"link": "/java/part1/03"
},
{
"text": "04 年年岁岁花相似—循环",
"link": "/java/part1/04"
},
{
"text": "05 学厨师到XX—方法",
"link": "/java/part1/05"
},
{
"text": "06 是时候将数据组织起来了—数组",
"link": "/java/part1/06"
},
{
"text": "07 单身汪的福利—面向对象",
"link": "/java/part1/07"
},
{
"text": "08 工欲善其事必先利其器—常用类",
"link": "/java/part1/08"
},
{
"text": "09 猿生处处有意外—异常",
"link": "/java/part1/09"
},
{
"text": "10 三个愿望—集合",
"link": "/java/part1/10"
},
{
"text": "11 文件与IO",
"link": "/java/part1/11"
},
{
"text": "12 三头六臂—多线程",
"link": "/java/part1/12"
},
{
"text": "13 网络编程",
"link": "/java/part1/13"
},
{
"text": "14 反射",
"link": "/java/part1/14"
},
{
"text": "15 枚举",
"link": "/java/part1/15"
},
{
"text": "16 注解",
"link": "/java/part1/16"
},
{
"text": "17 jdk8新特性",
"link": "/java/part1/17"
}
]
},
{
"text": "part2",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 初识mysql",
"link": "/java/part2/1初识mysql"
},
{
"text": "02 了解mysql",
"link": "/java/part2/2了解mysql"
},
{
"text": "03 jdbc",
"link": "/java/part2/3jdbc"
},
{
"text": "04 数据库连接池",
"link": "/java/part2/4数据库连接池"
},
{
"text": "05 html",
"link": "/java/part2/5html"
},
{
"text": "06 css",
"link": "/java/part2/6css"
},
{
"text": "07 javascript",
"link": "/java/part2/7javascript"
},
{
"text": "08 jquery",
"link": "/java/part2/8jquery"
},
{
"text": "09 javaweb初体验",
"link": "/java/part2/9javaweb初体验"
},
{
"text": "10 servlet",
"link": "/java/part2/10servlet"
},
{
"text": "11 jsp",
"link": "/java/part2/11jsp"
},
{
"text": "12 会话跟踪",
"link": "/java/part2/12会话跟踪"
},
{
"text": "13 过滤器与监听器",
"link": "/java/part2/13过滤器与监听器"
},
{
"text": "14 上传与下载",
"link": "/java/part2/14上传与下载"
},
{
"text": "15 ajax与json",
"link": "/java/part2/15ajax与json"
},
{
"text": "16 mvc",
"link": "/java/part2/16mvc"
},
{
"text": "17 bootstrap",
"link": "/java/part2/17bootstrap"
},
{
"text": "18 javascript",
"link": "/java/part2/18layui"
},
{
"text": "10 git",
"link": "/java/part2/19git"
},
{
"text": "20 综合案例1",
"link": "/java/part2/20综合案例"
},
{
"text": "21 综合案例2",
"link": "/java/part2/21综合案例"
}
]
},
{
"text": "part3",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 mybatis",
"link": "/java/part3/1mybatis"
},
{
"text": "02 spring",
"link": "/java/part3/2spring"
},
{
"text": "03 springmvc",
"link": "/java/part3/3springmvc"
},
{
"text": "04 ssm整合案例",
"link": "/java/part3/4ssm整合案例"
},
{
"text": "05 springboot敏捷开发",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 初识sb",
"link": "/java/part3/sb/1初识sb"
}
]
},
{
"text": "06 vue入门",
"link": "/java/part3/6vue"
},
{
"text": "07 脚手架与jwt",
"link": "/java/part3/7脚手架与jwt"
},
{
"text": "08 springsecurity",
"link": "/java/part3/8springsecurity"
},
{
"text": "09 easyexcel",
"link": "/java/part3/9easyexcel"
},
{
"text": "10 oss",
"link": "/java/part3/10oss"
},
{
"text": "11 微信小程序",
"link": "/java/part3/11微信小程序"
},
{
"text": "12 vantui",
"link": "/java/part3/12vantui"
},
{
"text": "13 一个手写案例",
"link": "/java/part3/13sb+vue练习案例"
},
{
"text": "14 renren",
"link": "/java/part3/14renrenfast"
}
]
},
{
"text": "part4",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 架构演进",
"link": "/java/part4/1架构演进"
},
{
"text": "02 linux入门",
"link": "/java/part4/2linux"
},
{
"text": "03 初识docker",
"link": "/java/part4/3docker"
},
{
"text": "04 初识nginx",
"link": "/java/part4/4nginx"
},
{
"text": "05 redis",
"link": "/java/part4/5redis"
},
{
"text": "06 elasticsearch",
"link": "/java/part4/6elasticsearch"
},
{
"text": "07 nacos",
"link": "/java/part4/7nacos"
},
{
"text": "08 gateway",
"link": "/java/part4/8gateway"
},
{
"text": "09 seata",
"link": "/java/part4/9seata"
},
{
"text": "10 sentinel",
"link": "/java/part4/10sentinel"
},
{
"text": "11 oauth2",
"link": "/java/part4/11oauth2"
},
{
"text": "12 rabbitmq",
"link": "/java/part4/12rabbitmq"
},
{
"text": "13 rocket",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "1 rocketmq入门",
"link": "/java/part4/13rocketmq/1rocketmq"
},
{
"text": "2 rocket应用",
"link": "/java/part4/13rocketmq/2rocketmq"
},
{
"text": "3 rocket进阶",
"link": "/java/part4/13rocketmq/3rocketmq"
}
]
},
{
"text": "14 arthas",
"link": "/java/part4/14arthas"
}
]
},
{
"text": "show me the code",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "1 百万excel数据导出",
"link": "/java/mycode/1easyexcel"
}
]
}
],
"/前端": [
{
"text": "介绍",
"link": "/前端/index"
},
{
"text": "vue2",
"collapsible": true,
"collapsed": true,
"items": []
},
{
"text": "vue3",
"collapsible": true,
"collapsed": true,
"items": []
}
],
"运维": [
{
"text": "介绍",
"link": "/运维/index"
},
{
"text": "linux",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "1 常见指令",
"link": "/运维/linux/1常用指令"
}
]
},
{
"text": "docker相关",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "1 windows下安装环境",
"link": "/运维/docker/1docker"
}
]
},
{
"text": "其他",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "1 内网穿透",
"link": "/运维/其他/内网穿透简单用法"
}
]
}
],
"/python": [
{
"text": "介绍",
"link": "/python/index"
},
{
"text": "python基础",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "1 python基础",
"link": "/python/1python基础/1python快速入门"
}
]
}
],
"QA": [
{
"text": "软件相关",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 jdk",
"link": "/QA/软件相关/1jdk"
},
{
"text": "02 tomcat",
"link": "/QA/软件相关/2tomcat"
},
{
"text": "03 mysql",
"link": "/QA/软件相关/3mysql"
}
]
},
{
"text": "软考",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 软件设计师",
"link": "/QA/2软考/软件设计师/1刷题笔记"
},
{
"text": "02 信息系统项目管理师",
"collapsible": true,
"collapsed": true,
"items": []
},
{
"text": "03 架构师",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "01 听课笔记",
"link": "/QA/2软考/架构师/1听课笔记"
}
]
}
]
}
],
"成长": [
{
"text": "01 设计模式",
"collapsible": true,
"collapsed": true,
"items": [
{
"text": "设计模式入门",
"link": "/成长/1设计模式/设计模式"
}
]
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/vuejs/vitepress"
}
]
}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.