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>
<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
{ "siteTitle": "PixPin", "logo": "/logo.png", "logoLink": "https://pixpin.cn/", "nav": [ { "text": "主页", "link": "https://pixpin.cn" }, { "text": "使用文档", "link": "/start/what-is-pixpin" }, { "text": "更新日志", "link": "/official-log/1.9.11.html" }, { "text": "意见反馈", "link": "/about/aboutus.html#contact" } ], "sidebar": { "/": [ { "text": "开始", "items": [ { "text": "PixPin是什么", "link": "/start/what-is-pixpin" }, { "text": "快速开始", "link": "/start/quick-start" }, { "text": "会员功能", "link": "/start/pro-features" }, { "text": "常见问题", "link": "/start/faq" } ] }, { "text": "截图", "collapsed": false, "items": [ { "text": "静态截图", "link": "/capture/static-capture" }, { "text": "长截图", "link": "/capture/long-capture" }, { "text": "截动图", "link": "/capture/gif-capture2" } ] }, { "text": "贴图", "collapsed": false, "items": [ { "text": "基本使用", "link": "/pin/base-use" }, { "text": "图像", "link": "/pin/image" }, { "text": "文本", "link": "/pin/text" }, { "text": "文件", "link": "/pin/file" }, { "text": "颜色", "link": "/pin/color" }, { "text": "贴图分组", "link": "/pin/pin-group" } ] }, { "text": "标注", "collapsed": true, "items": [ { "text": "基本使用", "link": "/mark/base-use" }, { "text": "矩形/椭圆", "link": "/mark/geo" }, { "text": "直线/折线", "link": "/mark/line" }, { "text": "箭头", "link": "/mark/arrow" }, { "text": "序列号", "link": "/mark/serial" }, { "text": "铅笔", "link": "/mark/pencil" }, { "text": "荧光笔", "link": "/mark/mark-pencil" }, { "text": "马赛克/模糊", "link": "/mark/mosaic" }, { "text": "文字", "link": "/mark/text" }, { "text": "橡皮擦", "link": "/mark/erase" }, { "text": "聚光灯", "link": "/mark/highlight" }, { "text": "水印", "link": "/mark/watermark" } ] }, { "text": "设置", "collapsed": true, "items": [ { "text": "系统", "link": "/configuration/system" }, { "text": "账号", "link": "/configuration/account" }, { "text": "外观", "link": "/configuration/appearance" }, { "text": "截图", "link": "/configuration/screenshot" }, { "text": "贴图", "link": "/configuration/pin" }, { "text": "保存", "link": "/configuration/save" }, { "text": "标注", "link": "/configuration/mark" }, { "text": "快捷键/动作", "link": "/configuration/actions" }, { "text": "内置快捷键", "link": "/configuration/built-in-shortcut" }, { "text": "鼠标", "link": "/configuration/mouse" }, { "text": "全局鼠标", "link": "/configuration/global-mouse" }, { "text": "自定义工具栏", "link": "/configuration/customized-toolbar.md" }, { "text": "翻译设置", "link": "/configuration/translate-key" }, { "text": "脚本", "link": "/configuration/script" } ] }, { "text": "正式版更新日志", "collapsed": true, "items": [ { "text": "2.0.0.3", "link": "/official-log/2.0.0.3.md" }, { "text": "1.9.11", "link": "/official-log/1.9.11.md" }, { "text": "1.9.5", "link": "/official-log/1.9.5.0.md" }, { "text": "1.8.22", "link": "/official-log/1.8.22.md" } ] }, { "text": "测试版更新日志", "collapsed": true, "items": [ { "text": "测试版说明", "link": "/change-log/instructions.md" }, { "text": "2.0.0.3", "link": "/change-log/2.0.0.3.md" }, { "text": "2.0.0.2", "link": "/change-log/2.0.0.2.md" }, { "text": "2.0.0.1", "link": "/change-log/2.0.0.1.md" }, { "text": "2.0.0.0", "link": "/change-log/2.0.0.0.md" } ] }, { "text": "关于我们", "link": "/about/aboutus" } ], "/policy/": [ { "text": "协议", "items": [ { "text": "PixPin 服务协议", "link": "/policy/tos_zh_CN" }, { "text": "PixPin 隐私政策", "link": "/policy/privacy_zh_CN" }, { "text": "PixPin 会员须知", "link": "/policy/member_policy_zh_CN" } ] } ], "/licence/": [ { "text": "合作伙伴", "items": [ { "text": "数码荔枝", "link": "/licence/lychee" } ] } ] }, "socialLinks": [] }
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.