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
{
"logo": "https://pro-core.ali-cache.com/2023/12/diy/dev/445bc4e6/static/png/logo-ce72a09a.png",
"nav": [
{
"text": "首页",
"link": "/"
},
{
"text": "移动端规范",
"link": "/guideh5/notice.md"
},
{
"text": "后台管理规范",
"link": "/guide/button.md"
},
{
"text": "官网基础标准规范",
"link": "/website/base.md"
},
{
"text": "SDK",
"link": "/sdk/index.md"
},
{
"text": "API",
"link": "/api/index.md"
},
{
"text": "AI工程化",
"link": "/ai/index.md"
},
{
"text": "项目工程化",
"link": "/project/git-rule.md"
},
{
"text": "常见问题",
"link": "/question/index.md"
},
{
"text": "官网",
"link": "https://www.nanxihang.com/"
}
],
"sidebar": {
"/guideh5/": [
{
"text": "注意事项",
"items": [
{
"text": "注意事项",
"link": "/guideh5/notice.md"
}
]
},
{
"text": "移动端开发规范",
"items": [
{
"text": "目录说明",
"link": "/guideh5/cate.md"
},
{
"text": "开发规范",
"link": "/guideh5/code.md"
},
{
"text": "导航标题",
"link": "/guideh5/navbar-title.md"
},
{
"text": "分享能力",
"link": "/guideh5/share-btn.md"
},
{
"text": "页面缓存",
"link": "/guideh5/page-cache.md"
},
{
"text": "主题配置样式使用",
"link": "/guideh5/theme-style.md"
},
{
"text": "列表页加载逻辑",
"link": "/guideh5/page-list.md"
},
{
"text": "详情页加载逻辑",
"link": "/guideh5/page-list-detail.md"
},
{
"text": "登录跳转问题",
"link": "/guideh5/login.md"
},
{
"text": "兼容问题",
"link": "/guideh5/compatible.md"
}
]
},
{
"text": "组件规范",
"items": [
{
"text": "图片",
"link": "/guideh5/img.md"
},
{
"text": "列表",
"link": "/guideh5/list.md"
},
{
"text": "表单",
"link": "/guideh5/form.md"
},
{
"text": "轮播",
"link": "/guideh5/swiper.md"
},
{
"text": "上传",
"link": "/guideh5/upload.md"
},
{
"text": "底部导航栏",
"link": "/guideh5/tabbar.md"
},
{
"text": "瀑布流",
"link": "/guideh5/flow.md"
},
{
"text": "搜索",
"link": "/guideh5/search.md"
},
{
"text": "空状态",
"link": "/guideh5/empty.md"
},
{
"text": "隐私协议弹窗",
"link": "/guideh5/privacy-agreement.md"
},
{
"text": "富文本渲染",
"link": "/guideh5/rich-text-renderer.md"
},
{
"text": "地图",
"link": "/guideh5/tencent-map-use.md"
},
{
"text": "小程序授权信息",
"link": "/guideh5/xcx-auth-info.md"
},
{
"text": "h5授权",
"link": "/guideh5/h5-auth.md"
}
]
}
],
"/sdk/": [
{
"text": "数据上报",
"items": [
{
"text": "SDK使用",
"link": "/sdk/report.md"
}
]
},
{
"text": "前端DIY-SDK",
"items": [
{
"text": "公共",
"link": "/sdk/index.md"
},
{
"text": "登录",
"link": "/sdk/login.md"
},
{
"text": "DIY",
"link": "/sdk/diy.md"
},
{
"text": "内容",
"link": "/sdk/content.md"
},
{
"text": "优惠券",
"link": "/sdk/coupon.md"
},
{
"text": "会员卡",
"link": "/sdk/card.md"
},
{
"text": "积分",
"link": "/sdk/point.md"
},
{
"text": "用户",
"link": "/sdk/user.md"
},
{
"text": "一物一码",
"link": "/sdk/ywym.md"
},
{
"text": "表单",
"link": "/sdk/form.md"
}
]
}
],
"/api/": [
{
"text": "SDK API",
"items": [
{
"text": "全局",
"link": "/api/index.md"
},
{
"text": "主题",
"link": "/api/theme.md"
}
]
}
],
"/guide/": [
{
"text": "后台管理规范",
"items": [
{
"text": "体验规范",
"link": "/guide/general.md"
},
{
"text": "目录说明",
"link": "/guide/directory.md"
},
{
"text": "布局说明",
"link": "/guide/layout.md"
},
{
"text": "项目运行",
"link": "/guide/start.md"
},
{
"text": "变量命名规则",
"link": "/guide/variable.md"
}
]
},
{
"text": "组件使用",
"items": [
{
"text": "按钮",
"link": "/guide/button.md"
},
{
"text": "卡片",
"link": "/guide/card.md"
},
{
"text": "搜索",
"link": "/guide/search.md"
},
{
"text": "表格",
"link": "/guide/table.md"
},
{
"text": "表单",
"link": "/guide/form.md"
},
{
"text": "模态框",
"link": "/guide/modal.md"
},
{
"text": "富文本编辑器",
"link": "/guide/weditor.md"
},
{
"text": "地图选点",
"link": "/guide/mapInterface.md"
},
{
"text": "图片裁剪",
"link": "/guide/cropper-use.md"
},
{
"text": "图片编辑",
"link": "/guide/imgedit.md"
}
]
}
],
"/ai/": [],
"/website/": [
{
"text": "官网基础标准规范",
"items": [
{
"text": "基础标准",
"link": "/website/base.md"
}
]
}
],
"/project/": [
{
"text": "项目工程化",
"items": [
{
"text": "git代码仓库规则",
"link": "/project/git-rule.md"
}
]
}
]
}
}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.