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": "/"
    },
    {
      "text": "部署手册",
      "link": "/deployment-guide/quickstart"
    },
    {
      "text": "官网",
      "link": "https://www.csdeshang.com",
      "target": "_blank"
    }
  ],
  "sidebar": {
    "/development-guide/": [
      {
        "text": "开发手册",
        "items": [
          {
            "text": "Index",
            "link": "/guide/"
          },
          {
            "text": "One",
            "link": "/guide/one"
          },
          {
            "text": "Two",
            "link": "/guide/two"
          }
        ]
      }
    ],
    "/user-guide/": [
      {
        "text": "用户手册",
        "items": [
          {
            "text": "Index",
            "link": "/config/"
          },
          {
            "text": "Three",
            "link": "/config/three"
          },
          {
            "text": "Four",
            "link": "/config/four"
          }
        ]
      }
    ],
    "/admin-guide/": [
      {
        "text": "管理员手册",
        "items": [
          {
            "text": "Index",
            "link": "/config/"
          },
          {
            "text": "Three",
            "link": "/config/three"
          },
          {
            "text": "Four",
            "link": "/config/four"
          }
        ]
      }
    ],
    "/deployment-guide/": [
      {
        "text": "部署手册",
        "items": [
          {
            "text": "快速开始",
            "link": "/deployment-guide/quickstart"
          },
          {
            "text": "安装部署",
            "items": [
              {
                "text": "安装指南",
                "link": "/deployment-guide/installation/"
              },
              {
                "text": "ThinkPHP后端",
                "link": "/deployment-guide/installation/thinkphp"
              },
              {
                "text": "Vue3管理后台",
                "link": "/deployment-guide/installation/vue3"
              },
              {
                "text": "UniApp移动端",
                "link": "/deployment-guide/installation/uniapp"
              }
            ]
          },
          {
            "text": "微信配置",
            "items": [
              {
                "text": "公众号配置",
                "link": "/deployment-guide/wechat-config/official"
              },
              {
                "text": "小程序配置",
                "link": "/deployment-guide/wechat-config/mini-program"
              },
              {
                "text": "开放平台配置",
                "link": "/deployment-guide/wechat-config/open-platform"
              },
              {
                "text": "微信账户关联配置",
                "link": "/deployment-guide/wechat-config/account-association"
              }
            ]
          },
          {
            "text": "支付配置",
            "items": [
              {
                "text": "微信支付",
                "link": "/deployment-guide/payment-config/wechat-pay"
              },
              {
                "text": "支付宝",
                "link": "/deployment-guide/payment-config/alipay"
              }
            ]
          },
          {
            "text": "地图配置",
            "items": [
              {
                "text": "高德地图",
                "link": "/deployment-guide/lbs-config/gaode"
              },
              {
                "text": "腾讯地图",
                "link": "/deployment-guide/lbs-config/tencent"
              },
              {
                "text": "百度地图",
                "link": "/deployment-guide/lbs-config/baidu"
              }
            ]
          },
          {
            "text": "存储配置",
            "items": [
              {
                "text": "阿里云OSS",
                "link": "/deployment-guide/storage-config/aliyun-oss"
              },
              {
                "text": "腾讯云COS",
                "link": "/deployment-guide/storage-config/tencent-cos"
              },
              {
                "text": "本地存储",
                "link": "/deployment-guide/storage-config/local-storage"
              }
            ]
          },
          {
            "text": "短信配置",
            "items": [
              {
                "text": "阿里云短信",
                "link": "/deployment-guide/sms-config/aliyun-sms"
              },
              {
                "text": "腾讯云短信",
                "link": "/deployment-guide/sms-config/tencent-sms"
              }
            ]
          },
          {
            "text": "邮件配置",
            "items": [
              {
                "text": "邮件服务",
                "link": "/deployment-guide/email-config/"
              }
            ]
          }
        ]
      }
    ]
  },
  "socialLinks": []
}

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.