Runtime API Examples

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

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

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

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

## Results

### 主题数据

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

### 页面数据

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

### 页面前置数据

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

Results

主题数据

{
  "lastUpdated": {
    "text": "最后更新时间"
  },
  "outlineTitle": "页面导航",
  "darkModeSwitchLabel": "主题",
  "sidebarMenuLabel": "菜单",
  "returnToTopLabel": "回到顶部",
  "langMenuLabel": "多语言",
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "示例",
      "link": "/examples/markdown-examples"
    },
    {
      "text": "学习笔记",
      "link": "/notes/internet/sse"
    }
  ],
  "sidebar": [
    {
      "text": "官方示例",
      "collapsed": true,
      "items": [
        {
          "text": "md文件试例",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "运行时API示例",
          "link": "/examples/api-examples"
        }
      ]
    },
    {
      "text": "学习笔记",
      "collapsed": true,
      "items": [
        {
          "text": "JavaScript",
          "collapsed": true,
          "items": [
            {
              "text": "数组方法大全",
              "link": "/notes/javaScript/array"
            },
            {
              "text": "this 指向规则",
              "link": "/notes/javaScript/this"
            },
            {
              "text": "函数",
              "link": "/notes/javaScript/function"
            },
            {
              "text": "文件",
              "link": "/notes/javaScript/file"
            }
          ]
        },
        {
          "text": "网络相关",
          "collapsed": true,
          "items": [
            {
              "text": "SSE学习笔记",
              "link": "/notes/internet/sse"
            },
            {
              "text": "常见状态码以及含义",
              "link": "/notes/internet/statusCode"
            }
          ]
        },
        {
          "text": "vue3相关",
          "collapsed": true,
          "items": [
            {
              "text": "setup语法糖",
              "link": "/notes/vue3/setup"
            }
          ]
        }
      ]
    }
  ],
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

页面数据

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

页面前置数据

{
  "outline": "deep"
}

更多

查看markdown扩展的完整列表.