Appearance
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": "/"
},
{
"text": "数构与算法",
"items": [
{
"text": "数据结构",
"link": "/algorithm/data"
},
{
"text": "排序算法",
"link": "/algorithm/sort/"
},
{
"text": "力扣",
"link": "/algorithm/leetcode/"
}
]
},
{
"text": "前端",
"items": [
{
"text": "HTML5",
"link": "/web/html5/"
},
{
"text": "CSS3",
"link": "/web/css3/"
},
{
"text": "ES6",
"link": "/web/es6/"
},
{
"text": "vue2.x源码",
"link": "/web/vue2/"
},
{
"text": "vue3.x源码",
"link": "/web/vue3/"
},
{
"text": "react",
"link": "/web/react/"
},
{
"text": "node",
"link": "/web/node/"
},
{
"text": "typescript",
"link": "/web/typescript/"
},
{
"text": "webpack",
"link": "/web/webpack/"
},
{
"text": "rollup",
"link": "/web/rollup/"
},
{
"text": "mustache",
"link": "/web/mustache/"
},
{
"text": "web component",
"link": "/web/webcomponent/"
},
{
"text": "axios",
"link": "/web/axios/"
},
{
"text": "前端路由",
"link": "/web/router/"
},
{
"text": "微前端",
"link": "/web/mini/"
},
{
"text": "Canvas画图",
"link": "/web/canvas/"
}
]
},
{
"text": "经验总结",
"items": [
{
"text": "前端编程",
"link": "/experience/fronted/"
},
{
"text": "性能优化",
"link": "/experience/optimize/"
},
{
"text": "前端面试",
"link": "/experience/interview/"
},
{
"text": "设计模式",
"link": "/experience/design/"
}
]
},
{
"text": "人工智能",
"items": [
{
"text": "Python",
"link": "/ai/python/"
},
{
"text": "机器学习",
"link": "/ai/ml/"
},
{
"text": "深度学习",
"link": "/ai/dl/"
},
{
"text": "大模型",
"link": "/ai/llm/"
}
]
},
{
"text": "服务器",
"items": [
{
"text": "Ubuntu",
"link": "/server/ubuntu/"
},
{
"text": "Mysql",
"link": "/server/mysql/"
}
]
},
{
"text": "其他类",
"items": [
{
"text": "Git使用技巧",
"link": "/tool/git/"
},
{
"text": "浏览器搜索技巧",
"link": "/tool/search/"
},
{
"text": "VS CODE",
"link": "/tool/vscode/"
},
{
"text": "项目管理",
"link": "/tool/project/"
},
{
"text": "产品设计",
"link": "/tool/product/"
},
{
"text": "正则表达式",
"link": "/tool/reg/"
},
{
"text": "JS常用工具",
"link": "/tool/jstool/"
}
]
}
],
"sidebar": {
"/algorithm/data": [
{
"text": "数据结构",
"items": [
{
"text": "栈",
"link": "/algorithm/data/01-stack"
},
{
"text": "队列",
"link": "/algorithm/data/02-queue"
},
{
"text": "单向链表",
"link": "/algorithm/data/03-linked-single"
},
{
"text": "双向链表",
"link": "/algorithm/data/04-linked-double"
},
{
"text": "集合",
"link": "/algorithm/data/05-set"
},
{
"text": "字典",
"link": "/algorithm/data/06-dictionary"
},
{
"text": "哈希表",
"link": "/algorithm/data/07-hash-table"
},
{
"text": "树",
"link": "/algorithm/data/08-tree"
},
{
"text": "红黑树",
"link": "/algorithm/data/09-tree-red-black"
},
{
"text": "图结构",
"link": "/algorithm/data/10-graph"
}
]
}
],
"/algorithm/sort/": [
{
"text": "排序算法",
"items": [
{
"text": "冒泡排序",
"link": "/algorithm/sort/01-bubble"
},
{
"text": "选择排序",
"link": "/algorithm/sort/02-selection"
},
{
"text": "插入排序",
"link": "/algorithm/sort/03-insertion"
},
{
"text": "希尔排序",
"link": "/algorithm/sort/04-04-shell"
},
{
"text": "快速排序",
"link": "/algorithm/sort/05-quick"
}
]
}
],
"/algorithm/leetcode/": [
{
"text": "力扣",
"items": [
{
"text": "一、力扣100题",
"link": "/algorithm/leetcode/01-100"
},
{
"text": "二、分类刷题",
"link": "/algorithm/leetcode/02-category"
}
]
}
],
"/web/html5/": [
{
"text": "HTML5",
"items": [
{
"text": "选择器",
"link": "/web/HTML5/01-tag"
}
]
}
],
"/web/css3/": [
{
"text": "CSS3",
"items": [
{
"text": "选择器",
"link": "/web/css3/01-selector"
}
]
}
],
"/web/es6/": [
{
"text": "ES6相关教程",
"items": [
{
"text": "一、ES6基础语法",
"link": "/web/es6/01-base"
},
{
"text": "二、JS执行机制-事件环",
"link": "/web/es6/02-evenloop"
},
{
"text": "三、JS异步编程",
"link": "/web/es6/03-async"
},
{
"text": "四、Reflect",
"link": "/web/es6/04-reflect"
}
]
}
],
"/web/vue2/": [
{
"text": "Vue2核心原理",
"items": [
{
"text": "一、搭建开发环境",
"link": "/web/vue2/01-base"
},
{
"text": "二、响应式原理",
"link": "/web/vue2/02-reactive"
},
{
"text": "三、模板编译",
"link": "/web/vue2/03-compile"
},
{
"text": "四、初渲染原理",
"link": "/web/vue2/04-render"
},
{
"text": "五、生命周期的合并",
"link": "/web/vue2/05-lifecycle"
},
{
"text": "六、依赖收集",
"link": "/web/vue2/06-dep"
},
{
"text": "七、异步更新与nextTick",
"link": "/web/vue2/07-nextTick"
},
{
"text": "八、watch的原理",
"link": "/web/vue2/08-watch"
},
{
"text": "九、computed原理",
"link": "/web/vue2/09-computed"
},
{
"text": "十、Diff算法",
"link": "/web/vue2/10-diff"
},
{
"text": "十一、组件原理",
"link": "/web/vue2/11-component"
}
]
}
],
"/web/vue3/": [
{
"text": "Vue3核心原理",
"items": [
{
"text": "一、基本介绍",
"link": "/web/vue3/01-intro"
},
{
"text": "二、环境配置",
"link": "/web/vue3/02-rollup"
},
{
"text": "三、响应式原理",
"link": "/web/vue3/03-reactivity"
},
{
"text": "四、编译原理",
"link": "/web/vue3/08-compile"
}
]
}
],
"/web/react/": [
{
"text": "React",
"items": [
{
"text": "一、React面试题",
"link": "/web/react/01-interview"
},
{
"text": "二、JSX",
"link": "/web/react/02-jsx"
},
{
"text": "三、React基础",
"link": "/web/react/03-base"
},
{
"text": "四、React Hooks",
"link": "/web/react/04-hooks"
}
]
}
],
"/web/node/": [
{
"text": "Node相关",
"items": [
{
"text": "一、模块化",
"link": "/web/node/01-model"
},
{
"text": "二、npm",
"link": "/web/node/02-npm"
},
{
"text": "三、全局变量与事件环",
"link": "/web/node/03-global"
},
{
"text": "四、Buffer",
"link": "/web/node/04-buffer"
},
{
"text": "五、文件操作",
"link": "/web/node/05-fs"
},
{
"text": "六、发布订阅",
"link": "/web/node/06-event"
},
{
"text": "四、http",
"link": "/web/node/04-http"
}
]
}
],
"/web/typescript/": [
{
"text": "Typescript基础教程"
}
],
"/web/webpack/": [
{
"text": "Webpack",
"items": [
{
"text": "一、Webpack使用",
"link": "/web/webpack/01-use"
},
{
"text": "二、Webpack打包文件",
"link": "/web/webpack/02-bundle"
},
{
"text": "三、Webpack-Flow",
"link": "/web/webpack/03-flow"
},
{
"text": "四、Webpack-Loader",
"link": "/web/webpack/04-loader"
},
{
"text": "五、Webpack-Tapable",
"link": "/web/webpack/05-tapable"
},
{
"text": "六、Webpack-Plugin",
"link": "/web/webpack/06-plugin"
},
{
"text": "七、Webpack-HMR",
"link": "/web/webpack/07-hmr"
}
]
}
],
"/web/rollup/": [
{
"text": "Rollup",
"items": [
{
"text": "一、rollup使用",
"link": "/web/rollup/01-use"
},
{
"text": "二、rollup插件",
"link": "/web/rollup/02-plugin"
}
]
}
],
"/web/mustache/": [
{
"text": "Mustache"
}
],
"/web/webcomponent/": [
{
"text": "Web Component"
}
],
"/web/axios/": [
{
"text": "Axios",
"items": [
{
"text": " 一、Axios使用",
"link": "/web/axios/01-use"
},
{
"text": "二、Axios源码",
"link": "/web/axios/02-source"
}
]
}
],
"/web/router/": [
{
"text": "Router",
"items": [
{
"text": "一、Vue-router",
"link": "/web/router/01-vue"
}
]
}
],
"/web/mini/": [
{
"text": "微前端",
"items": [
{
"text": "一、微前端使用",
"link": "/web/mini/01-use"
}
]
}
],
"/web/canvas/": [
{
"text": "Canvas",
"items": [
{
"text": "一、Canvas基础",
"link": "/web/canvas/01-base"
}
]
}
],
"/tool/search/": [
{
"text": "浏览器搜索技巧",
"items": [
{
"text": "一、搜索技巧",
"link": "/tool/search/01-base"
}
]
}
],
"/tool/git/": [
{
"text": "Git",
"items": [
{
"text": "一、代码分支管理",
"link": "/tool/git/01-branch"
},
{
"text": "二、常用操作命令",
"link": "/tool/git/02-use"
}
]
}
],
"/tool/vscode/": [
{
"text": "Git",
"items": [
{
"text": "一、vscode配置Configure User Snippets",
"link": "/tool/vscode/01-snippets"
}
]
}
],
"/tool/project/": [
{
"text": "项目管理",
"items": [
{
"text": "一、项目和项目管理",
"link": "/tool/project/01-base"
},
{
"text": "二、十大知识领域",
"link": "/tool/project/02-ten"
},
{
"text": "三、项目管理技巧",
"link": "/tool/project/03-skill"
},
{
"text": "四、相关法律法规",
"link": "/tool/project/04-law"
},
{
"text": "五、专业英语词典",
"link": "/tool/project/05-dict"
},
{
"text": "六、TAT心理测试",
"link": "/tool/project/06-tat"
},
{
"text": "七、项目管理实践",
"link": "/tool/project/07-practice"
}
]
}
],
"/tool/product/": [
{
"text": "产品设计",
"items": [
{
"text": "一、产品设计概论",
"link": "/tool/product/01-base"
},
{
"text": "二、竞品分析",
"link": "/tool/product/02-competitive"
},
{
"text": "三、需求分析",
"link": "/tool/product/03-require"
},
{
"text": "四、原型设计",
"link": "/tool/product/04-pr"
},
{
"text": "五、PRD文档",
"link": "/tool/product/05-prd"
},
{
"text": "六、数据埋点",
"link": "/tool/product/06-tracking"
},
{
"text": "七、产品思维",
"link": "/tool/product/07-think"
},
{
"text": "八、人机交互",
"link": "/tool/product/08-hmi"
},
{
"text": "九、用户体验",
"link": "/tool/product/09-ue"
},
{
"text": "十、AI产品经理面试技巧",
"link": "/tool/product/10-skill"
},
{
"text": "十一、AI产品经理岗位定位分析",
"link": "/tool/product/11-job"
}
]
}
],
"/tool/reg/": [
{
"text": "正则表达式",
"items": [
{
"text": "一、常用正则表达式",
"link": "/tool/reg/01-base"
}
]
}
],
"/tool/jstool/": [
{
"text": "JS常用工具",
"items": [
{
"text": "一、JS常用工具",
"link": "/tool/jstool/01-base"
}
]
}
],
"/experience/fronted/": [
{
"text": "前端经验总结",
"items": [
{
"text": "一、Vue3项目搭建",
"link": "/experience/fronted/01-vue3"
},
{
"text": "二、微前端",
"link": "/experience/fronted/02-mini"
},
{
"text": "三、Vue3常用代码",
"link": "/experience/fronted/03-vue3-code"
}
]
}
],
"/experience/optimize/": [
{
"text": "前端性能优化",
"items": [
{
"text": "一、进程和线程",
"link": "/experience/optimize/01-process"
},
{
"text": "二、从输入 URL 到浏览器显示页面发生了什么?",
"link": "/experience/optimize/02-url"
},
{
"text": "三、模拟请求 -> 渲染流程",
"link": "/experience/optimize/03-request"
},
{
"text": "四、性能分析",
"link": "/experience/optimize/04-perfomance"
},
{
"text": "五、性能解决",
"link": "/experience/optimize/05-resolve"
}
]
}
],
"/experience/interview/": [
{
"text": "前端面试题",
"items": [
{
"text": "一、CSS",
"link": "/experience/interview/01-css"
},
{
"text": "一、手写源码",
"link": "/experience/interview/01-source"
},
{
"text": "二、面试题",
"link": "/experience/interview/02-subject"
}
]
}
],
"/experience/design/": [
{
"text": "设计模式",
"items": [
{
"text": "一、设计原则",
"link": "/experience/design/01-rule"
},
{
"text": "二、单例模式",
"link": "/experience/design/02-single"
},
{
"text": "三、装饰器模式",
"link": "/experience/design/03-decorator"
},
{
"text": "四、代理模式",
"link": "/experience/design/04-proxy"
},
{
"text": "五、外观模式",
"link": "/experience/design/05-facade"
},
{
"text": "六、观察者模式",
"link": "/experience/design/06-observer"
},
{
"text": "七、迭代器模式",
"link": "/experience/design/07-iterator"
},
{
"text": "八、状态模式",
"link": "/experience/design/08-state"
},
{
"text": "九、其他设计模式",
"link": "/experience/design/09-other"
}
]
}
],
"/ai/python/": [
{
"text": "Python",
"items": [
{
"text": "一、环境搭建",
"link": "/ai/python/01-env"
},
{
"text": "二、基础语法",
"link": "/ai/python/02-base.md"
},
{
"text": "三、与AI相关的语法",
"link": "/ai/python/03-relation.md"
}
]
}
],
"/ai/ml/": [
{
"text": "机器学习",
"items": [
{
"text": "一、机器学习基础",
"link": "/ai/ml/01-base"
},
{
"text": "二、机器学习三大任务类别",
"link": "/ai/ml/02-three"
},
{
"text": "三、机器学习类型",
"link": "/ai/ml/03-learn"
},
{
"text": "四、K邻近算法",
"link": "/ai/ml/04-knn"
},
{
"text": "五、线性回归",
"link": "/ai/ml/05-line"
},
{
"text": "六、逻辑回归",
"link": "/ai/ml/06-logistic"
},
{
"text": "七、朴素贝叶斯",
"link": "/ai/ml/07-bayes"
},
{
"text": "八、决策树与随机森林",
"link": "/ai/ml/08-tree"
},
{
"text": "九、支持向量机",
"link": "/ai/ml/09-svm"
},
{
"text": "十、分类算法应用实践",
"link": "/ai/ml/10-apply"
},
{
"text": "十一、K-means算法",
"link": "/ai/ml/11-means"
},
{
"text": "十二、AI产品落地全流程",
"link": "/ai/ml/12-workflow"
},
{
"text": "十三、AI模型构建过程",
"link": "/ai/ml/13-build"
},
{
"text": "十四、AI模型评估",
"link": "/ai/ml/14-evaluate"
},
{
"text": "十五、机器学习流程总结",
"link": "/ai/ml/15-summary"
}
]
}
],
"/ai/dl/": [
{
"text": "深度学习",
"items": [
{
"text": "一、人工智能发展历史",
"link": "/ai/dl/01-history"
},
{
"text": "二、深度学习基础",
"link": "/ai/dl/02-base"
},
{
"text": "三、感知机",
"link": "/ai/dl/03-perceptron"
},
{
"text": "四、神经元与神经网络模型",
"link": "/ai/dl/04-network"
},
{
"text": "五、自然语言处理与语言模型",
"link": "/ai/dl/05-nlp"
},
{
"text": "六、NLP与循环神经网络",
"link": "/ai/dl/06-rnn"
}
]
}
],
"/ai/llm/": [
{
"text": "大模型",
"items": [
{
"text": "01、算力与私有化部署",
"link": "/ai/llm/01-base"
},
{
"text": "02、LangChain",
"items": [
{
"text": "2.1、提示词模版",
"link": "/ai/llm/02-1-prompt"
},
{
"text": "2.2、LCEL",
"link": "/ai/llm/02-2-lcel"
}
]
},
{
"text": "03、Embedding",
"items": [
{
"text": "3.1、向量理论",
"link": "/ai/llm/03-1-embedding"
},
{
"text": "3.2、向量实操",
"link": "/ai/llm/03-2-embedding"
},
{
"text": "3.3、向量数据库",
"link": "/ai/llm/03-3-embedding-db"
}
]
},
{
"text": "04、Rag",
"items": []
},
{
"text": "05、Agent",
"items": []
},
{
"text": "06、MCP",
"items": []
},
{
"text": "07、微调",
"items": []
},
{
"text": "六、RAG技术与应用",
"link": "/ai/llm/06-rag-base"
},
{
"text": "六、RAG高级技术与实践",
"link": "/ai/llm/06-rag-senior"
},
{
"text": "六、DIfy",
"link": "/ai/llm/07-dify"
},
{
"text": "六、Coze1",
"link": "/ai/llm/08-coze1"
},
{
"text": "六、Coze2",
"link": "/ai/llm/08-coze2"
}
]
}
],
"/server/ubuntu/": [
{
"text": "Ubuntu",
"items": [
{
"text": "一、常用命令",
"link": "/server/ubuntu/01-directive"
}
]
}
],
"/server/mysql/": [
{
"text": "Mysql",
"items": [
{
"text": "一、常用SQL",
"link": "/server/mysql/01-sql"
}
]
}
]
},
"outline": {
"level": [
1,
6
],
"label": "目录"
},
"docFooter": {
"prev": "上一页",
"next": "下一页"
},
"footer": {
"message": "Released under the MIT License.",
"copyright": "Copyright © 2019-present Evan You"
},
"search": {
"provider": "local",
"options": {
"translations": {
"button": {
"buttonText": "搜索文档",
"buttonAriaLabel": "搜索文档"
},
"modal": {
"noResultsText": "无法找到相关结果",
"resetButtonTitle": "清除查询条件",
"footer": {
"selectText": "选择",
"navigateText": "切换",
"closeText": "关闭"
}
}
}
}
}
}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.