运行时 API 示例

此页面演示了 VitePress 提供的某些运行时 API 的用法。

主要的 useData（） API 可以用于访问当前页面的站点、主题和页面数据。它在 .md 和 .vue 文件中都可以使用：

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## 结果

### 主题数据

<pre>{{ theme }}</pre>

### 页面数据

<pre>{{ page }}</pre>

### 页面 Frontmatter

<pre>{{ frontmatter }}</pre>

结果

主题数据

{
  "logo": {
    "src": "/logo/vitepress-logo-mini.svg",
    "width": 24,
    "height": 24
  },
  "siteTitle": "VitePress基础框架",
  "nav": [
    {
      "text": "教程",
      "link": "/guide/install",
      "activeMatch": "/guide"
    },
    {
      "text": "示例",
      "link": "/examples/markdown",
      "activeMatch": "/examples"
    },
    {
      "text": "下拉导航",
      "items": [
        {
          "text": "下拉导航标题",
          "items": [
            {
              "text": "子项A",
              "link": "https://github.com/dcdy/vitepress-template/edit/main/docs/.vitepress/config.mts"
            },
            {
              "text": "子项B",
              "link": "https://gitee.com/xia_mei_ting/vitepress-template/blob/main/docs/.vitepress/config.mts"
            }
          ]
        }
      ]
    },
    {
      "text": "设置",
      "items": [
        {
          "component": "ConfigSet",
          "props": {
            "title": "设置"
          }
        }
      ]
    }
  ],
  "sidebar": {
    "/guide": {
      "base": "/guide",
      "items": [
        {
          "text": "简介",
          "collapsed": false,
          "items": [
            {
              "text": "安装",
              "link": "/install"
            },
            {
              "text": "配置",
              "collapsed": false,
              "items": [
                {
                  "text": "首页配置",
                  "link": "/config-home"
                },
                {
                  "text": "文档配置",
                  "link": "/config-doc"
                },
                {
                  "text": "其他配置",
                  "link": "/config-other"
                }
              ]
            },
            {
              "text": "布局插槽",
              "link": "/layout-slot"
            }
          ]
        },
        {
          "text": "插件",
          "base": "/guide/plugin",
          "collapsed": false,
          "items": [
            {
              "text": "图片",
              "link": "/image"
            },
            {
              "text": "代码块",
              "link": "/code"
            },
            {
              "text": "样式美化",
              "link": "/style"
            },
            {
              "text": "一些组件",
              "link": "/util"
            }
          ]
        },
        {
          "text": "部署",
          "collapsed": false,
          "items": [
            {
              "text": "Github Pages",
              "link": "/github-pages"
            }
          ]
        }
      ]
    },
    "/examples": {
      "base": "/examples",
      "items": [
        {
          "text": "示例",
          "items": [
            {
              "text": "Markdown",
              "items": [
                {
                  "text": "基础示例",
                  "link": "/markdown"
                },
                {
                  "text": "扩展示例",
                  "link": "/markdown-expand"
                }
              ]
            },
            {
              "text": "API",
              "link": "/api"
            }
          ]
        }
      ]
    }
  },
  "outline": {
    "level": [
      2,
      3
    ],
    "label": "页面导航"
  },
  "editLink": {
    "pattern": "https://github.com/dcdy/vitepress-template/edit/main/docs/:path",
    "text": "在 GitHub 上编辑此页面"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "short"
    }
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "footer": {
    "message": "基于MIT许可发布",
    "copyright": "版权所有 © 2024 dcdyxmt@163.com"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/dcdy/vitepress-template"
    },
    {
      "icon": {
        "svg": "<svg t=\"1727428813465\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2268\" width=\"200\" height=\"200\"><path d=\"M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z\" fill=\"#C71D23\" p-id=\"2269\"></path></svg>"
      },
      "link": "https://gitee.com/xia_mei_ting/vitepress-template"
    }
  ],
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式",
  "externalLinkIcon": true,
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "noResultsText": "无法找到相关结果",
          "resetButtonTitle": "清除查询条件",
          "displayDetails": "显示详情",
          "backButtonTitle": "返回",
          "footer": {
            "selectText": "选择",
            "navigateText": "切换",
            "closeText": "关闭"
          }
        }
      }
    }
  }
}

页面数据

{
  "title": "运行时 API 示例",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "examples/api.md",
  "filePath": "examples/api.md",
  "lastUpdated": 1735120526000
}

页面 Frontmatter

{
  "outline": "deep"
}

更多

查看文档中的 运行时 API 的完整列表.