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 © 2024 Tsan Yang"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "技术方向",
      "items": [
        {
          "text": "视觉图像",
          "link": "/visual"
        },
        {
          "text": "人工智能",
          "link": "/ai"
        }
      ]
    },
    {
      "text": "管理方向",
      "items": [
        {
          "text": "技术管理",
          "link": "/tm"
        },
        {
          "text": "项目管理",
          "link": "/pm"
        },
        {
          "text": "执行官",
          "link": "/officer"
        }
      ]
    },
    {
      "text": "关于我",
      "link": "/about"
    }
  ],
  "sidebar": {
    "/visual/": [
      {
        "text": "图像处理",
        "link": "/"
      },
      {
        "text": "图像变换",
        "link": "/"
      },
      {
        "text": "图像局部与分割",
        "link": "/"
      },
      {
        "text": "轮廓",
        "link": "/"
      },
      {
        "text": "跟踪与运动",
        "link": "/"
      },
      {
        "text": "投影三维视觉",
        "link": "/"
      },
      {
        "text": "摄像机模型与标定",
        "link": "/"
      },
      {
        "text": "机器学习",
        "link": "/"
      }
    ],
    "/ai/": [
      {
        "text": "机器学习",
        "link": "/"
      },
      {
        "text": "图像识别",
        "link": "/"
      },
      {
        "text": "语音识别",
        "link": "/"
      },
      {
        "text": "智能机器人",
        "link": "/"
      }
    ],
    "/tm/": [
      {
        "text": "管理方法论和角色认知",
        "link": "/cognition"
      },
      {
        "text": "管理规划",
        "link": "/"
      },
      {
        "text": "团队建设",
        "link": "/"
      },
      {
        "text": "任务管理",
        "link": "/"
      },
      {
        "text": "管理沟通",
        "link": "/"
      }
    ],
    "/pm/": [
      {
        "text": "立项管理",
        "link": "/"
      },
      {
        "text": "范围管理",
        "link": "/"
      },
      {
        "text": "进度管理",
        "link": "/"
      },
      {
        "text": "成本管理",
        "link": "/"
      },
      {
        "text": "质量管理",
        "link": "/"
      },
      {
        "text": "资源管理",
        "link": "/"
      },
      {
        "text": "沟通管理",
        "link": "/"
      },
      {
        "text": "采购管理",
        "link": "/"
      },
      {
        "text": "风险管理",
        "link": "/"
      },
      {
        "text": "干系人",
        "link": "/"
      },
      {
        "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.