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": "Timeline",
"link": "/note/timeline"
}
],
"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"
},
{
"text": "时间轴演示",
"link": "vitepress/2026-04-19-timeline-demo"
}
],
"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": "VCS",
"items": [
{
"text": "Gitee增加ssh 实现免密访问",
"link": "VCS/2023-09-22-gitee-add-sshkey"
},
{
"text": "使用 Github Actions 自动化发布博客",
"link": "VCS/2023-09-30-github-actions"
},
{
"text": "Github Sync 433 Error",
"link": "VCS/2024-01-31-github-sync-433-error"
},
{
"text": "Code-server 离线环境使用 https ",
"link": "VCS/2026-04-22-code-server-use-https"
}
],
"collapsed": false
},
{
"text": "System",
"items": [
{
"text": "Fedora系统安装后的基本操作",
"link": "System/2023-04-22-fedoraInstall"
},
{
"text": "Fedora打开Samba端口",
"link": "System/2023-04-25-fedora-open-sambaport-firewall"
},
{
"text": "Fedora安装docker",
"link": "System/2023-04-26-fedora-install-docker"
},
{
"text": "Linux 使用代理以及遇到的问题",
"link": "System/2024-02-25-linux-proxy-common-questions"
},
{
"text": "Poweshell 基础使用",
"link": "System/2025-03-31-powershell-usage"
}
],
"collapsed": false
},
{
"text": "Programming",
"items": [
{
"text": "Ssh基本介绍和问题解答",
"link": "Programming/2023-08-27-ssh-connect"
},
{
"text": "正则表达式-先行断言(lookahead)和后行断言(lookbehind)",
"link": "Programming/2023-09-17-regexp-lookahead"
},
{
"text": "Python3 基础学习",
"link": "Programming/2025-02-19_python3_baseLearning"
}
],
"collapsed": false
},
{
"text": "NodeJs",
"items": [
{
"text": "Package.json 相关",
"link": "NodeJs/2025-07-24-package"
},
{
"text": "Nvm 和 Node.js 安装指南",
"link": "NodeJs/2026-04-19-nvm-nodejs-installation"
},
{
"text": "Npm EACCES 权限错误修复与 pnpm 安装",
"link": "NodeJs/2026-05-02-npm-eacces-fix-pnpm-install"
},
{
"text": "WSL2 (Debian Trixie) 安装 Node.js",
"link": "NodeJs/2026-05-02-wsl2-nodejs-install"
}
],
"collapsed": false
},
{
"text": "Linux",
"items": [
{
"text": "Linux 编程开发环境初始化",
"link": "Linux/2026-02-14-code-env-init"
}
],
"collapsed": false
},
{
"text": "Infrastructure",
"items": [
{
"text": "Categories和types有什么区别吗",
"link": "Infrastructure/2023-10-08-diff-category-tags"
},
{
"text": "自建 pip 私有源",
"link": "Infrastructure/2024-03-29-pip-server-self"
}
],
"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": "Frontend",
"items": [
{
"text": "Css—用户代理样式表",
"link": "Frontend/2023-10-03-css-web-browser-style"
},
{
"text": "Vue3 使用 mockjs 模拟api数据",
"link": "Frontend/2025-01-18_vue3_mockjs"
}
],
"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"
},
{
"text": "Docker 启动hive",
"link": "Docker/2025-10-25-docker-apachehive"
},
{
"text": "WSL2 中 Docker 命令不可用",
"link": "Docker/2026-05-04-wsl2-docker-not-found"
},
{
"text": "WSL2 Docker 运行 TDH 开发版端口无法访问的排查与解决",
"link": "Docker/2026-05-04_tdh_wsldocker_portaccess"
}
],
"collapsed": false
},
{
"text": "DevEnv",
"items": [
{
"text": "Sql语言脚本开发-语法突出",
"link": "DevEnv/2023-09-09-vscode-sqllang"
},
{
"text": "Wsl环境初始化-安装nvm",
"link": "DevEnv/2023-09-09-wsl-init-devenv"
},
{
"text": "WSL2配置代理",
"link": "DevEnv/2024-01-08-set-wsl2-net-proxy"
},
{
"text": "Obsidian 使用",
"link": "DevEnv/2025-02-04_Obsidian_baseuse"
},
{
"text": "WSL2 + Clash TUN 模式代理配置",
"link": "DevEnv/2026-05-02-wsl2-clash-proxy"
},
{
"text": "WSL2 Debian 全栈开发环境搭建",
"link": "DevEnv/2026-05-02-wsl2-debian-dev-setup"
}
],
"collapsed": false
},
{
"text": "Backend-DotNet",
"items": [
{
"text": "Openiddict Base Introduce",
"link": "Backend-DotNet/2023-11-12-openiddict-base-introduce"
},
{
"text": "Asp.net Auth 身份验证与授权基本认识",
"link": "Backend-DotNet/2023-12-17-asp.net-auth"
},
{
"text": "Asp.net Identity Choose an Identity Management Solution",
"link": "Backend-DotNet/2023-12-21-asp.net-identity-Choose-an-identity-management-solution"
},
{
"text": "Asp.net Identity Solution",
"link": "Backend-DotNet/2023-12-21-asp.net-identity-solution"
}
],
"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
}
]
},
"/note/": {
"base": "/note/",
"items": [
{
"text": "项目提交时间轴",
"link": "timeline"
},
{
"text": "标签页",
"link": "tags"
},
{
"text": "随机鸡条",
"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": "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": "Backend-DotNet",
"items": [
{
"text": "Openiddict Base Introduce",
"link": "learn/Backend-DotNet/2023-11-12-openiddict-base-introduce"
},
{
"text": "Asp.net Auth 身份验证与授权基本认识",
"link": "learn/Backend-DotNet/2023-12-17-asp.net-auth"
},
{
"text": "Asp.net Identity Choose an Identity Management Solution",
"link": "learn/Backend-DotNet/2023-12-21-asp.net-identity-Choose-an-identity-management-solution"
},
{
"text": "Asp.net Identity Solution",
"link": "learn/Backend-DotNet/2023-12-21-asp.net-identity-solution"
}
],
"collapsed": false
},
{
"text": "DevEnv",
"items": [
{
"text": "Sql语言脚本开发-语法突出",
"link": "learn/DevEnv/2023-09-09-vscode-sqllang"
},
{
"text": "Wsl环境初始化-安装nvm",
"link": "learn/DevEnv/2023-09-09-wsl-init-devenv"
},
{
"text": "WSL2配置代理",
"link": "learn/DevEnv/2024-01-08-set-wsl2-net-proxy"
},
{
"text": "Obsidian 使用",
"link": "learn/DevEnv/2025-02-04_Obsidian_baseuse"
},
{
"text": "WSL2 + Clash TUN 模式代理配置",
"link": "learn/DevEnv/2026-05-02-wsl2-clash-proxy"
},
{
"text": "WSL2 Debian 全栈开发环境搭建",
"link": "learn/DevEnv/2026-05-02-wsl2-debian-dev-setup"
}
],
"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"
},
{
"text": "Docker 启动hive",
"link": "learn/Docker/2025-10-25-docker-apachehive"
},
{
"text": "WSL2 中 Docker 命令不可用",
"link": "learn/Docker/2026-05-04-wsl2-docker-not-found"
},
{
"text": "WSL2 Docker 运行 TDH 开发版端口无法访问的排查与解决",
"link": "learn/Docker/2026-05-04_tdh_wsldocker_portaccess"
}
],
"collapsed": false
},
{
"text": "Frontend",
"items": [
{
"text": "Css—用户代理样式表",
"link": "learn/Frontend/2023-10-03-css-web-browser-style"
},
{
"text": "Vue3 使用 mockjs 模拟api数据",
"link": "learn/Frontend/2025-01-18_vue3_mockjs"
}
],
"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": "Infrastructure",
"items": [
{
"text": "Categories和types有什么区别吗",
"link": "learn/Infrastructure/2023-10-08-diff-category-tags"
},
{
"text": "自建 pip 私有源",
"link": "learn/Infrastructure/2024-03-29-pip-server-self"
}
],
"collapsed": false
},
{
"text": "Linux",
"items": [
{
"text": "Linux 编程开发环境初始化",
"link": "learn/Linux/2026-02-14-code-env-init"
}
],
"collapsed": false
},
{
"text": "NodeJs",
"items": [
{
"text": "Package.json 相关",
"link": "learn/NodeJs/2025-07-24-package"
},
{
"text": "Nvm 和 Node.js 安装指南",
"link": "learn/NodeJs/2026-04-19-nvm-nodejs-installation"
},
{
"text": "Npm EACCES 权限错误修复与 pnpm 安装",
"link": "learn/NodeJs/2026-05-02-npm-eacces-fix-pnpm-install"
},
{
"text": "WSL2 (Debian Trixie) 安装 Node.js",
"link": "learn/NodeJs/2026-05-02-wsl2-nodejs-install"
}
],
"collapsed": false
},
{
"text": "Programming",
"items": [
{
"text": "Ssh基本介绍和问题解答",
"link": "learn/Programming/2023-08-27-ssh-connect"
},
{
"text": "正则表达式-先行断言(lookahead)和后行断言(lookbehind)",
"link": "learn/Programming/2023-09-17-regexp-lookahead"
},
{
"text": "Python3 基础学习",
"link": "learn/Programming/2025-02-19_python3_baseLearning"
}
],
"collapsed": false
},
{
"text": "System",
"items": [
{
"text": "Fedora系统安装后的基本操作",
"link": "learn/System/2023-04-22-fedoraInstall"
},
{
"text": "Fedora打开Samba端口",
"link": "learn/System/2023-04-25-fedora-open-sambaport-firewall"
},
{
"text": "Fedora安装docker",
"link": "learn/System/2023-04-26-fedora-install-docker"
},
{
"text": "Linux 使用代理以及遇到的问题",
"link": "learn/System/2024-02-25-linux-proxy-common-questions"
},
{
"text": "Poweshell 基础使用",
"link": "learn/System/2025-03-31-powershell-usage"
}
],
"collapsed": false
},
{
"text": "VCS",
"items": [
{
"text": "Gitee增加ssh 实现免密访问",
"link": "learn/VCS/2023-09-22-gitee-add-sshkey"
},
{
"text": "使用 Github Actions 自动化发布博客",
"link": "learn/VCS/2023-09-30-github-actions"
},
{
"text": "Github Sync 433 Error",
"link": "learn/VCS/2024-01-31-github-sync-433-error"
},
{
"text": "Code-server 离线环境使用 https ",
"link": "learn/VCS/2026-04-22-code-server-use-https"
}
],
"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"
},
{
"text": "时间轴演示",
"link": "learn/vitepress/2026-04-19-timeline-demo"
}
],
"collapsed": false
}
],
"collapsed": false
},
{
"text": "记录",
"link": "note/index.md",
"items": [
{
"text": "About",
"link": "note/about"
},
{
"text": "本网站版本提交记录",
"link": "note/changelog"
},
{
"text": "随机鸡条",
"link": "note/jitiao"
},
{
"text": "标签页",
"link": "note/tags"
},
{
"text": "项目提交时间轴",
"link": "note/timeline"
}
],
"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.