Runtime API 示例

这个页面演示了一些由 VitePress 提供的运行时 api 的用法。

主要的 API useData() 可用于访问当前页面的站点、主题和页面数据。这适用于 .md 和 .vue 两个文件：

<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>

结果

Theme 数据

{
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "Java",
      "link": "/java/getstarted/roadmap",
      "activeMatch": "/java"
    },
    {
      "text": "前端",
      "link": "/frontend/getstarted/roadmap",
      "activeMatch": "/frontend"
    },
    {
      "text": "HarmonyOS",
      "link": "/harmonyos/getstarted/introduce",
      "activeMatch": "/harmonyos"
    },
    {
      "text": "杂项",
      "link": "/misc/blog-build",
      "activeMatch": "/misc"
    }
  ],
  "sidebar": {
    "/misc/": [
      {
        "text": "示例",
        "collapsed": true,
        "base": "/misc/examples/",
        "items": [
          {
            "text": "Markdown 示例",
            "link": "markdown-examples"
          },
          {
            "text": "Runtime API 示例",
            "link": "api-examples"
          }
        ]
      },
      {
        "text": "个人博客搭建",
        "link": "/misc/blog-build"
      }
    ],
    "/harmonyos/": [
      {
        "text": "开始",
        "collapsed": true,
        "base": "/harmonyos/getstarted/",
        "items": [
          {
            "text": "介绍",
            "link": "introduce"
          },
          {
            "text": "Web 开发者转 HarmonyOS",
            "link": "web-developer"
          }
        ]
      },
      {
        "text": "项目实战",
        "collapsed": true,
        "base": "/harmonyos/project/",
        "items": [
          {
            "text": "log插件的使用与axios的基本封装",
            "link": "log-and-axios"
          }
        ]
      }
    ],
    "/frontend/": [
      {
        "text": "开始",
        "collapsed": true,
        "base": "/frontend/getstarted/",
        "items": [
          {
            "text": "学习路线",
            "link": "roadmap"
          },
          {
            "text": "官方网站汇总",
            "link": "website"
          },
          {
            "text": "VS Code使用",
            "link": "vscode"
          }
        ]
      },
      {
        "text": "Vue3",
        "collapsed": true,
        "base": "/frontend/vue3/",
        "items": [
          {
            "text": "项目准备",
            "link": "project-prepare"
          },
          {
            "text": "项目实战",
            "link": "project"
          }
        ]
      }
    ],
    "/java/": [
      {
        "text": "开始",
        "collapsed": true,
        "base": "/java/getstarted/",
        "items": [
          {
            "text": "学习路线",
            "link": "roadmap"
          }
        ]
      },
      {
        "text": "JavaWeb",
        "collapsed": true,
        "base": "/java/javaweb/",
        "items": [
          {
            "text": "学习路线",
            "link": "roadmap"
          }
        ]
      },
      {
        "text": "Linux",
        "collapsed": true,
        "base": "/java/linux/",
        "items": [
          {
            "text": "介绍",
            "link": "introduce"
          },
          {
            "text": "安装 JDK",
            "link": "install-jdk"
          },
          {
            "text": "安装 MySQL",
            "link": "install-mysql"
          }
        ]
      }
    ]
  },
  "outline": {
    "label": "目录",
    "level": [
      2,
      3
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/focuest/blog"
    }
  ],
  "logo": {
    "src": "/image/home/logo.svg",
    "width": "24px",
    "height": "24px"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "displayDetails": "展开详情",
          "noResultsText": "无法找到相关结果",
          "resetButtonTitle": "清除查询条件",
          "footer": {
            "selectText": "选择",
            "navigateText": "切换",
            "closeText": "关闭"
          }
        }
      }
    }
  },
  "lastUpdated": {
    "text": "最后更新时间",
    "formatOptions": {
      "dateStyle": "full",
      "timeStyle": "medium"
    }
  },
  "footer": {
    "message": "玩命更新中...",
    "copyright": "版权所有 © 2024-2022-2025 focuest"
  },
  "editLink": {
    "pattern": "https://github.com/focuest/blog/edit/main/docs/:path",
    "text": "有错误？帮我修正"
  },
  "returnToTopLabel": "返回顶部"
}

Page 数据

{
  "title": "Runtime API 示例",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "misc/examples/api-examples.md",
  "filePath": "misc/examples/api-examples.md",
  "lastUpdated": 1717264484000
}

Page Frontmatter

{
  "outline": "deep"
}

更多

查看文档以获得运行时 api 的完整列表.