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"
},
{
"text": "VS Code 编辑器完全操作手册——高效编码必备技巧",
"link": "VSCodeEx/2026-07-11-vscode-editor-guide"
},
{
"text": "VS Code Git 完全操作手册——ETL 脚本仓库实战",
"link": "VSCodeEx/2026-07-11-vscode-git-guide"
}
],
"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/CentOS 配置 Samba 共享及防火墙放行",
"link": "System/2023-04-25-fedora-open-sambaport-firewall"
},
{
"text": "Fedora安装docker",
"link": "System/2023-04-26-fedora-install-docker"
},
{
"text": "PowerShell 常用技巧与踩坑记录",
"link": "System/2025-03-31-powershell-usage"
}
],
"collapsed": false
},
{
"text": "Programming",
"items": [
{
"text": "Ssh基本介绍和问题解答",
"link": "Programming/2023-08-27-ssh-connect"
},
{
"text": "正则表达式——先行断言与后行断言",
"link": "Programming/2023-09-17-regexp-lookahead"
},
{
"text": "Python3 基础——pip 与虚拟环境",
"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": "内容分类方法——Category 与 Tag 的区别",
"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 搭建私有 npm 仓库",
"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 使用体验与 VitePress 集成",
"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": "Git 提交记录",
"link": "changelog"
},
{
"text": "About",
"link": "about"
}
]
},
"/think/": {
"base": "/think/",
"items": [
{
"text": "开发工具箱",
"items": [
{
"text": "开发工具箱-远程执行 RemoteRun",
"link": "开发工具箱/20250420-livebug.dev-001"
}
],
"collapsed": false
},
{
"text": "个人博客系统的想法",
"link": "20250204_blogs_ideas"
}
]
},
"/write/": {
"base": "/write/",
"items": []
},
"/": {
"base": "/",
"items": [
{
"text": "Some examples",
"link": "examples/index.md"
},
{
"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 使用体验与 VitePress 集成",
"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 搭建私有 npm 仓库",
"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": "内容分类方法——Category 与 Tag 的区别",
"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": "正则表达式——先行断言与后行断言",
"link": "learn/Programming/2023-09-17-regexp-lookahead"
},
{
"text": "Python3 基础——pip 与虚拟环境",
"link": "learn/Programming/2025-02-19_python3_baseLearning"
}
],
"collapsed": false
},
{
"text": "System",
"items": [
{
"text": "Fedora系统安装后的基本操作",
"link": "learn/System/2023-04-22-fedoraInstall"
},
{
"text": "Fedora/CentOS 配置 Samba 共享及防火墙放行",
"link": "learn/System/2023-04-25-fedora-open-sambaport-firewall"
},
{
"text": "Fedora安装docker",
"link": "learn/System/2023-04-26-fedora-install-docker"
},
{
"text": "PowerShell 常用技巧与踩坑记录",
"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"
},
{
"text": "VS Code 编辑器完全操作手册——高效编码必备技巧",
"link": "learn/VSCodeEx/2026-07-11-vscode-editor-guide"
},
{
"text": "VS Code Git 完全操作手册——ETL 脚本仓库实战",
"link": "learn/VSCodeEx/2026-07-11-vscode-git-guide"
}
],
"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": "Git 提交记录",
"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"
}
],
"collapsed": false
}
],
"collapsed": false
},
{
"text": "随笔",
"link": "write/index.md"
}
]
}
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep",
"title": "Runtime API Examples",
"exclude": true
},
"headers": [],
"relativePath": "examples/api-examples.md",
"filePath": "examples/api-examples.md",
"lastUpdated": 1783832415000
}Page Frontmatter
{
"outline": "deep",
"title": "Runtime API Examples",
"exclude": true
}More
Check out the documentation for the full list of runtime APIs.