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": "/logo.png",
"nav": [
{
"text": "首页",
"link": "/"
}
],
"sidebar": [
{
"text": "世界观",
"items": [
{
"text": "江湖格局",
"items": [
{
"text": "风起江湖 · 世界背景",
"link": "/01-世界观/01-江湖格局/01-游戏背景"
},
{
"text": "江湖传说 · 三绝与四剑",
"link": "/01-世界观/01-江湖格局/02-三绝四剑"
},
{
"text": "青龙会 · 混沌的秩序",
"link": "/01-世界观/01-江湖格局/03-青龙会"
},
{
"text": "🏝️ 侠客岛 · 武力的界限",
"link": "/01-世界观/01-江湖格局/04-侠客岛"
},
{
"text": "🌸 杏花村 · 生之所在",
"link": "/01-世界观/01-江湖格局/05-杏花村"
},
{
"text": "江湖的四重面相 · 理、乱、界、生",
"link": "/01-世界观/01-江湖格局/06-江湖基座"
}
],
"collapsed": true
},
{
"text": "慧剑门",
"items": [
{
"text": "🏯 澶渊之盟 · 江湖休战与命运起点",
"link": "/01-世界观/02-慧剑门/01-澶渊之盟"
},
{
"text": "魔教出昆仑",
"link": "/01-世界观/02-慧剑门/02-魔教出昆仑"
},
{
"text": "慧剑平天下，独怜梦中人",
"link": "/01-世界观/02-慧剑门/03-慧剑平天下"
},
{
"text": "🗡️ 天刀两断 · 慧剑三分",
"link": "/01-世界观/02-慧剑门/04-慧剑三分"
}
],
"collapsed": true
},
{
"text": "命运的变奏",
"items": [
{
"text": "🪐 杀·破·狼 —— 天命三星",
"link": "/01-世界观/03-命运的变奏/01-杀破狼"
},
{
"text": "☯️ 亡者线 · 往事可谏",
"link": "/01-世界观/03-命运的变奏/02-亡者线"
},
{
"text": "🕰️ 未来线 · 来者可追",
"link": "/01-世界观/03-命运的变奏/03-未来线"
},
{
"text": "☯️ 铭心照影玉 · 命运的变奏",
"link": "/01-世界观/03-命运的变奏/04-照影铭心玉"
}
],
"collapsed": true
},
{
"text": "过去",
"items": [
{
"text": "汴京游侠儿",
"link": "/01-世界观/04-过去/01-汴京游侠儿"
},
{
"text": "武曲",
"link": "/01-世界观/04-过去/02-武曲"
},
{
"text": "廉贞",
"link": "/01-世界观/04-过去/03-廉贞"
},
{
"text": "无名（游侠篇）",
"link": "/01-世界观/04-过去/04-无名（游侠篇）"
}
],
"collapsed": true
},
{
"text": "临安",
"items": [
{
"text": "小四",
"link": "/01-世界观/06-临安/04-小四"
},
{
"text": "钱芷薇（钱府千金 · 破碎贵胄）",
"link": "/01-世界观/06-临安/05-钱芷薇"
}
],
"collapsed": true
},
{
"text": "🌏 世界观总览 ",
"link": "/01-世界观/"
}
],
"collapsed": false
},
{
"text": "地图",
"items": [
{
"text": "地图索引",
"link": "/02-地图/"
}
],
"collapsed": false
},
{
"text": "伙伴",
"items": [
{
"text": "伙伴索引",
"link": "/03-伙伴/"
}
],
"collapsed": false
},
{
"text": "武学",
"items": [
{
"text": "门派",
"items": [
{
"text": "index",
"link": "/04-武学/01-门派/"
}
],
"collapsed": true
},
{
"text": "势力",
"items": [
{
"text": "index",
"link": "/04-武学/02-势力/"
}
],
"collapsed": true
},
{
"text": "武学索引",
"link": "/04-武学/"
}
],
"collapsed": false
},
{
"text": "任务",
"items": [
{
"text": "主线剧情",
"items": [
{
"text": "序章 · 命运交汇",
"link": "/05-任务/01-主线剧情/00-序章-命运交汇"
},
{
"text": "第一章 · 杏花血雨",
"link": "/05-任务/01-主线剧情/01-第一章-杏花血雨"
}
],
"collapsed": true
},
{
"text": "支线任务",
"items": [
{
"text": "🌸 杏花村 - 支线任务",
"link": "/05-任务/02-支线任务/01-杏花村"
}
],
"collapsed": true
},
{
"text": "故事",
"items": [
{
"text": "背景故事1——南北擂台",
"link": "/05-任务/03-故事/00-背景故事1——南北擂台"
},
{
"text": "背景故事2-——衡山",
"link": "/05-任务/03-故事/01-背景故事2-——衡山"
},
{
"text": "背景故事3-——独怜梦中人",
"link": "/05-任务/03-故事/02-背景故事3-——独怜梦中人"
},
{
"text": "序章杏花村—前篇10",
"link": "/05-任务/03-故事/10-序章杏花村—前篇10"
},
{
"text": "序章杏花村—后篇15",
"link": "/05-任务/03-故事/11-序章杏花村—后篇15"
},
{
"text": "序章杏花村—关卡篇",
"link": "/05-任务/03-故事/12-序章杏花村—关卡篇"
},
{
"text": "第二章汴京—侠之行（前篇）20",
"link": "/05-任务/03-故事/20-第二章汴京—侠之行（前篇）20"
},
{
"text": "第二章杭州—侠之行（后篇）30",
"link": "/05-任务/03-故事/21-第二章杭州—侠之行（后篇）30"
},
{
"text": "第二章杭州—支线篇",
"link": "/05-任务/03-故事/22-第二章杭州—支线篇"
},
{
"text": "第三章汴京——侠之金（前篇）35",
"link": "/05-任务/03-故事/30-第三章汴京——侠之金（前篇）35"
},
{
"text": "第三章雁门关——侠之金（后篇）40",
"link": "/05-任务/03-故事/31-第三章雁门关——侠之金（后篇）40"
},
{
"text": "第三章雁门关—关卡篇",
"link": "/05-任务/03-故事/32-第三章雁门关—关卡篇"
},
{
"text": "第四章丐帮1——侠之帮",
"link": "/05-任务/03-故事/40-第四章丐帮1——侠之帮"
},
{
"text": "第四章丐帮2——侠之帮",
"link": "/05-任务/03-故事/41-第四章丐帮2——侠之帮"
},
{
"text": "第四章丐帮3——侠之帮",
"link": "/05-任务/03-故事/42-第四章丐帮3——侠之帮"
},
{
"text": "第五章西夏1——侠之情",
"link": "/05-任务/03-故事/50-第五章西夏1——侠之情"
},
{
"text": "第五章西夏2——侠之情",
"link": "/05-任务/03-故事/51-第五章西夏2——侠之情"
},
{
"text": "第五章西夏3——侠之情",
"link": "/05-任务/03-故事/52-第五章西夏3——侠之情"
},
{
"text": "第六章剑门关1——侠之生",
"link": "/05-任务/03-故事/60-第六章剑门关1——侠之生"
},
{
"text": "第六章剑门关2——侠之生",
"link": "/05-任务/03-故事/61-第六章剑门关2——侠之生"
},
{
"text": "第六章剑门关3——侠之生",
"link": "/05-任务/03-故事/62-第六章剑门关3——侠之生"
},
{
"text": "第七章成都1——侠之戏",
"link": "/05-任务/03-故事/70-第七章成都1——侠之戏"
},
{
"text": "第七章成都2——侠之戏",
"link": "/05-任务/03-故事/71-第七章成都2——侠之戏"
},
{
"text": "第七章成都3——侠之戏",
"link": "/05-任务/03-故事/72-第七章成都3——侠之戏"
},
{
"text": "故事索引",
"link": "/05-任务/03-故事/"
},
{
"text": "《风起江湖》剧情赏析 ",
"link": "/05-任务/03-故事/《风起江湖》剧情赏析"
}
],
"collapsed": true
},
{
"text": "主线任务",
"link": "/05-任务/04-主线任务"
},
{
"text": "任务索引",
"link": "/05-任务/"
}
],
"collapsed": false
},
{
"text": "技艺",
"items": [
{
"text": "生活技能",
"link": "/06-技艺/01-生活技能"
},
{
"text": "秘技",
"link": "/06-技艺/02-秘技"
},
{
"text": "天赋",
"link": "/06-技艺/03-天赋"
},
{
"text": "技艺索引",
"link": "/06-技艺/"
}
],
"collapsed": false
},
{
"text": "其他",
"items": [
{
"text": "test",
"items": [
{
"text": "shop",
"link": "/07-其他/01-test/06-shop"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "经脉",
"items": [
{
"text": "经脉索引",
"link": "/07-经脉/"
}
],
"collapsed": false
},
{
"text": "日常",
"items": [
{
"text": "副本索引",
"link": "/20-日常/01-副本"
},
{
"text": "日常与活动",
"link": "/20-日常/"
},
{
"text": "活动",
"items": [
{
"text": "九曲连环坞",
"link": "/20-日常/活动/九曲"
},
{
"text": "华山论剑",
"link": "/20-日常/活动/华山论剑"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "攻略",
"items": [
{
"text": "FAQ",
"link": "/30-攻略/FAQ"
},
{
"text": "攻略指南",
"link": "/30-攻略/"
}
],
"collapsed": false
},
{
"text": "其他",
"items": [
{
"text": "其他",
"link": "/40-其他/"
}
],
"collapsed": false
},
{
"text": "test",
"items": [
{
"text": "game",
"items": [
{
"text": "RichText",
"link": "/50-test/game/01-RichText"
},
{
"text": "shop",
"link": "/50-test/game/06-shop"
},
{
"text": "npc",
"link": "/50-test/game/08-npc"
},
{
"text": "task",
"link": "/50-test/game/10-task"
},
{
"text": "taskmain",
"link": "/50-test/game/11-taskmain"
},
{
"text": "base",
"items": [
{
"text": "item",
"link": "/50-test/game/base/01-item"
},
{
"text": "item2",
"link": "/50-test/game/base/01-item2"
},
{
"text": "money",
"link": "/50-test/game/base/02-money"
},
{
"text": "moneycard",
"link": "/50-test/game/base/02-moneycard"
},
{
"text": "skill",
"link": "/50-test/game/base/03-skill"
},
{
"text": "skill2",
"link": "/50-test/game/base/03-skill2"
},
{
"text": "skillgridtype",
"link": "/50-test/game/base/04-skillgridtype"
},
{
"text": "SkillGridSecretSchoolTabs",
"link": "/50-test/game/base/05-SkillGridSecretSchoolTabs"
},
{
"text": "reward",
"link": "/50-test/game/base/07-reward"
},
{
"text": "reward2",
"link": "/50-test/game/base/08-reward2"
}
],
"collapsed": true
},
{
"text": "scene",
"items": [
{
"text": "scene",
"link": "/50-test/game/scene/01-scene"
},
{
"text": "scene2",
"link": "/50-test/game/scene/02-scene2"
},
{
"text": "collect",
"link": "/50-test/game/scene/05-collect"
},
{
"text": "sceneNpc",
"link": "/50-test/game/scene/09-sceneNpc"
},
{
"text": "sceneTask",
"link": "/50-test/game/scene/11-sceneTask"
},
{
"text": "sceneTele",
"link": "/50-test/game/scene/12-sceneTele"
},
{
"text": "teleType",
"link": "/50-test/game/scene/12-teleType"
},
{
"text": "sceneTabs",
"link": "/50-test/game/scene/14-sceneTabs"
},
{
"text": "sceneArea",
"link": "/50-test/game/scene/15-sceneArea"
},
{
"text": "sceneAreaTabs",
"link": "/50-test/game/scene/16-sceneAreaTabs"
},
{
"text": "sceneAreaTabsGrouped",
"link": "/50-test/game/scene/17-sceneAreaTabsGrouped"
},
{
"text": "SceneAreaTabsXls",
"link": "/50-test/game/scene/18-SceneAreaTabsXls"
}
],
"collapsed": true
},
{
"text": "taolu",
"items": [
{
"text": "taolu",
"link": "/50-test/game/taolu/04-taolu"
},
{
"text": "taolulist",
"link": "/50-test/game/taolu/05-taolulist"
},
{
"text": "schooltaolu",
"link": "/50-test/game/taolu/06-schooltaolu"
},
{
"text": "schooltaolutabs",
"link": "/50-test/game/taolu/07-schooltaolutabs"
},
{
"text": "schooltaolutabstabs",
"link": "/50-test/game/taolu/08-schooltaolutabstabs"
}
],
"collapsed": true
},
{
"text": "world",
"items": [
{
"text": "wmapitem",
"link": "/50-test/game/world/01-wmapitem"
},
{
"text": "wmap",
"link": "/50-test/game/world/02-wmap"
},
{
"text": "wmapscenes",
"link": "/50-test/game/world/03-wmapscenes"
}
],
"collapsed": true
}
],
"collapsed": true
},
{
"text": "md",
"items": [
{
"text": "颜色测试",
"link": "/50-test/md/01-color"
},
{
"text": "江湖block测试",
"link": "/50-test/md/02-jianghu"
},
{
"text": "人物卡片测试",
"link": "/50-test/md/03-person"
},
{
"text": "诗句测试",
"link": "/50-test/md/04-poem"
},
{
"text": "mermaid",
"link": "/50-test/md/05-mermaid"
},
{
"text": "tabs",
"link": "/50-test/md/06-tabs"
},
{
"text": "Discuss 测试页",
"link": "/50-test/md/07-discuss"
}
],
"collapsed": true
},
{
"text": "naive",
"items": [
{
"text": "测试 Message",
"link": "/50-test/naive/01-button"
},
{
"text": "tooltips",
"link": "/50-test/naive/08-tooltips"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "开发",
"items": [
{
"text": "学习资料",
"items": [
{
"text": "Runtime API Examples",
"link": "/60-开发/01-学习资料/api-examples"
},
{
"text": "Markdown Examples",
"link": "/60-开发/01-学习资料/markdown-examples"
}
],
"collapsed": true
},
{
"text": "开发日志",
"items": [
{
"text": "Vue 组件开发 — 阶段总结",
"link": "/60-开发/09-开发日志/2025-10-10--vue组件开发"
},
{
"text": "从历史看清 CSR 与 SSR ",
"link": "/60-开发/09-开发日志/2025-11-01--从历史看清_CSR与SSR"
},
{
"text": "说UE渲染强是在说什么",
"link": "/60-开发/09-开发日志/2025-11-05--说UE渲染强是在说什么"
},
{
"text": "📘 日志系统最佳实践 ",
"link": "/60-开发/09-开发日志/2025-11-22--日志实践"
},
{
"text": "当 Egret 进入深水区",
"link": "/60-开发/09-开发日志/2025-11-23--当 Egret 进入深水区"
},
{
"text": "Electron 为什么“手感差”？",
"link": "/60-开发/09-开发日志/2025-12-06--Electron 做工具 UI"
},
{
"text": "tsconfig.json 新手配置",
"link": "/60-开发/09-开发日志/2025-12-06--tsconfig新手配置"
}
],
"collapsed": true
},
{
"text": "ChatGPT 笔记革命 ",
"link": "/60-开发/ChatGPT记笔记"
},
{
"text": "Discuss 评论组件",
"link": "/60-开发/Discuss评论组件"
},
{
"text": "给 AI 写词",
"link": "/60-开发/给 AI 写词"
}
],
"collapsed": false
}
],
"search": {
"provider": "local"
},
"socialLinks": [],
"footer": {
"message": "风起江湖 · 资料站",
"copyright": "© 2025"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "60-开发/01-学习资料/api-examples.md",
"filePath": "60-开发/01-学习资料/api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.