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

{
  "logo": "/avatar.jpg",
  "search": {
    "provider": "local"
  },
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "课程笔记",
      "items": [
        {
          "text": "高级数据库技术（金培权）",
          "link": "/courseNotes/adb/"
        },
        {
          "text": "程序设计语言原理（华保健）",
          "link": "/courseNotes/popl/"
        }
      ]
    },
    {
      "text": "自学笔记",
      "items": [
        {
          "text": "前端笔记",
          "link": "/selfstudyNotes/frontend/"
        },
        {
          "text": "后端笔记",
          "link": "/selfstudyNotes/backend/"
        }
      ]
    },
    {
      "text": "网上冲浪海难",
      "items": [
        {
          "text": "上古卷轴5",
          "link": "/solutionNotes/tel5/mo2intro"
        },
        {
          "text": "杂项记录",
          "link": "/solutionNotes/issues/fixVitePress"
        }
      ]
    }
  ],
  "sidebar": {
    "/selfstudyNotes/": {
      "base": "/selfstudyNotes/",
      "items": [
        {
          "text": "后端",
          "link": "backend/index.md"
        },
        {
          "text": "前端",
          "link": "frontend/index.md",
          "items": [
            {
              "text": "HTML & CSS Notes",
              "link": "frontend/html-css-bagu"
            },
            {
              "text": "javascript Notes",
              "link": "frontend/js-bagu"
            },
            {
              "text": "JavaScript 模块化",
              "link": "frontend/JsModule"
            },
            {
              "text": "计算机网络和浏览器",
              "link": "frontend/network-bagu"
            },
            {
              "text": "React Notes",
              "link": "frontend/React-bagu"
            },
            {
              "text": "Experience Notes",
              "link": "frontend/uniappProjectNotes"
            },
            {
              "text": "Vue Notes",
              "link": "frontend/vue-bagu"
            }
          ]
        }
      ]
    },
    "/courseNotes/": {
      "base": "/courseNotes/",
      "items": [
        {
          "text": "高级数据库技术",
          "link": "adb/index.md",
          "items": [
            {
              "text": "数据库日志和恢复",
              "link": "adb/c10LogRecovery"
            },
            {
              "text": "数据库并发控制",
              "link": "adb/c11concurrencyControl"
            },
            {
              "text": "数据库系统",
              "link": "adb/c1DBsystem"
            },
            {
              "text": "关系型数据库",
              "link": "adb/c2relationalDatabase"
            },
            {
              "text": "数据库模式设计",
              "link": "adb/c3-1schemaDesign"
            },
            {
              "text": "数据库设计方法",
              "link": "adb/c3-2DBD"
            },
            {
              "text": "数据库数据存储",
              "link": "adb/c4dataStorage"
            },
            {
              "text": "数据库数据表示",
              "link": "adb/c5dataRepresentation"
            },
            {
              "text": "数据库缓冲管理",
              "link": "adb/c6bufferManagement"
            },
            {
              "text": "数据库索引结构",
              "link": "adb/c7indexStructure"
            },
            {
              "text": "数据库查询优化",
              "link": "adb/c8queryOptimization"
            },
            {
              "text": "数据库查询",
              "link": "adb/c9queryExecution"
            }
          ]
        },
        {
          "text": "程序设计语言原理（编译器）",
          "link": "popl/index.md",
          "items": [
            {
              "text": "api-examples",
              "link": "popl/api-examples"
            },
            {
              "text": "第一章 概览",
              "link": "popl/chap1-overview"
            },
            {
              "text": "markdown-examples",
              "link": "popl/markdown-examples"
            }
          ]
        }
      ]
    },
    "/solutionNotes/": {
      "base": "/solutionNotes/",
      "items": [
        {
          "text": "ISSUES",
          "link": "issues/index.md",
          "items": [
            {
              "text": "VitePress 自定义",
              "link": "issues/fixVitePress"
            },
            {
              "text": "前端环境备忘录",
              "link": "issues/frontendconfig"
            },
            {
              "text": "Rust 环境配置",
              "link": "issues/RustEnvironment"
            }
          ]
        },
        {
          "text": "TEL 5",
          "link": "tel5/index.md",
          "items": [
            {
              "text": "Mod Organizer2 入门",
              "link": "tel5/mo2intro"
            }
          ]
        }
      ]
    }
  },
  "footer": {
    "message": "Released under the GNU General Public License v3.0.",
    "copyright": "Copyright © 2024-present SoreyLong"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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