cc的学习历程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><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": "/future.png",
"nav": [
{
"text": "主页",
"link": "/"
},
{
"text": "使用样例",
"link": "/markdown-examples"
},
{
"text": "常用算法",
"link": "/views/frontend/algorithms"
},
{
"text": "其他博客",
"items": [
{
"text": "全栈工具",
"link": "https://tools.qzxdp.cn/"
},
{
"text": "全栈教程",
"link": "https://tut.qzxdp.cn/typescript/"
}
]
}
],
"sidebar": [
{
"text": "使用样例",
"items": [
{
"text": "Markdown Examples",
"link": "/markdown-examples"
},
{
"text": "Runtime API Examples",
"link": "/api-examples"
}
]
},
{
"items": [
{
"text": "📁前端",
"collapsed": true,
"items": [
{
"text": "🥨 常用算法",
"link": "/views/frontend/algorithms"
},
{
"text": "🥯 js基础",
"link": "/views/frontend/js-base"
},
{
"text": "🥞 样式合集",
"link": "/views/frontend/styleCollection"
},
{
"text": "🧇 css画悬浮球",
"link": "/views/frontend/css-ball"
},
{
"text": "🥓 vite.config配置",
"link": "/views/frontend/viteConfig"
},
{
"text": "🍟 electron-builder配置",
"link": "/views/frontend/electron-builder"
},
{
"text": "🍕 chrome-extension",
"link": "/views/frontend/chrome-extension"
},
{
"text": "🌭 canvas使用",
"link": "/views/frontend/canvas"
},
{
"text": "🥪 js页面拖拽",
"link": "/views/frontend/drag"
},
{
"text": "🌮 clickoutside指令",
"link": "/views/frontend/clickoutside"
},
{
"text": "🌯 indexDB使用",
"link": "/views/frontend/indexDB"
},
{
"text": "🥙 word前端操作",
"link": "/views/frontend/word"
},
{
"text": "🍎 excel前端操作",
"link": "/views/frontend/excel"
},
{
"text": "🍌 ant-design-vue可变列宽表格",
"link": "/views/frontend/vue-drag"
},
{
"text": "🍇 文件分片上传",
"link": "/views/frontend/file-slice"
},
{
"text": "🍊 vue-to-pdf使用",
"link": "/views/frontend/vue-to-pdf"
},
{
"text": "🍓 微信小程序中使用formdata",
"link": "/views/frontend/wx-formdata"
},
{
"text": "🍍 人脸识别",
"link": "/views/frontend/face-api"
},
{
"text": "🍑 原生webcomponent",
"link": "/views/frontend/webcomponent"
},
{
"text": "🍒 qiankun搭配vite",
"link": "/views/frontend/qiankun-vite"
},
{
"text": "🍉 消除异步传染性",
"link": "/views/frontend/async-infect"
},
{
"text": "🍋 tsconfig详细配置",
"link": "/views/frontend/tsconfig-detail"
},
{
"text": "🥝 tailwind使用",
"link": "/views/frontend/tailwind"
},
{
"text": "🍈 多行文本省略",
"link": "/views/frontend/ellipsis-text"
},
{
"text": "🥭 原生js动画",
"link": "/views/frontend/web-animation-api"
},
{
"text": "🍐 移动端事件库",
"link": "/views/frontend/hammerjs"
},
{
"text": "📁React",
"items": [
{
"text": "🍅 vite搭建React+ts",
"link": "/views/frontend/react/react-quick-start"
},
{
"text": "🍆 react实战问题",
"link": "/views/frontend/react/react-practice"
},
{
"text": "🥑 react组件复用技巧",
"link": "/views/frontend/react/react-skill"
}
]
},
{
"text": "📁Vue",
"items": [
{
"text": "🍿 vue源码解析",
"link": "/views/frontend/vue/vue-sourcecode"
},
{
"text": "🧈 自定义组件库",
"link": "/views/frontend/vue/component-lib"
},
{
"text": "🧂 vue3批量绑定ref",
"link": "/views/frontend/vue/vue-ref"
}
]
},
{
"text": "📁Typescript",
"items": [
{
"text": "🥫 TypeScript常见类型错误",
"link": "/views/frontend/typescript/type-error"
}
]
}
]
}
]
},
{
"items": [
{
"text": "📁服务端",
"collapsed": true,
"items": [
{
"text": "🍱 node中使用esm",
"link": "/views/backend/node-esm"
},
{
"text": "🍘 node操作word",
"link": "/views/backend/node-word"
},
{
"text": "🍙 node操作excel",
"link": "/views/backend/node-excel"
},
{
"text": "🍚 三方登录表结构",
"link": "/views/backend/third-table"
},
{
"text": "🍛 node中使用子进程",
"link": "/views/backend/node-child_process"
},
{
"text": "🍜 node爬虫",
"link": "/views/backend/node-crawl"
},
{
"text": "🧆 node+tensorflow",
"link": "/views/backend/node-tensorflow"
},
{
"text": "🥚 Midway",
"link": "/views/backend/midway"
},
{
"text": "📁nestjs",
"items": [
{
"text": "🍳nestjs实战",
"link": "/views/backend/nestjs/nestjs-practise"
}
]
},
{
"text": "🥘 任务队列",
"link": "/views/backend/task-manager"
},
{
"text": "🍠 pnpm使用",
"link": "/views/backend/pnpm"
}
]
}
]
},
{
"items": [
{
"text": "📁客户端",
"collapsed": true,
"items": [
{
"text": "🌶️ Election",
"link": "/views/application/electron"
},
{
"text": "🧄 Election-rebuild",
"link": "/views/application/electron-rebuild"
},
{
"text": "🧅 Election-sqlite",
"link": "/views/application/electron-sqlite"
},
{
"text": "🍄 node与动态连接库",
"link": "/views/application/node-cpp"
},
{
"text": "🥜 VScodeExtension",
"link": "/views/application/your-first-extension"
},
{
"text": "🌰 VScode调试应用",
"link": "/views/application/vscode-debug"
},
{
"text": "📁Rust",
"items": [
{
"text": "🍞 Rust基础",
"link": "/views/application/rust/rust-base"
},
{
"text": "🥐 Rust动态链接库",
"link": "/views/application/rust/rust-lib"
},
{
"text": "🥖 Rust扩展node插件",
"link": "/views/application/rust/rust-node"
},
{
"text": "🥥 Rust开发wasm",
"link": "/views/application/rust/rust-wasm"
}
]
}
]
}
]
},
{
"items": [
{
"text": "📁技术栈",
"collapsed": true,
"items": [
{
"text": "🥦 mac使用",
"link": "/views/techStack/mac"
},
{
"text": "🌽 navicat使用（mac版本）",
"link": "/views/techStack/navicat"
},
{
"text": "🥕 docker使用",
"link": "/views/techStack/docker"
},
{
"text": "🥨 bat命令",
"link": "/views/techStack/bat"
},
{
"text": "🥯 linux使用",
"link": "/views/techStack/linux"
},
{
"text": "🥞 nginx使用",
"link": "/views/techStack/nginx"
},
{
"text": "🧇 位运算",
"link": "/views/techStack/bit-operate"
},
{
"text": "🥓 vim操作",
"link": "/views/techStack/vim-operate"
},
{
"text": "🍟 methodPlug",
"link": "/views/techStack/method-plug"
},
{
"text": "🍕 日常杂记",
"link": "/views/techStack/dailyNote"
}
]
}
]
}
],
"search": {
"provider": "algolia",
"options": {
"appId": "XVMUZ4Z9UJ",
"apiKey": "f1dc8ba702a233b6fdcdb36820fcbd93",
"indexName": "zuishuaicc-gitee",
"locales": {
"root": {
"placeholder": "搜索文档",
"translations": {
"button": {
"buttonText": "搜索文档",
"buttonAriaLabel": "搜索文档"
},
"modal": {
"searchBox": {
"resetButtonTitle": "清除查询条件",
"resetButtonAriaLabel": "清除查询条件",
"cancelButtonText": "取消",
"cancelButtonAriaLabel": "取消"
},
"startScreen": {
"recentSearchesTitle": "搜索历史",
"noRecentSearchesText": "没有搜索历史",
"saveRecentSearchButtonTitle": "保存至搜索历史",
"removeRecentSearchButtonTitle": "从搜索历史中移除",
"favoriteSearchesTitle": "收藏",
"removeFavoriteSearchButtonTitle": "从收藏中移除"
},
"errorScreen": {
"titleText": "无法获取结果",
"helpText": "你可能需要检查你的网络连接"
},
"footer": {
"selectText": "选择",
"navigateText": "切换",
"closeText": "关闭",
"searchByText": "搜索提供者"
},
"noResultsScreen": {
"noResultsText": "无法找到相关结果",
"suggestedQueryText": "你可以尝试查询",
"reportMissingResultsText": "你认为该查询应该有结果？",
"reportMissingResultsLinkText": "点击反馈"
}
}
}
}
}
}
},
"outlineTitle": "本页目录",
"darkModeSwitchLabel": "切换主题",
"sidebarMenuLabel": "菜单",
"returnToTopLabel": "回到顶部",
"docFooter": {
"prev": "上一页",
"next": "下一页"
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/zuishuaicc/vite-blog"
},
{
"icon": {
"svg": "<svg height=\"32\" viewBox=\"0 0 32 32\" width=\"32\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><circle cx=\"16\" cy=\"16\" fill=\"#c71d23\" r=\"16\"/><path d=\"m24.0987698 14.2225144h-9.0863697c-.4362899.000207-.7900048.3538292-.790326.7901191l-.0005173 1.9752185c-.0003277.4363707.353328.7902117.7896987.790326.0000712 0 .0001424 0 .0002135-.0002135l5.5317648-.0000461c.4363708-.0000102.7901221.3537352.7901257.790106 0 .0000022 0 .0000044-.0000066.0000066v.1975077.1975318c0 1.3091122-1.0612451 2.3703573-2.3703573 2.3703573h-7.5067195c-.4363081-.0000218-.790009-.353713-.7900429-.7900211l-.0002069-7.5059917c-.0001014-1.3091122 1.0611145-2.3703865 2.3702267-2.3704226.0000217 0 .0000435 0 .0000653.0000653h11.0602463c.4361793-.0004902.7898484-.35394.7906091-.79011894l.0012251-1.97521881c.0007606-.43637034-.3527683-.79033806-.7891389-.79060871-.0001634-.0000001-.0003268-.00000015-.0004901.00048976h-11.0617654c-3.27278051 0-5.92589329 2.65311278-5.92589329 5.9258933v11.0612755c0 .4363707.35374837.7901191.7901191.7901191h11.65447149c2.9454379 0 5.3331872-2.3877493 5.3331872-5.3331872v-4.5430682c0-.4363707-.3537484-.7901191-.7901191-.7901191z\" fill=\"#fff\"/></g></svg>"
},
"link": "https://gitee.com/zuishuaicc/vite-blog"
}
],
"footer": {
"message": "努力成为全干型人才",
"copyright": "Copyright © 2023-present zuishuaicc"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md",
"lastUpdated": 1736082716000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.