Skip to content

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

{
  "logo": "/logo.png",
  "aside": false,
  "outline": {
    "label": "本页目录"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "lastUpdated": {
    "text": "更新时间",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "short"
    }
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "指南",
      "link": "/指南/简介"
    },
    {
      "text": "基础",
      "items": [
        {
          "text": "计算机",
          "items": [
            {
              "text": "计算机网络",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            },
            {
              "text": "数据结构与算法",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            },
            {
              "text": "操作系统",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            },
            {
              "text": "计算机组成原理",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            }
          ]
        },
        {
          "text": "学力",
          "items": [
            {
              "text": "数学",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            },
            {
              "text": "English",
              "link": "/基础/学力/英文/01.简介"
            }
          ]
        }
      ]
    },
    {
      "text": "编程",
      "items": [
        {
          "text": "Java 教程",
          "items": [
            {
              "text": "Java",
              "link": "/编程/Java/Java/01.Java 代码抽象"
            },
            {
              "text": "Spring",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            }
          ]
        },
        {
          "text": "Python 教程",
          "items": [
            {
              "text": "Python",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            },
            {
              "text": "FastAPI",
              "link": "/计算机网络/初识计算机网络/协议的本质"
            }
          ]
        }
      ]
    },
    {
      "text": "云服务",
      "items": [
        {
          "text": "Linux",
          "link": "/AI/OpenClaw/OpenClaw 是什么"
        },
        {
          "text": "云厂商",
          "items": [
            {
              "text": "腾讯云",
              "link": "/AI/OpenClaw/OpenClaw 是什么"
            }
          ]
        }
      ]
    },
    {
      "text": "AI",
      "items": [
        {
          "text": "OpenClaw",
          "link": "/AI/OpenClaw/OpenClaw 是什么"
        },
        {
          "text": "Vibe Coding",
          "link": "/AI/Vibe Coding/01.Vibe Coding 是什么"
        }
      ]
    },
    {
      "text": "测试",
      "items": [
        {
          "text": "OpenClaw",
          "link": "/AI/OpenClaw/OpenClaw 是什么"
        },
        {
          "text": "Vibe Coding",
          "link": "/AI/Vibe Coding/01.Vibe Coding 是什么"
        }
      ]
    },
    {
      "text": "项目",
      "link": "/项目/project"
    },
    {
      "text": "扩展",
      "items": [
        {
          "text": "工具",
          "items": [
            {
              "text": "剪映",
              "link": "/扩展/工具/剪映/01.简介"
            }
          ]
        },
        {
          "text": "书籍",
          "items": [
            {
              "text": "白夜行",
              "link": "/扩展/工具/剪映/01.剪映"
            }
          ]
        }
      ]
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "locales": {
        "root": {
          "translations": {
            "button": {
              "buttonText": "搜索",
              "buttonAriaLabel": "搜索"
            },
            "modal": {
              "noResultsText": "没有找到相关结果",
              "resetButtonTitle": "清除",
              "footer": {
                "selectText": "选择",
                "selectKeyAriaLabel": "选择",
                "navigateText": "导航",
                "navigateUpKeyAriaLabel": "向上导航",
                "navigateDownKeyAriaLabel": "向下导航",
                "closeText": "关闭",
                "closeKeyAriaLabel": "关闭",
                "searchByText": "搜索"
              }
            }
          }
        }
      }
    }
  },
  "sidebar": {
    "/": [
      {
        "text": "指南",
        "collapsed": false,
        "items": [
          {
            "text": "快速开始",
            "link": "/指南/快速开始"
          }
        ]
      }
    ],
    "/指南/": [
      {
        "text": "指南",
        "collapsed": false,
        "items": [
          {
            "text": "简介",
            "link": "/指南/简介"
          },
          {
            "text": "归档",
            "link": "/指南/归档"
          }
        ]
      }
    ],
    "/计算机网络/": [
      {
        "text": "计算机网络",
        "collapsed": false,
        "items": [
          {
            "text": "初识计算机网络",
            "collapsed": false,
            "items": [
              {
                "text": "协议的本质",
                "link": "/计算机网络/初识计算机网络/协议的本质"
              },
              {
                "text": "分层思想",
                "link": "/计算机网络/初识计算机网络/分层思想"
              },
              {
                "text": "分层体系结构",
                "link": "/计算机网络/初识计算机网络/分层体系结构"
              },
              {
                "text": "抓包:加深对网络底层原理的理解",
                "link": "/计算机网络/初识计算机网络/抓包:加深对网络底层原理的理解"
              }
            ]
          },
          {
            "text": "物理层和数据链路层",
            "collapsed": false,
            "items": [
              {
                "text": "物理层",
                "link": "/计算机网络/物理层和数据链路层/物理层"
              },
              {
                "text": "MAC 地址",
                "link": "/计算机网络/物理层和数据链路层/MAC 地址"
              },
              {
                "text": "什么是链路",
                "link": "/计算机网络/物理层和数据链路层/什么是链路"
              },
              {
                "text": "链路层的帧格式",
                "link": "/计算机网络/物理层和数据链路层/链路层的帧格式"
              },
              {
                "text": "链路层常用协议",
                "link": "/计算机网络/物理层和数据链路层/链路层常用协议"
              },
              {
                "text": "交叉线连接两台主机",
                "link": "/计算机网络/物理层和数据链路层/交叉线连接两台主机"
              },
              {
                "text": "集线器连接多台主机",
                "link": "/计算机网络/物理层和数据链路层/集线器连接多台主机"
              },
              {
                "text": "仿真解析集线器通信全过程",
                "link": "/计算机网络/物理层和数据链路层/仿真解析集线器通信全过程"
              },
              {
                "text": "交换机连接多台主机",
                "link": "/计算机网络/物理层和数据链路层/交换机连接多台主机"
              },
              {
                "text": "交换机的工作原理",
                "link": "/计算机网络/物理层和数据链路层/交换机的工作原理"
              }
            ]
          },
          {
            "text": "网络层",
            "collapsed": false,
            "items": [
              {
                "text": "认识 IP 地址",
                "link": "/计算机网络/网络层/认识 IP 地址"
              },
              {
                "text": "IP 地址的分类",
                "link": "/计算机网络/网络层/IP 地址的分类"
              },
              {
                "text": "划分子网",
                "link": "/计算机网络/网络层/划分子网"
              },
              {
                "text": "公网 IP 和私网 IP",
                "link": "/计算机网络/网络层/公网 IP 和私网 IP"
              },
              {
                "text": "IP 地址总结",
                "link": "/计算机网络/网络层/IP 地址总结"
              },
              {
                "text": "认识网络层",
                "link": "/计算机网络/网络层/认识网络层"
              },
              {
                "text": "深入理解 IP 协议",
                "link": "/计算机网络/网络层/深入理解 IP 协议"
              },
              {
                "text": "抓包加深对 IP 协议理解",
                "link": "/计算机网络/网络层/抓包加深对 IP 协议的理解"
              },
              {
                "text": "ARP 协议",
                "link": "/计算机网络/网络层/ARP 协议"
              },
              {
                "text": "ICMP 协议",
                "link": "/计算机网络/网络层/ICMP 协议"
              },
              {
                "text": "路由器连接多个网络",
                "link": "/计算机网络/网络层/路由器连接多个网络"
              },
              {
                "text": "仿真演示路由器的工作原理",
                "link": "/计算机网络/网络层/仿真演示路由器的工作原理"
              }
            ]
          }
        ]
      }
    ],
    "/编程/Java/": [
      {
        "text": "Java",
        "collapsed": false,
        "items": [
          {
            "text": "Java 代码抽象",
            "link": "/编程/Java/Java/01.Java 代码抽象"
          },
          {
            "text": "理解 JVM 内存模型",
            "link": "/编程/Java/Java/02.理解 JVM 内存模型"
          }
        ]
      }
    ],
    "/AI/OpenClaw/": [
      {
        "text": "OpenClaw",
        "collapsed": false,
        "items": [
          {
            "text": "OpenClaw 是什么",
            "link": "/AI/OpenClaw/OpenClaw 是什么"
          },
          {
            "text": "OpenClaw 部署",
            "link": "/AI/OpenClaw/OpenClaw 部署"
          },
          {
            "text": "OpenClaw 快速上手",
            "link": "/AI/OpenClaw/OpenClaw 快速上手"
          },
          {
            "text": "OpenClaw 本地文件管理",
            "link": "/AI/OpenClaw/OpenClaw 本地文件管理"
          },
          {
            "text": "OpenClaw 知识库管理",
            "link": "/AI/OpenClaw/OpenClaw 知识库管理"
          }
        ]
      }
    ],
    "/AI/Vibe Coding/": [
      {
        "text": "Vibe Coding",
        "collapsed": false,
        "items": [
          {
            "text": "Vibe Coding 是什么",
            "link": "/AI/Vibe Coding/01.Vibe Coding 是什么"
          },
          {
            "text": "快速开始",
            "link": "/AI/Vibe Coding/02.快速开始"
          },
          {
            "text": "AI 编程工具指南",
            "link": "/AI/Vibe Coding/03.AI 编程工具指南"
          },
          {
            "text": "AI 模型选择",
            "link": "/AI/Vibe Coding/04.AI 模型选择"
          },
          {
            "text": "AI 零代码平台",
            "link": "/AI/Vibe Coding/05.AI 零代码平台"
          },
          {
            "text": "AI 智能体平台",
            "link": "/AI/Vibe Coding/06.AI 智能体平台"
          }
        ]
      }
    ],
    "/基础/学力/": [
      {
        "text": "English",
        "collapsed": false,
        "items": [
          {
            "text": "简介",
            "link": "/基础/学力/英文/01.简介"
          },
          {
            "text": "单词",
            "link": "/基础/学力/英文/02.单词"
          },
          {
            "text": "优秀的人如何训练大脑",
            "link": "/基础/学力/英文/03.优秀的人如何训练大脑"
          }
        ]
      }
    ],
    "/项目实战/进阶/": [
      {
        "text": "Spring AI Alibaba 多智能体文章生成器",
        "collapsed": false,
        "items": [
          {
            "text": "文章创作流程分析",
            "link": "/项目实战/进阶/Spring AI Alibaba 多智能体文章生成器/01.文章创作流程分析"
          },
          {
            "text": "文章创作流程 FAQ",
            "link": "/项目实战/进阶/Spring AI Alibaba 多智能体文章生成器/02.文章创作流程 FAQ"
          },
          {
            "text": "Stripe 支付流程分析",
            "link": "/项目实战/进阶/Spring AI Alibaba 多智能体文章生成器/03.Stripe 支付流程分析"
          }
        ]
      }
    ],
    "/algorithm/": [
      {
        "text": "算法",
        "collapsed": false,
        "items": [
          {
            "text": "算法入门",
            "link": "/algorithm/"
          }
        ]
      }
    ],
    "/云服务/": [
      {
        "text": "云服务",
        "collapsed": false,
        "items": [
          {
            "text": "Cloudflare 文档",
            "link": "/云服务/Cloudflare 文档"
          },
          {
            "text": "Git 常用命令",
            "link": "/云服务/Git 常用命令"
          },
          {
            "text": "Github 推送失败问题",
            "link": "/云服务/Github 推送失败问题"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "footer": {
    "copyright": "Copyright © 2026 YuHan"
  }
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1776923680000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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