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

{
  "outline": false,
  "sidebar": [
    {
      "text": "开始使用",
      "collapsed": false,
      "items": [
        {
          "text": "类视搜图简介和安装",
          "link": "/installation",
          "collapsed": false,
          "items": [
            {
              "text": "1. 简介",
              "link": "/installation#1-简介"
            },
            {
              "text": "2. 系统要求与安装",
              "link": "/installation#2-系统要求与安装"
            }
          ]
        },
        {
          "text": "类视搜图首次启动与初始化",
          "link": "/first-start",
          "collapsed": false,
          "items": [
            {
              "text": "启动软件",
              "link": "/first-start#启动软件"
            },
            {
              "text": "登录账户",
              "link": "/first-start#登录账户"
            },
            {
              "text": "选择搜索模式",
              "link": "/first-start#选择搜索模式"
            },
            {
              "text": "完成初始化",
              "link": "/first-start#完成初始化"
            }
          ]
        },
        {
          "text": "类视搜图界面介绍",
          "link": "/interface-introduction",
          "collapsed": false,
          "items": [
            {
              "text": "顶部栏",
              "link": "/interface-introduction#顶部栏"
            },
            {
              "text": "侧栏",
              "link": "/interface-introduction#侧栏"
            },
            {
              "text": "图像列表",
              "link": "/interface-introduction#图像列表"
            },
            {
              "text": "检查器",
              "link": "/interface-introduction#检查器"
            },
            {
              "text": "界面自定义",
              "link": "/interface-introduction#界面自定义"
            }
          ]
        }
      ]
    },
    {
      "text": "示例",
      "collapsed": true,
      "items": [
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        },
        {
          "text": "Markdown Extension Examples",
          "link": "/markdown-examples"
        }
      ]
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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