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 ​

{
  "nav": [
    {
      "text": "博客",
      "link": "/blog/java/cas",
      "activeMatch": "/blog/"
    },
    {
      "text": "算法",
      "link": "/ai/ml/basic",
      "activeMatch": "/ai/"
    },
    {
      "text": "后端",
      "link": "/backend/java/basic",
      "activeMatch": "/backend/"
    },
    {
      "text": "前端",
      "link": "/frontend/network/basic",
      "activeMatch": "/frontend/"
    },
    {
      "text": "项目",
      "link": "/project/own/askdata",
      "activeMatch": "/project/"
    },
    {
      "text": "关于",
      "link": "/common/contact",
      "activeMatch": "/common/"
    }
  ],
  "sidebar": {
    "/blog/": [
      {
        "text": "Java",
        "items": [
          {
            "text": "Java 内存模型",
            "link": "/blog/java/jmm"
          },
          {
            "text": "CAS 乐观锁",
            "link": "/blog/java/cas"
          }
        ]
      }
    ],
    "/ai/": [
      {
        "text": "机器学习",
        "items": [
          {
            "text": "基础知识",
            "link": "/ai/ml/basic"
          },
          {
            "text": "决策树",
            "link": "/ai/ml/decision"
          }
        ]
      },
      {
        "text": "深度学习",
        "items": [
          {
            "text": "注意力机制",
            "link": "/ai/dl/attention"
          },
          {
            "text": "推荐系统",
            "link": "/ai/dl/recsys"
          }
        ]
      },
      {
        "text": "大语言模型",
        "items": [
          {
            "text": "OpenAI",
            "link": "/ai/llm/openai"
          }
        ]
      }
    ],
    "/backend/": [
      {
        "text": "Java",
        "items": [
          {
            "text": "基础",
            "link": "/backend/java/basic"
          },
          {
            "text": "集合",
            "link": "/backend/java/collection"
          },
          {
            "text": "IO",
            "link": "/backend/java/io"
          },
          {
            "text": "并发与多线程",
            "link": "/backend/java/concurrent"
          },
          {
            "text": "设计模式",
            "link": "/backend/java/design"
          },
          {
            "text": "JVM",
            "link": "/backend/java/jvm"
          }
        ]
      },
      {
        "text": "Spring",
        "items": [
          {
            "text": "Spring",
            "link": "/backend/spring/spring"
          },
          {
            "text": "Spring Boot",
            "link": "/backend/spring/spring-boot"
          },
          {
            "text": "Spring Cloud",
            "link": "/backend/spring/spring-cloud"
          }
        ]
      },
      {
        "text": "数据库",
        "items": [
          {
            "text": "基础",
            "link": "/backend/db/basic"
          },
          {
            "text": "MySQL",
            "link": "/backend/db/mysql"
          },
          {
            "text": "Redis",
            "link": "/backend/db/redis"
          }
        ]
      },
      {
        "text": "数据结构与算法",
        "items": [
          {
            "text": "数据结构",
            "link": "/backend/algo/struct"
          },
          {
            "text": "查找排序",
            "link": "/backend/algo/sort"
          }
        ]
      }
    ],
    "/frontend/": [
      {
        "text": "计算机网络",
        "items": [
          {
            "text": "基础知识",
            "link": "/frontend/network/basic"
          }
        ]
      }
    ],
    "/project/": [
      {
        "text": "我的项目",
        "items": [
          {
            "text": "问数",
            "link": "/project/own/askdata"
          },
          {
            "text": "希羽",
            "link": "/project/own/xiyu"
          },
          {
            "text": "知源笔记",
            "link": "/project/own/gino"
          },
          {
            "text": "面试题库",
            "link": "/project/own/interview"
          }
        ]
      }
    ],
    "/common/": [
      {
        "text": "联系我",
        "link": "/common/contact"
      },
      {
        "text": "Example",
        "link": "/common/example"
      },
      {
        "text": "API Examples",
        "link": "/common/api-examples"
      },
      {
        "text": "Markdown Examples",
        "link": "/common/markdown-examples"
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "search": {
    "provider": "local"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "darkModeSwitchLabel": "外观",
  "sidebarMenuLabel": "菜单",
  "returnToTopLabel": "返回顶部",
  "outline": [
    2,
    3
  ],
  "outlineTitle": "目录",
  "lastUpdatedText": "最后更新时间"
}

Page Data ​

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

Page Frontmatter ​

{
  "outline": "deep"
}

More ​

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