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

{
  "outline": {
    "label": "页面导航"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "returnToTopLabel": "返回顶部",
  "sidebarMenuLabel": "导航菜单",
  "logo": "/logo.png",
  "siteTitle": "工作博客",
  "footer": {
    "message": "渝ICP备18004947号",
    "copyright": "Copyright © 2026 Tsan Yang"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "技术方向",
      "items": [
        {
          "text": "视觉图像",
          "link": "/visual"
        },
        {
          "text": "人工智能",
          "link": "/ai"
        }
      ]
    },
    {
      "text": "管理方向",
      "items": [
        {
          "text": "技术管理",
          "link": "/tm"
        },
        {
          "text": "项目管理",
          "link": "/pm"
        },
        {
          "text": "首席执行官",
          "link": "/cto"
        },
        {
          "text": "首席信息官",
          "link": "/cio"
        }
      ]
    },
    {
      "text": "关于我",
      "link": "/about"
    }
  ],
  "sidebar": {
    "/visual/": [
      {
        "text": "外周血视觉链路",
        "link": "/visual/"
      },
      {
        "text": "采图与质控",
        "link": "/visual/capture-qc"
      },
      {
        "text": "预处理实战",
        "link": "/visual/preprocess-peripheral-blood"
      },
      {
        "text": "OCR与视野元数据",
        "link": "/visual/ocr-fov-metadata"
      },
      {
        "text": "细胞标注规范",
        "link": "/visual/cell-annotation-spec"
      },
      {
        "text": "Cvat",
        "link": "/visual/cvat"
      },
      {
        "text": "Cvat之自动标注",
        "link": "/visual/cvat-annotation"
      },
      {
        "text": "OpenCV摄像头入门",
        "link": "/visual/opencv-camera-basic"
      }
    ],
    "/ai/": [
      {
        "text": "机器学习",
        "link": "/ai/ml-frame"
      },
      {
        "text": "机器学习之模型训练",
        "link": "/ai/ml-train"
      },
      {
        "text": "机器学习之模型评估与调优",
        "link": "/ai/ml-tuning"
      },
      {
        "text": "机器学习之容器化部署",
        "link": "/ai/ml-deploy"
      },
      {
        "text": "机器学习之训练运维",
        "link": "/ai/ml-ops"
      },
      {
        "text": "智能体框架",
        "link": "/ai/agent"
      },
      {
        "text": "智能体框架之Dify",
        "link": "/ai/agent-dify"
      },
      {
        "text": "智能体框架之LangChain",
        "link": "/ai/agent-langchain"
      },
      {
        "text": "智能体框架之AutoGen",
        "link": "/ai/agent-autogen"
      },
      {
        "text": "人机协作",
        "link": "/ai/tool-copilot"
      },
      {
        "text": "人机协作之Cursor",
        "link": "/ai/tool-cursor"
      },
      {
        "text": "人机协作之Codex",
        "link": "/ai/tool-codex"
      },
      {
        "text": "人机协作之Rules",
        "link": "/ai/tool-rules"
      }
    ],
    "/tm/": [
      {
        "text": "管理心法",
        "link": "/tm/manage"
      },
      {
        "text": "管理心法之看方向",
        "link": "/tm/manage-direction"
      },
      {
        "text": "管理心法之带人",
        "link": "/tm/manage-leadingPeople"
      },
      {
        "text": "管理心法之做事",
        "link": "/tm/manage-task"
      },
      {
        "text": "管理心法之沟通",
        "link": "/tm/manage-talk"
      },
      {
        "text": "研发效率",
        "link": "/tm/efficiency"
      },
      {
        "text": "研发效率之优化流程",
        "link": "/tm/optimize-process"
      },
      {
        "text": "研发效率之团队工程",
        "link": "/tm/efficiency-teams"
      },
      {
        "text": "研发效率之个人工程",
        "link": "/tm/efficiency-individual"
      },
      {
        "text": "研发效率之管理和文化",
        "link": "/tm/efficiency-culture"
      }
    ],
    "/pm/": [
      {
        "text": "十大知识域",
        "link": "/pm"
      },
      {
        "text": "知识域之范围管理",
        "link": "/pm/k-domain-scope"
      },
      {
        "text": "知识域之进度管理",
        "link": "/pm/k-domain-schedule"
      },
      {
        "text": "知识域之成本管理",
        "link": "/pm/k-domain-cost"
      },
      {
        "text": "知识域之质量管理",
        "link": "/pm/k-demain-quality"
      },
      {
        "text": "知识域之资源管理",
        "link": "/pm/k-domain-resource"
      },
      {
        "text": "知识域之风险管理",
        "link": "/pm/k-domain-risk"
      },
      {
        "text": "知识域之采购管理",
        "link": "/pm/k-domain-procurement"
      },
      {
        "text": "知识域之干系人管理",
        "link": "/pm/k-domain-stakeholder"
      },
      {
        "text": "知识域之沟通管理",
        "link": "/pm/k-domain-communication"
      }
    ],
    "/cto/": [
      {
        "text": "打作团队战斗力",
        "link": "/"
      }
    ],
    "/officer/": [
      {
        "text": "领导力",
        "link": "/"
      },
      {
        "text": "人员管理",
        "link": "/"
      },
      {
        "text": "技术实力",
        "link": "/"
      },
      {
        "text": "体系搭建",
        "link": "/"
      },
      {
        "text": "文化构建",
        "link": "/"
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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