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:

<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": "UI组件库",
      "link": "https://rxht.github.io/ui/"
    },
    {
      "text": "友情链接",
      "items": [
        {
          "text": "dechinphy",
          "link": "https://www.cnblogs.com/dechinphy"
        },
        {
          "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": "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": "use/index.md",
          "items": [
            {
              "text": "actions",
              "items": [
                {
                  "text": "representation",
                  "items": [
                    {
                      "text": "切换当前的 Representation",
                      "link": "use/actions/representation/switchRepresentation"
                    },
                    {
                      "text": "新建 BoundingBox",
                      "link": "use/actions/representation/boundingBox"
                    },
                    {
                      "text": "新建标签",
                      "link": "use/actions/representation/label"
                    }
                  ],
                  "collapsed": true
                }
              ],
              "collapsed": true
            },
            {
              "text": "components",
              "items": [
                {
                  "text": "添加 Components 表现",
                  "link": "use/components/query"
                },
                {
                  "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": "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": "显示分子轨道",
                  "link": "use/model/molecular-orbital"
                },
                {
                  "text": "显示所有模型",
                  "link": "use/model/all-models"
                }
              ],
              "collapsed": true
            },
            {
              "text": "编辑功能",
              "link": "use/editor/index.md",
              "items": [
                {
                  "text": "三个原子所构成的键角",
                  "link": "use/editor/angle"
                },
                {
                  "text": "两个原子所构成的键连",
                  "link": "use/editor/bond"
                },
                {
                  "text": "四个原子所构成的二面角",
                  "link": "use/editor/dihedral"
                }
              ],
              "collapsed": true
            }
          ],
          "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": "文件格式",
              "link": "develop/file-format/index.md",
              "items": [
                {
                  "text": "CUBE",
                  "link": "develop/file-format/cube"
                },
                {
                  "text": "DAT",
                  "link": "develop/file-format/dat"
                },
                {
                  "text": "FCH",
                  "link": "develop/file-format/fch"
                },
                {
                  "text": "MOL2",
                  "link": "develop/file-format/mol2"
                },
                {
                  "text": "PDB",
                  "link": "develop/file-format/pdb"
                },
                {
                  "text": "RXH",
                  "link": "develop/file-format/rxh"
                },
                {
                  "text": "WFN",
                  "link": "develop/file-format/wfn"
                },
                {
                  "text": "XYZ",
                  "link": "develop/file-format/xyz"
                }
              ],
              "collapsed": true
            },
            {
              "text": "新增 Label Type",
              "link": "develop/new-label-type"
            },
            {
              "text": "新增所支持的解析格式",
              "link": "develop/new-file-format-parse"
            },
            {
              "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
        }
      ]
    },
    "/javascript/": {
      "base": "/javascript/",
      "items": [
        {
          "text": "Node",
          "link": "node/index.md"
        }
      ]
    },
    "/code-segment/": {
      "base": "/code-segment/",
      "items": [
        {
          "text": "CSS 文档",
          "link": "css/index.md",
          "items": [
            {
              "text": "Flex 布局",
              "link": "css/flex"
            }
          ],
          "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": "SSH",
          "link": "ssh"
        },
        {
          "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
        },
        {
          "text": "常见系统命令",
          "link": "sys"
        },
        {
          "text": "标准电码表",
          "link": "commercial-code"
        },
        {
          "text": "特殊字符",
          "link": "symbols"
        },
        {
          "text": "论文配色方案",
          "link": "color-scheme"
        }
      ]
    },
    "/vitepress/": {
      "base": "/vitepress/",
      "items": [
        {
          "text": "快速开始",
          "link": "getting-started"
        },
        {
          "text": "配置 VitePress",
          "link": "setting"
        },
        {
          "text": "VitePress 优化和配置",
          "link": "enhancement"
        },
        {
          "text": "VitePress 插件精选",
          "link": "plugin/index.md",
          "items": [
            {
              "text": "rss 订阅",
              "link": "plugin/rss"
            },
            {
              "text": "分组代码块图标",
              "link": "plugin/group-icons"
            },
            {
              "text": "图像查看器",
              "link": "plugin/image-viewer"
            },
            {
              "text": "离线全文搜索",
              "link": "plugin/pagefind"
            },
            {
              "text": "纸屑动画",
              "link": "plugin/canvas-confetti"
            },
            {
              "text": "自动侧边栏",
              "link": "plugin/sidebar"
            },
            {
              "text": "评论区",
              "link": "plugin/giscus"
            },
            {
              "text": "配置 Tailwindcss V4",
              "link": "plugin/tailwindcss"
            }
          ],
          "collapsed": false
        },
        {
          "text": "网站收录",
          "link": "record/index.md",
          "items": [
            {
              "text": "bing 收录",
              "link": "record/bing"
            },
            {
              "text": "google 收录",
              "link": "record/google"
            },
            {
              "text": "SEO 优化： IndexNow",
              "link": "record/index-now"
            }
          ],
          "collapsed": false
        },
        {
          "text": "语法",
          "link": "vocabulary/index.md"
        },
        {
          "text": "部署到 GitHub 的 Pages",
          "link": "deploy-github"
        }
      ]
    },
    "/chemical/": {
      "base": "/chemical/",
      "items": [
        {
          "text": "元素周期表",
          "link": "periodic-table"
        },
        {
          "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": "bonds-type"
        }
      ]
    },
    "/docker/": {
      "base": "/docker/",
      "items": [
        {
          "text": "Docker 使用 GPU 报错",
          "link": "use-gpu-error"
        },
        {
          "text": "Docker 常用命令",
          "link": "commands"
        },
        {
          "text": "Docker 日志管理",
          "link": "log-manager"
        }
      ]
    },
    "/ai/": {
      "base": "/ai/",
      "items": [
        {
          "text": "DeepSeek-R1",
          "link": "DeepSeek-R1/index.md"
        },
        {
          "text": "Dify",
          "link": "Dify/index.md"
        },
        {
          "text": "RagFlow",
          "link": "RagFlow/index.md"
        }
      ]
    },
    "/linux/": {
      "base": "/linux/",
      "items": [
        {
          "text": "Nginx 文档",
          "link": "nginx/index.md",
          "items": [
            {
              "text": "Linux 删除 nginx 服务",
              "link": "nginx/stop-remove"
            }
          ],
          "collapsed": false
        },
        {
          "text": "Widows 子系统 Ubuntu (WSL2) 安装 NVIDIA-SMI",
          "link": "wsl2-nvidia"
        },
        {
          "text": "Widows 移动子系统 Ubuntu (WSL2) 位置（非系统盘）",
          "link": "wsl2-subsystem-mv"
        }
      ]
    }
  },
  "search": {
    "provider": "local"
  },
  "editLink": {
    "pattern": "https://github.com/rxht/rxht.github.io/edit/main/src/:path",
    "text": "在 GitHub 上编辑此页面"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/rxht/rxht.github.io"
    }
  ],
  "footer": {
    "message": "基于 CC BY-NC-SA 4.0 许可发布",
    "copyright": "版权所有 © 2024-2025 荣轩浩[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": "",
  "frontmatter": {
    "Date": "2025-03-18T22:10:44.000Z",
    "LastEditTime": "2025-03-27T22:03:30.000Z",
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1743084267000
}

Page Frontmatter

{
  "Date": "2025-03-18T22:10:44.000Z",
  "LastEditTime": "2025-03-27T22:03:30.000Z",
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.