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": "归档",
"link": "/archive"
},
{
"text": "MolStar",
"link": "http://molstar.szbl.ac.cn/viewer/"
},
{
"text": "网站·工具",
"items": [
{
"text": "UI组件库",
"link": "https://rxht.github.io/ui/"
},
{
"text": "图片压缩",
"link": "https://rxht.github.io/mazanoke/"
},
{
"text": "月球车勘测游戏",
"link": "https://rxht.github.io/moon-rover/"
}
]
},
{
"text": "友情链接",
"items": [
{
"text": "dechinphy",
"link": "https://www.cnblogs.com/dechinphy"
},
{
"text": "bgalang",
"link": "https://www.cnblogs.com/bgalang"
},
{
"text": "ZHANG Jun's",
"link": "https://zhjun-sci.com/index.html "
},
{
"text": "测试 - Balance",
"link": "https://heshiqi1.github.io/blog/"
},
{
"text": "前端 - yyi0708",
"link": "https://github.com/yyi0708"
}
]
}
],
"sidebar": {
"/molstar/": {
"base": "/molstar/",
"items": [
{
"text": "画廊",
"link": "gallery/index.md"
},
{
"text": "用户手册",
"link": "user-manual/index.md",
"items": [
{
"text": "文档大纲",
"link": "user-manual/文档大纲"
},
{
"text": "前言",
"link": "user-manual/前言"
},
{
"text": "界面总览",
"link": "user-manual/界面总览"
},
{
"text": "结构加载与导入",
"link": "user-manual/结构加载与导入"
},
{
"text": "3D视图基础操作",
"link": "user-manual/3D视图基础操作"
},
{
"text": "结构显示样式控制",
"link": "user-manual/结构显示样式控制"
},
{
"text": "结构选择与测量",
"link": "user-manual/结构选择与测量"
},
{
"text": "结构分析与高级显示",
"link": "user-manual/级结构分析功能"
},
{
"text": "结构编辑与操作",
"link": "user-manual/结构编辑与操作"
},
{
"text": "数据导出与导入",
"link": "user-manual/数据导出与导入"
},
{
"text": " Qbics AI 功能与操作【实验功能】",
"link": "user-manual/QbicsAI功能与操作"
},
{
"text": "WebAgent使用教程",
"link": "user-manual/WebAgent"
},
{
"text": " 快捷键与常用操作技巧",
"link": "user-manual/快捷键与常用操作技巧"
},
{
"text": "常见问题与故障排查",
"link": "user-manual/常见问题与故障排查"
},
{
"text": " 附录",
"link": "user-manual/附录"
}
],
"collapsed": false
},
{
"text": "使用教程",
"link": "tutorial/index.md",
"items": [
{
"text": "安装与使用教程 - 本地文件、PDB 与 SMILES 可视化",
"link": "tutorial/access-installation"
},
{
"text": "可视化轨迹并导出动画",
"link": "tutorial/trajectory-visualization"
},
{
"text": "可视化电子结构",
"link": "tutorial/electronic-visualization"
},
{
"text": "选择原子、显示编号、以及多种渲染方式",
"link": "tutorial/multiple-rendering"
},
{
"text": "从图片直接导入分子",
"link": "tutorial/inport-images"
}
],
"collapsed": false
},
{
"text": "开发文档",
"link": "develop/index.md",
"items": [
{
"text": "behavior 扩展",
"link": "develop/behavior/index.md",
"items": [
{
"text": "更改 Focus representation 的 扩展半径",
"link": "develop/behavior/structure-focus-representation"
}
],
"collapsed": true
},
{
"text": "常用方法",
"link": "develop/common"
},
{
"text": "新增 Label Type",
"link": "develop/new-label-type"
},
{
"text": "新增所支持的解析格式",
"link": "develop/new-file-format-parse"
},
{
"text": "自动播放动画",
"link": "develop/auto-animation/index.md"
},
{
"text": "获取3D空间中的坐标",
"link": "develop/screen-to-position"
},
{
"text": "设置原子只能单选",
"link": "develop/atoms-single-choice"
},
{
"text": "选中指定的原子序号",
"link": "develop/select-atom-of-element"
},
{
"text": "鼠标与键盘事件监听",
"link": "develop/mouse-and-key-subscribe"
}
],
"collapsed": false
},
{
"text": "使用文档",
"link": "use/index.md",
"items": [
{
"text": "components",
"items": [
{
"text": "添加 Components 表现",
"link": "use/components/query"
},
{
"text": "自然语言查询原子功能",
"link": "use/components/natural-language/index.md"
},
{
"text": "隐藏特定的 Structure 或者可选中的对象",
"link": "use/components/hide"
}
],
"collapsed": true
},
{
"text": "export",
"items": [
{
"text": "导入/导出 Representation 【渲染格式刷】",
"link": "use/export/representation"
},
{
"text": "导出 Animation",
"link": "use/export/animation"
},
{
"text": "导出 Atom Index Range",
"link": "use/export/atomIndexRange"
},
{
"text": "导出 Geometry",
"link": "use/export/geometry"
},
{
"text": "导出 Model",
"link": "use/export/models"
},
{
"text": "导出图片",
"link": "use/export/image"
}
],
"collapsed": true
},
{
"text": "Maple ",
"link": "use/maple/index.md",
"items": [
{
"text": "Qbics-Molstar 结构优化: LBFGS",
"link": "use/maple/structure-optimization/index.md"
}
],
"collapsed": true
},
{
"text": "measurements",
"items": [
{
"text": "显示 Angles",
"link": "use/measurements/angles"
},
{
"text": "显示 Dihedrals",
"link": "use/measurements/dihedrals"
},
{
"text": "显示 Distances",
"link": "use/measurements/distances"
},
{
"text": "显示 Label",
"link": "use/measurements/labels"
},
{
"text": "显示 Orientations",
"link": "use/measurements/orientations"
},
{
"text": "显示 Planes",
"link": "use/measurements/planes"
}
],
"collapsed": true
},
{
"text": "model",
"items": [
{
"text": "wireframe 线框",
"link": "use/model/surface-wireframe/index.md"
},
{
"text": "显示 RMSD 趋势",
"link": "use/model/rmsd-trend/index.md"
},
{
"text": "显示分子轨道",
"link": "use/model/molecular-orbital/index.md"
},
{
"text": "显示所有模型",
"link": "use/model/all-models"
},
{
"text": "显示测量趋势",
"link": "use/model/measurements-trend/index.md"
}
],
"collapsed": true
},
{
"text": "representation",
"items": [
{
"text": "切换当前的 Representation",
"link": "use/representation/switchRepresentation"
},
{
"text": "切换显示材质",
"link": "use/representation/materials/index.md"
},
{
"text": "新建 BoundingBox",
"link": "use/representation/boundingBox"
},
{
"text": "新建标签",
"link": "use/representation/label"
}
],
"collapsed": true
},
{
"text": "动画功能",
"link": "use/animation/index.md",
"items": [
{
"text": "Animate Trajectory",
"link": "use/animation/animate-trajectory/index.md"
},
{
"text": "Camera Rock",
"link": "use/animation/camera-rock/index.md"
},
{
"text": "Camera Spin",
"link": "use/animation/camera-spin/index.md"
},
{
"text": "Harmonic Vibrations",
"link": "use/animation/harmonic-vibrations/index.md"
},
{
"text": "Spin Structure",
"link": "use/animation/spin-structure/index.md"
}
],
"collapsed": true
},
{
"text": "编辑功能",
"link": "use/editor/index.md",
"items": [
{
"text": "Ketcher 导出到 Qbics Molstar",
"link": "use/editor/ketcher/index.md"
},
{
"text": "编辑元素类型信息",
"link": "use/editor/element/index.md"
},
{
"text": "编辑分子片段模板信息",
"link": "use/editor/template/index.md"
},
{
"text": "编辑键二面角信息",
"link": "use/editor/bond-dihedral/index.md"
},
{
"text": "编辑键级信息",
"link": "use/editor/bond-order/index.md"
},
{
"text": "编辑键角信息",
"link": "use/editor/bond-angle/index.md"
},
{
"text": "编辑键长信息",
"link": "use/editor/bond-distance/index.md"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "linux 版本安装",
"link": "linux"
},
{
"text": "文件格式",
"link": "file-format/index.md",
"items": [
{
"text": "CUBE",
"link": "file-format/cube"
},
{
"text": "DAT",
"link": "file-format/dat"
},
{
"text": "FCH",
"link": "file-format/fch"
},
{
"text": "mmCIF",
"link": "file-format/mmcif"
},
{
"text": "MOL2",
"link": "file-format/mol2"
},
{
"text": "PDB",
"link": "file-format/pdb"
},
{
"text": "PQR",
"link": "file-format/pqr"
},
{
"text": "RXH",
"link": "file-format/rxh"
},
{
"text": "WFN",
"link": "file-format/wfn"
},
{
"text": "XML",
"link": "file-format/xml"
},
{
"text": "XYZ",
"link": "file-format/xyz"
}
],
"collapsed": false
}
]
},
"/javascript/": {
"base": "/javascript/",
"items": [
{
"text": "CSS 文档",
"link": "css/index.md",
"items": [
{
"text": "Flex 布局",
"link": "css/flex"
},
{
"text": "前端大屏适配",
"link": "css/frontend-large-screen-adaptation"
}
],
"collapsed": false
},
{
"text": "desktopapp",
"items": [
{
"text": "Pake 网页打包客户端",
"link": "desktopapp/pake/index.md"
}
],
"collapsed": false
},
{
"text": "Node",
"link": "node/index.md",
"items": [
{
"text": "Node 版本管理",
"link": "node/node-version-manager/index.md"
}
],
"collapsed": false
},
{
"text": "VUE",
"link": "vue/index.md",
"items": [
{
"text": "Typescript",
"link": "vue/typescript/index.md"
},
{
"text": "5",
"link": "vue/Vue3.5/index.md",
"items": [
{
"text": "useTemplateRef",
"link": "vue/Vue3.5/useTemplateRef/index.md"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "功能代码",
"link": "functions/index.md",
"items": [
{
"text": "await-to-js 处理函数",
"link": "functions/await-to-js"
},
{
"text": "Canvas 中字符串换行",
"link": "functions/canvas-label-reLine"
},
{
"text": "Fetch",
"link": "functions/fetch"
},
{
"text": "切换浏览器选项卡时更改favicon",
"link": "functions/favicon-change"
},
{
"text": "图片懒加载",
"link": "functions/images-lazy-loading"
},
{
"text": "文件格式校验（文件二进制内容校验）",
"link": "functions/check-file-type"
},
{
"text": "检查变量是否泄露到全局变量中",
"link": "functions/check-for-var-to-global"
},
{
"text": "测量白屏时间",
"link": "functions/first-paint-time"
},
{
"text": "禁止实例访问原型链、构造函数",
"link": "functions/freeze-proto"
},
{
"text": "管道函数",
"link": "functions/pipe-func"
},
{
"text": "组合函数",
"link": "functions/compose-func"
},
{
"text": "缓存命中率指标",
"link": "functions/cache-hit-rate"
},
{
"text": "网络检查",
"link": "functions/check-network"
},
{
"text": "获取MAC地址",
"link": "functions/mac-address"
},
{
"text": "获取图片主色调",
"link": "functions/image-theme-color"
},
{
"text": "计算 Canvas 中文字渲染宽度",
"link": "functions/canvas-calc-label-width"
},
{
"text": "设置 dpi",
"link": "functions/setting-dpi"
},
{
"text": "设置 rem",
"link": "functions/setting-rem"
},
{
"text": "颜色转换",
"link": "functions/color-transform"
}
],
"collapsed": false
}
]
},
"/chemical/": {
"base": "/chemical/",
"items": [
{
"text": "仪器分析",
"link": "instrumental-analysis-techniques/index.md",
"items": [
{
"text": "XRPD",
"link": "instrumental-analysis-techniques/XRPD/index.md"
}
],
"collapsed": false
},
{
"text": "元素周期表",
"link": "periodic-table/index.md"
},
{
"text": "分子结构",
"link": "molecular-structure/index.md",
"items": [
{
"text": "分子轨道",
"link": "molecular-structure/molecular-orbital"
},
{
"text": "前线轨道",
"link": "molecular-structure/frontier-molecular-orbital"
},
{
"text": "原子轨道",
"link": "molecular-structure/atomica-orbital"
}
],
"collapsed": false
},
{
"text": "化学中常用软件",
"link": "software/index.md",
"items": [
{
"text": "PyMOL 安装教程（Windows 11）",
"link": "software/PyMol/index.md"
}
],
"collapsed": false
},
{
"text": "化学能量单位换算参考",
"link": "energy-unit-conversion"
},
{
"text": "化学键的类型",
"link": "bonds-type"
},
{
"text": "单点能",
"link": "single-point-energy/index.md"
},
{
"text": "原子间相互作用的物理本质",
"link": "atomic-interactions"
},
{
"text": "四种重要的核苷酸",
"link": "ATP-GTP-CTP-UTP/index.md"
},
{
"text": "核酸中主要的五种碱基",
"link": "A-T-G-C-U/index.md"
},
{
"text": "科研网站/资源推荐",
"link": "sci-site-recs/index.md"
}
]
},
"/others/": {
"base": "/others/",
"items": [
{
"text": "VitePress",
"link": "vitepress/index.md",
"items": [
{
"text": "VitePress 用户指南",
"link": "vitepress/guide/index.md",
"items": [
{
"text": "什么是 VitePress？",
"link": "vitepress/guide/what-is-vitepress"
},
{
"text": "快速开始",
"link": "vitepress/guide/getting-started"
},
{
"text": "路由",
"link": "vitepress/guide/routing"
},
{
"text": "部署",
"link": "vitepress/guide/deploy"
},
{
"text": "Markdown 扩展",
"link": "vitepress/guide/markdown"
},
{
"text": "资源处理",
"link": "vitepress/guide/asset-handling"
},
{
"text": "前置信息",
"link": "vitepress/guide/frontmatter"
},
{
"text": "使用 Vue",
"link": "vitepress/guide/using-vue"
},
{
"text": "国际化",
"link": "vitepress/guide/i18n"
},
{
"text": "自定义主题",
"link": "vitepress/guide/custom-theme"
},
{
"text": "扩展默认主题",
"link": "vitepress/guide/extending-default-theme"
},
{
"text": "构建时数据加载",
"link": "vitepress/guide/data-loading"
},
{
"text": "SSR 兼容性",
"link": "vitepress/guide/ssr-compat"
},
{
"text": "连接 CMS",
"link": "vitepress/guide/cms"
},
{
"text": "MPA 模式",
"link": "vitepress/guide/mpa-mode"
},
{
"text": "生成 sitemap",
"link": "vitepress/guide/sitemap-generation"
}
],
"collapsed": true
},
{
"text": "VitePress 参考",
"link": "vitepress/reference/index.md",
"items": [
{
"text": "站点配置",
"link": "vitepress/reference/site-config"
},
{
"text": "frontmatter 配置",
"link": "vitepress/reference/frontmatter-config"
},
{
"text": "运行时 API",
"link": "vitepress/reference/runtime-api"
},
{
"text": "命令行界面",
"link": "vitepress/reference/cli"
},
{
"text": "默认主题配置",
"link": "vitepress/reference/default-theme-config/index.md",
"items": [
{
"text": "默认主题配置",
"link": "vitepress/reference/default-theme-config/default-theme-config"
},
{
"text": "导航栏",
"link": "vitepress/reference/default-theme-config/default-theme-nav"
},
{
"text": "侧边栏",
"link": "vitepress/reference/default-theme-config/default-theme-sidebar"
},
{
"text": "主页",
"link": "vitepress/reference/default-theme-config/default-theme-home-page"
},
{
"text": "页脚",
"link": "vitepress/reference/default-theme-config/default-theme-footer"
},
{
"text": "布局",
"link": "vitepress/reference/default-theme-config/default-theme-layout"
},
{
"text": "徽标",
"link": "vitepress/reference/default-theme-config/default-theme-badge"
},
{
"text": "团队页",
"link": "vitepress/reference/default-theme-config/default-theme-team-page"
},
{
"text": "上下页链接",
"link": "vitepress/reference/default-theme-config/default-theme-prev-next-links"
},
{
"text": "编辑链接",
"link": "vitepress/reference/default-theme-config/default-theme-edit-link"
},
{
"text": "最后更新于",
"link": "vitepress/reference/default-theme-config/default-theme-last-updated"
},
{
"text": "搜索",
"link": "vitepress/reference/default-theme-config/default-theme-search"
},
{
"text": " Carbon Ads",
"link": "vitepress/reference/default-theme-config/default-theme-carbon-ads"
}
],
"collapsed": true
}
],
"collapsed": true
},
{
"text": "VitePress 优化和配置",
"link": "vitepress/enhancement"
},
{
"text": "部署到 GitHub 的 Pages",
"link": "vitepress/deploy-github"
},
{
"text": "配置 VitePress",
"link": "vitepress/setting"
},
{
"text": "VitePress 插件精选",
"link": "vitepress/plugin/index.md",
"items": [
{
"text": "rss 订阅",
"link": "vitepress/plugin/rss"
},
{
"text": "分组代码块图标",
"link": "vitepress/plugin/group-icons"
},
{
"text": "图像查看器",
"link": "vitepress/plugin/image-viewer"
},
{
"text": "整合 Tailwindcss V4",
"link": "vitepress/plugin/tailwindcss"
},
{
"text": "离线全文搜索",
"link": "vitepress/plugin/pagefind"
},
{
"text": "自动侧边栏",
"link": "vitepress/plugin/sidebar"
},
{
"text": "评论区",
"link": "vitepress/plugin/giscus"
},
{
"text": "配置 canvas-confetti",
"link": "vitepress/plugin/canvas-confetti"
}
],
"collapsed": true
},
{
"text": "网站收录",
"link": "vitepress/record/index.md",
"items": [
{
"text": "bing 收录",
"link": "vitepress/record/bing"
},
{
"text": "google 收录",
"link": "vitepress/record/google"
},
{
"text": "IndexNow 收录",
"link": "vitepress/record/index-now"
}
],
"collapsed": true
},
{
"text": "语法",
"link": "vitepress/vocabulary/index.md"
}
],
"collapsed": false
},
{
"text": "AI 部分",
"link": "ai/index.md",
"items": [
{
"text": "codegraph 安装使用教程",
"link": "ai/codegraph/index.md"
},
{
"text": "DeepSeek Harness",
"link": "ai/DeepSeekHarness"
},
{
"text": "DeepSeek-R1",
"link": "ai/DeepSeek-R1/index.md"
},
{
"text": "Dify",
"link": "ai/Dify/index.md"
},
{
"text": "RagFlow",
"link": "ai/RagFlow/index.md"
}
],
"collapsed": false
},
{
"text": "docker 文档",
"link": "docker/index.md",
"items": [
{
"text": "Docker 使用 GPU 报错",
"link": "docker/use-gpu-error"
},
{
"text": "Docker 常用命令",
"link": "docker/commands"
},
{
"text": "Docker 日志管理",
"link": "docker/log-manager"
}
],
"collapsed": false
},
{
"text": "Git",
"link": "git/index.md",
"items": [
{
"text": "Git 命令速查表",
"link": "git/command-reference"
},
{
"text": "Git 小白零基础入门教程",
"link": "git/tutorial"
},
{
"text": "Git 超详细中文速查表",
"link": "git/quick-reference"
},
{
"text": "常见问题",
"link": "git/FAQ"
}
],
"collapsed": false
},
{
"text": "linux",
"link": "linux/index.md",
"items": [
{
"text": "Nginx 文档",
"link": "linux/nginx/index.md",
"items": [
{
"text": "Linux 删除 nginx 服务",
"link": "linux/nginx/stop-remove"
}
],
"collapsed": true
},
{
"text": "NVIDIA GPU 常用命令",
"link": "linux/gpu/index.md"
},
{
"text": "Widows 子系统 Ubuntu (WSL2) 安装 NVIDIA-SMI",
"link": "linux/wsl2-nvidia"
},
{
"text": "Widows 移动子系统 Ubuntu (WSL2) 位置（非系统盘）",
"link": "linux/wsl2-subsystem-mv"
},
{
"text": "WSL2 卸载 Ubuntu_24_04",
"link": "linux/wsl2-subsystem-uninstall"
},
{
"text": "WSL2 安装 Ubuntu_26_04",
"link": "linux/wsl2-install-ubuntu_26_04"
}
],
"collapsed": false
},
{
"text": "Slurm",
"link": "slurm/index.md"
},
{
"text": "SSH",
"link": "ssh"
},
{
"text": "常见系统命令",
"link": "sys"
},
{
"text": "标准电码表",
"link": "commercial-code"
},
{
"text": "特殊字符",
"link": "symbols"
},
{
"text": "论文配色方案",
"link": "color-scheme"
}
]
}
},
"search": {
"provider": "local"
},
"editLink": {
"pattern": "https://github.com/rxht/rxht.github.io/edit/main/src/:path",
"text": "在 GitHub 上编辑此页面"
},
"socialLinks": [
{
"icon": {
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 448 512\"><title>RSS</title><path d=\"M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z\" fill=\"currentColor\"></path></svg>"
},
"link": "https://rxht.github.io/feed.rss",
"ariaLabel": "RSS"
},
{
"icon": "github",
"link": "https://github.com/rxht/rxht.github.io"
}
],
"footer": {
"message": "基于 CC BY-NC-SA 4.0 许可发布",
"copyright": "版权所有 © 2024-2026 荣轩浩[rxht]"
},
"docFooter": {
"prev": "上一页",
"next": "下一页"
},
"outline": {
"label": "页面导航",
"level": [
2,
3
]
},
"lastUpdated": {
"text": "最后更新于",
"formatOptions": {
"dateStyle": "short",
"timeStyle": "medium"
}
},
"returnToTopLabel": "回到顶部",
"sidebarMenuLabel": "菜单",
"darkModeSwitchLabel": "主题",
"lightModeSwitchTitle": "切换到浅色模式",
"darkModeSwitchTitle": "切换到深色模式"
}Page Data
{
"title": "Runtime API Examples",
"description": "VitePress 运行时 API 示例",
"frontmatter": {
"Date": "2025-03-18T22:10:44.000Z",
"LastEditTime": "2026-08-11T15:59:04.000Z",
"outline": "deep",
"description": "VitePress 运行时 API 示例",
"tags": [
"vitepress",
"api-examples"
]
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md",
"lastUpdated": 1786435688000
}Page Frontmatter
{
"Date": "2025-03-18T22:10:44.000Z",
"LastEditTime": "2026-08-11T15:59:04.000Z",
"outline": "deep",
"description": "VitePress 运行时 API 示例",
"tags": [
"vitepress",
"api-examples"
]
}More
Check out the documentation for the full list of runtime APIs.