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

{
  "logo": "",
  "siteTitle": "Blog of zxwin",
  "nav": [
    {
      "text": "主页",
      "link": "/README"
    },
    {
      "text": "知识体系",
      "items": [
        {
          "text": "前端",
          "link": "/knowledge/frontEnd/html/01_H5Tag"
        },
        {
          "text": "解决方案",
          "link": "/knowledge/solution/01_cursor"
        }
      ]
    },
    {
      "text": "工作技能",
      "link": "/work/01_bitOne"
    },
    {
      "text": "学会管理",
      "link": "/manage/01_needTodo"
    }
  ],
  "sidebar": {
    "/knowledge/frontEnd/": {
      "base": "/knowledge/frontEnd/",
      "items": [
        {
          "text": "HTML",
          "base": "/knowledge/frontEnd/html/",
          "collapsed": false,
          "items": [
            {
              "text": "进击的 HTML5",
              "link": "01_H5Tag.md"
            },
            {
              "text": "如何理解 HTML5 语义化",
              "link": "02_H5Semanticization.md"
            },
            {
              "text": "移动端 H5 注意事项总结",
              "link": "03_H5Mobile.md"
            },
            {
              "text": "Web Components",
              "base": "/knowledge/frontEnd/html/webComponents/",
              "items": [
                {
                  "text": "不可忽视的 Web Components",
                  "link": "01_WebComponents.md"
                }
              ]
            }
          ]
        },
        {
          "text": "CSS",
          "base": "/knowledge/frontEnd/css/",
          "collapsed": true,
          "items": [
            {
              "text": "多种方式实现居中",
              "link": "01_cssCenter.md"
            },
            {
              "text": "BFC 背后的布局问题",
              "link": "02_bfc.md"
            },
            {
              "text": "CSS Modules 理论和实战",
              "link": "03_cssModules.md"
            },
            {
              "text": "CSS 变量和主题切换优雅实现",
              "link": "04_cssVariable.md"
            },
            {
              "text": "响应式布局和 Bootstrap 的实现分析",
              "link": "05_responsiveLayout.md"
            },
            {
              "text": "CSS 最佳实践",
              "link": "06_cssBestPractice.md"
            }
          ]
        },
        {
          "text": "JavaScript",
          "base": "/knowledge/frontEnd/javascript/",
          "collapsed": true,
          "items": [
            {
              "text": "this 到底指向谁呢？",
              "link": "01_this.md"
            }
          ]
        },
        {
          "text": "前端工程化",
          "base": "/knowledge/frontEnd/engineering/",
          "collapsed": true,
          "items": [
            {
              "text": "工程规范",
              "base": "/knowledge/frontEnd/engineering/specification/",
              "collapsed": true,
              "items": [
                {
                  "text": "基于 ESLint 9 前端工程规范化最佳实践",
                  "link": "01_eslint.md"
                }
              ]
            },
            {
              "text": "工程架构",
              "base": "/knowledge/frontEnd/engineering/architecture/",
              "collapsed": true,
              "items": [
                {
                  "text": "monorepo 架构",
                  "base": "/knowledge/frontEnd/engineering/architecture/monorepo/",
                  "collapsed": true,
                  "items": [
                    {
                      "text": "基于 pnpm monorepo 项目工程化设计",
                      "link": "01_pnpm & monorepo.md"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    "/knowledge/solution/": {
      "base": "/knowledge/solution/",
      "items": [
        {
          "text": "Cursor 通用解决方案",
          "link": "01_cursor.md"
        }
      ]
    },
    "/work/": {
      "base": "/work/",
      "items": [
        {
          "text": "如何做好项目 1 号位",
          "link": "01_bitOne.md"
        }
      ]
    },
    "/manage/": {
      "base": "/manage/",
      "items": [
        {
          "text": "新晋主管需要做什么",
          "link": "01_needTodo.md"
        }
      ]
    }
  },
  "aside": true,
  "outline": {
    "label": "目录大纲",
    "level": [
      2,
      4
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/zxwin0125"
    }
  ],
  "footer": {
    "message": "Released under the CC BY-NC-ND 4.0 License.",
    "copyright": "Copyright © 2024-present zxwin_0125@163.com"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "full",
      "timeStyle": "medium"
    }
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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