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": "Home",
"link": "/"
},
{
"text": "About",
"link": "/note/about"
},
{
"text": "Tags",
"link": "/note/tags"
},
{
"text": "ChangeLog",
"link": "/note/changelog"
}
],
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/livebug"
}
],
"outline": {
"level": [
2,
4
]
},
"commitRepoUrl": "https://github.com/livebug/vpblogs/",
"sidebar": {
"/learn/": {
"base": "/learn/",
"items": [
{
"text": "Vitepress",
"items": [
{
"text": "VitePress 动态侧边栏插件",
"link": "vitepress/2025-01-11_vitepress_sidebar_autosider_extention"
},
{
"text": "Vitepress 部署发布到 github pages",
"link": "vitepress/2025-01-12_vitepress_deploy_to_gitpages"
},
{
"text": "Vitepress 时间轴组件 用于展示git提交信息",
"link": "vitepress/2025-02-09_vitepress_customcomp_timeline"
},
{
"text": "Vitepress 增加标签功能",
"link": "vitepress/2025-02-22_vitepress_addtagspage"
},
{
"text": "Vitepress 增加返回顶部功能",
"link": "vitepress/2025-05-25-add-backtotop"
}
],
"collapsed": false
},
{
"text": "VSCodeEx",
"items": [
{
"text": "第一课 前提简介",
"link": "VSCodeEx/2025-03-24-vscode-ex01"
},
{
"text": "第二课 Tasks 使用",
"link": "VSCodeEx/2025-03-27-vscode-tasks"
},
{
"text": "课外 字体推荐-中文英文等宽",
"link": "VSCodeEx/2025-04-04-vscode-font"
},
{
"text": "VSCODE 插件开发第二课",
"link": "VSCodeEx/2025-05-03-vscode-ex02"
},
{
"text": "VSCode 插件开发 第三课 语言服务器LSP",
"link": "VSCodeEx/2025-05-04-vscode-ex03"
},
{
"text": "VSCODE 插件开发第四课-打包",
"link": "VSCodeEx/2025-07-29-vscode-ex04-vsce"
}
],
"collapsed": false
},
{
"text": "Golang",
"items": [
{
"text": "Golang 离线使用",
"link": "Golang/2025-03-25-go-goproxy"
},
{
"text": "Go 基础使用",
"link": "Golang/2025-04-06-go-baseusage"
},
{
"text": "Golang 小白扩展",
"link": "Golang/2025-04-24-go-base"
}
],
"collapsed": false
},
{
"text": "Docker",
"items": [
{
"text": "Docker run 手册",
"link": "Docker/2025-04-19-docker-run-usage"
},
{
"text": "使用 Docker 运行 Verdaccio",
"link": "Docker/2025-05-18-install-verdaccio"
},
{
"text": "Snap的docker是如何换源",
"link": "Docker/2025-05-25-docker-mirrors"
}
],
"collapsed": false
},
{
"text": "Antlr4",
"items": [
{
"text": " Antlr4 基础介绍",
"link": "Antlr4/2023-10-08-antlr-base"
},
{
"text": "Antlr4 python 使用",
"link": "Antlr4/2025-02-15_antlr4_python_learn01"
},
{
"text": "Go-antlr4-sql sql 语句分析",
"link": "Antlr4/2025-05-03-antlr4-sql-go"
}
],
"collapsed": false
},
{
"text": "Poweshell 基础使用",
"link": "2025-03-31-powershell-usage"
},
{
"text": "Python3 基础学习",
"link": "2025-02-19_python3_baseLearning"
},
{
"text": "Obsidian 使用",
"link": "2025-02-04_Obsidian_baseuse"
},
{
"text": "Vue3 使用 mockjs 模拟api数据",
"link": "2025-01-18_vue3_mockjs"
},
{
"text": "自建 pip 私有源",
"link": "2024-03-29-pip-server-self"
},
{
"text": "Linux 使用代理以及遇到的问题",
"link": "2024-02-25-linux-proxy-common-questions"
},
{
"text": "Github Sync 433 Error",
"link": "2024-01-31-github-sync-433-error"
},
{
"text": "WSL2配置代理",
"link": "2024-01-08-set-wsl2-net-proxy"
},
{
"text": "Asp.net Identity Solution",
"link": "2023-12-21-asp.net-identity-solution"
},
{
"text": "Asp.net Identity Choose an Identity Management Solution",
"link": "2023-12-21-asp.net-identity-Choose-an-identity-management-solution"
},
{
"text": "Asp.net Auth 身份验证与授权基本认识",
"link": "2023-12-17-asp.net-auth"
},
{
"text": "Openiddict Base Introduce",
"link": "2023-11-12-openiddict-base-introduce"
},
{
"text": "Categories和types有什么区别吗",
"link": "2023-10-08-diff-category-tags"
},
{
"text": "Css—用户代理样式表",
"link": "2023-10-03-css-web-browser-style"
},
{
"text": "使用 Github Actions 自动化发布博客",
"link": "2023-09-30-github-actions"
},
{
"text": "Gitee增加ssh 实现免密访问",
"link": "2023-09-22-gitee-add-sshkey"
},
{
"text": "正则表达式-先行断言(lookahead)和后行断言(lookbehind)",
"link": "2023-09-17-regexp-lookahead"
},
{
"text": "Wsl环境初始化-安装nvm",
"link": "2023-09-09-wsl-init-devenv"
},
{
"text": "Sql语言脚本开发-语法突出",
"link": "2023-09-09-vscode-sqllang"
},
{
"text": "Ssh基本介绍和问题解答",
"link": "2023-08-27-ssh-connect"
},
{
"text": "Fedora安装docker",
"link": "2023-04-26-fedora-install-docker"
},
{
"text": "Fedora打开Samba端口",
"link": "2023-04-25-fedora-open-sambaport-firewall"
},
{
"text": "Fedora系统安装后的基本操作",
"link": "2023-04-22-fedoraInstall"
}
]
},
"/note/": {
"base": "/note/",
"items": [
{
"text": "标签页",
"link": "tags"
},
{
"text": "Jitiao",
"link": "jitiao"
},
{
"text": "本网站版本记录",
"link": "changelog"
},
{
"text": "About",
"link": "about"
}
]
},
"/think/": {
"base": "/think/",
"items": [
{
"text": "开发工具箱",
"items": [
{
"text": "开发工具箱-远程执行 RemoteRun",
"link": "开发工具箱/20250420-livebug.dev-001.md"
}
],
"collapsed": false
},
{
"text": "个人博客系统的想法",
"link": "20250204_blogs_ideas"
}
]
},
"/write/": {
"base": "/write/",
"items": []
},
"/": {
"base": "/",
"items": [
{
"text": "Some examples",
"link": "examples/index.md",
"items": [
{
"text": "Runtime API Examples",
"link": "examples/api-examples"
},
{
"text": "Markdown Extension Examples",
"link": "examples/markdown-examples"
},
{
"text": "模板文章名称",
"link": "examples/template"
}
],
"collapsed": false
},
{
"text": "学习",
"link": "learn/index.md",
"items": [
{
"text": "Fedora系统安装后的基本操作",
"link": "learn/2023-04-22-fedoraInstall"
},
{
"text": "Fedora打开Samba端口",
"link": "learn/2023-04-25-fedora-open-sambaport-firewall"
},
{
"text": "Fedora安装docker",
"link": "learn/2023-04-26-fedora-install-docker"
},
{
"text": "Ssh基本介绍和问题解答",
"link": "learn/2023-08-27-ssh-connect"
},
{
"text": "Sql语言脚本开发-语法突出",
"link": "learn/2023-09-09-vscode-sqllang"
},
{
"text": "Wsl环境初始化-安装nvm",
"link": "learn/2023-09-09-wsl-init-devenv"
},
{
"text": "正则表达式-先行断言(lookahead)和后行断言(lookbehind)",
"link": "learn/2023-09-17-regexp-lookahead"
},
{
"text": "Gitee增加ssh 实现免密访问",
"link": "learn/2023-09-22-gitee-add-sshkey"
},
{
"text": "使用 Github Actions 自动化发布博客",
"link": "learn/2023-09-30-github-actions"
},
{
"text": "Css—用户代理样式表",
"link": "learn/2023-10-03-css-web-browser-style"
},
{
"text": "Categories和types有什么区别吗",
"link": "learn/2023-10-08-diff-category-tags"
},
{
"text": "Openiddict Base Introduce",
"link": "learn/2023-11-12-openiddict-base-introduce"
},
{
"text": "Asp.net Auth 身份验证与授权基本认识",
"link": "learn/2023-12-17-asp.net-auth"
},
{
"text": "Asp.net Identity Choose an Identity Management Solution",
"link": "learn/2023-12-21-asp.net-identity-Choose-an-identity-management-solution"
},
{
"text": "Asp.net Identity Solution",
"link": "learn/2023-12-21-asp.net-identity-solution"
},
{
"text": "WSL2配置代理",
"link": "learn/2024-01-08-set-wsl2-net-proxy"
},
{
"text": "Github Sync 433 Error",
"link": "learn/2024-01-31-github-sync-433-error"
},
{
"text": "Linux 使用代理以及遇到的问题",
"link": "learn/2024-02-25-linux-proxy-common-questions"
},
{
"text": "自建 pip 私有源",
"link": "learn/2024-03-29-pip-server-self"
},
{
"text": "Vue3 使用 mockjs 模拟api数据",
"link": "learn/2025-01-18_vue3_mockjs"
},
{
"text": "Obsidian 使用",
"link": "learn/2025-02-04_Obsidian_baseuse"
},
{
"text": "Python3 基础学习",
"link": "learn/2025-02-19_python3_baseLearning"
},
{
"text": "Poweshell 基础使用",
"link": "learn/2025-03-31-powershell-usage"
},
{
"text": "Antlr4",
"items": [
{
"text": " Antlr4 基础介绍",
"link": "learn/Antlr4/2023-10-08-antlr-base"
},
{
"text": "Antlr4 python 使用",
"link": "learn/Antlr4/2025-02-15_antlr4_python_learn01"
},
{
"text": "Go-antlr4-sql sql 语句分析",
"link": "learn/Antlr4/2025-05-03-antlr4-sql-go"
}
],
"collapsed": false
},
{
"text": "Docker",
"items": [
{
"text": "Docker run 手册",
"link": "learn/Docker/2025-04-19-docker-run-usage"
},
{
"text": "使用 Docker 运行 Verdaccio",
"link": "learn/Docker/2025-05-18-install-verdaccio"
},
{
"text": "Snap的docker是如何换源",
"link": "learn/Docker/2025-05-25-docker-mirrors"
}
],
"collapsed": false
},
{
"text": "Golang",
"items": [
{
"text": "Golang 离线使用",
"link": "learn/Golang/2025-03-25-go-goproxy"
},
{
"text": "Go 基础使用",
"link": "learn/Golang/2025-04-06-go-baseusage"
},
{
"text": "Golang 小白扩展",
"link": "learn/Golang/2025-04-24-go-base"
}
],
"collapsed": false
},
{
"text": "VSCodeEx",
"items": [
{
"text": "第一课 前提简介",
"link": "learn/VSCodeEx/2025-03-24-vscode-ex01"
},
{
"text": "第二课 Tasks 使用",
"link": "learn/VSCodeEx/2025-03-27-vscode-tasks"
},
{
"text": "课外 字体推荐-中文英文等宽",
"link": "learn/VSCodeEx/2025-04-04-vscode-font"
},
{
"text": "VSCODE 插件开发第二课",
"link": "learn/VSCodeEx/2025-05-03-vscode-ex02"
},
{
"text": "VSCode 插件开发 第三课 语言服务器LSP",
"link": "learn/VSCodeEx/2025-05-04-vscode-ex03"
},
{
"text": "VSCODE 插件开发第四课-打包",
"link": "learn/VSCodeEx/2025-07-29-vscode-ex04-vsce"
}
],
"collapsed": false
},
{
"text": "Vitepress",
"items": [
{
"text": "VitePress 动态侧边栏插件",
"link": "learn/vitepress/2025-01-11_vitepress_sidebar_autosider_extention"
},
{
"text": "Vitepress 部署发布到 github pages",
"link": "learn/vitepress/2025-01-12_vitepress_deploy_to_gitpages"
},
{
"text": "Vitepress 时间轴组件 用于展示git提交信息",
"link": "learn/vitepress/2025-02-09_vitepress_customcomp_timeline"
},
{
"text": "Vitepress 增加标签功能",
"link": "learn/vitepress/2025-02-22_vitepress_addtagspage"
},
{
"text": "Vitepress 增加返回顶部功能",
"link": "learn/vitepress/2025-05-25-add-backtotop"
}
],
"collapsed": false
}
],
"collapsed": false
},
{
"text": "记录",
"link": "note/index.md",
"items": [
{
"text": "About",
"link": "note/about"
},
{
"text": "本网站版本记录",
"link": "note/changelog"
},
{
"text": "Jitiao",
"link": "note/jitiao"
},
{
"text": "标签页",
"link": "note/tags"
}
],
"collapsed": false
},
{
"text": "心得",
"link": "think/index.md",
"items": [
{
"text": "个人博客系统的想法",
"link": "think/20250204_blogs_ideas"
},
{
"text": "开发工具箱",
"items": [
{
"text": "开发工具箱-远程执行 RemoteRun",
"link": "think/开发工具箱/20250420-livebug.dev-001.md"
}
],
"collapsed": false
}
],
"collapsed": false
},
{
"text": "随笔",
"link": "write/index.md"
}
]
}
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep",
"title": "Runtime API Examples"
},
"headers": [],
"relativePath": "examples/api-examples.md",
"filePath": "examples/api-examples.md",
"lastUpdated": 1740242382000
}Page Frontmatter
{
"outline": "deep",
"title": "Runtime API Examples"
}More
Check out the documentation for the full list of runtime APIs.