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

{
  "lastUpdated": {
    "text": "最后更新",
    "formatOptions": {
      "dateStyle": "full",
      "timeStyle": "medium"
    }
  },
  "logo": {
    "src": "/logo.svg",
    "alt": "logo is missing..."
  },
  "siteTitle": "花木城",
  "search": {
    "provider": "local"
  },
  "outline": {
    "level": "deep",
    "label": "页面导航"
  },
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "命令",
      "link": "/note1/"
    },
    {
      "text": "教程",
      "link": "/note2/"
    },
    {
      "text": "杂记",
      "link": "/note3/"
    },
    {
      "text": "示例",
      "items": [
        {
          "text": "api-examples",
          "link": "/api-examples"
        },
        {
          "text": "markdown-examples",
          "link": "/markdown-examples"
        }
      ]
    }
  ],
  "sidebar": {
    "/note1": [
      {
        "text": "工具",
        "items": [
          {
            "text": "指令速查",
            "link": "/note1/"
          },
          {
            "text": "容器Docker",
            "link": "/note1/docker"
          },
          {
            "text": "版本管理Git",
            "link": "/note1/git"
          }
        ]
      },
      {
        "text": "Java后端",
        "items": [
          {
            "text": "集合类与IO",
            "link": "/note1/集合类与IO"
          }
        ]
      },
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          },
          {
            "text": "Docker命令",
            "link": "/package2/docker-note"
          }
        ]
      },
      {
        "text": "test",
        "items": [
          {
            "text": "Markdown Examples",
            "items": [
              {
                "text": "Markdown Examples",
                "link": "/markdown-examples"
              }
            ]
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          }
        ]
      }
    ],
    "/note2": [
      {
        "text": "index页面",
        "link": "/note2/"
      },
      {
        "text": "容器Docker的安装",
        "link": "/note2/docker-install"
      },
      {
        "text": "使用Docker安装stablediffusion",
        "link": "/note2/sd-docker-install"
      }
    ],
    "/note3": [
      {
        "base": "/note3/",
        "text": "乱七八糟",
        "items": [
          {
            "text": "前端",
            "link": "front-end"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/Anh-bro"
    },
    {
      "icon": {
        "svg": "<svg t=\"1711704772479\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"10633\" width=\"200\" height=\"200\"><path d=\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\" fill=\"#888888\" p-id=\"10634\"></path></svg>"
      },
      "link": "https://gitee.com/huamucheng"
    }
  ],
  "footer": {
    "message": "像旧时候，像老朋友。",
    "copyright": "Copyright © 2024-present Han"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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