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": "开通Plus会员",
      "link": "/posts/gpt/gpt-plus"
    },
    {
      "text": "AI Cartoon Generator",
      "link": "https://cartoongen.com/"
    },
    {
      "text": "Suno AI Music",
      "link": "https://sunoai-music.com/"
    }
  ],
  "sidebar": [
    {
      "text": "会员服务升级",
      "items": [
        {
          "text": "Chatgpt升级GPT Plus🚀",
          "link": "/posts/gpt/gpt-plus"
        },
        {
          "text": "Onlyfans开通指南🤣",
          "link": "/posts/blog/onlyfans"
        },
        {
          "text": "Onlyfans常见问题解答🤣",
          "link": "/posts/blog/onlyfans-faq"
        }
      ]
    },
    {
      "text": "GPT使用指南",
      "items": [
        {
          "text": "大模型术语扫盲",
          "link": "/posts/gpt/glossary-intro"
        },
        {
          "text": "大模型入门教程1-提示词入门篇",
          "link": "/posts/gpt/prompt/prompt-intro"
        },
        {
          "text": "大模型入门使用教程2-提示词工程",
          "link": "/posts/gpt/prompt/prompt-p2"
        },
        {
          "text": "深度对比GPT4vs3.5 附常用场景",
          "link": "/posts/gpt/gpt4-3.5"
        },
        {
          "text": "Prompt资源📚",
          "link": "/posts/gpt/prompt"
        },
        {
          "text": "GPT使用-提示工程最佳实践🤖",
          "link": "/posts/gpt/gpt-intro"
        },
        {
          "text": "AI副业赚钱案例💰",
          "link": "/posts/gpt/gpt-money"
        },
        {
          "text": "GPTs教程资源📚",
          "link": "/posts/gpt/gpts"
        },
        {
          "text": "Prompt资源📚",
          "link": "/posts/gpt/prompt"
        },
        {
          "text": "Claude3✨",
          "link": "/posts/gpt/claude3"
        },
        {
          "text": "Claude3-视觉 API 评估🧐",
          "link": "/posts/gpt/claude3-use"
        },
        {
          "text": "OPENAI 春季发布会解析",
          "link": "/posts/gpt/gpt4o"
        }
      ]
    },
    {
      "text": "Sora专栏-GPT4生成视频",
      "items": [
        {
          "text": "如何使用Sora🌊",
          "link": "/posts/gpt/sora"
        },
        {
          "text": "Datawhale学习笔记-C1",
          "link": "/posts/gpt/sora-datawhale-c1"
        }
      ]
    },
    {
      "text": "小产品",
      "items": [
        {
          "text": "面试高频算法网站",
          "link": "/posts/blog/leetcode"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/tonyljx"
    }
  ],
  "search": {
    "provider": "local"
  },
  "outline": {
    "level": "deep",
    "label": "目录"
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2024-present RunningPig"
  }
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep",
    "date": "2024-01-25T00:00:00.000Z"
  },
  "headers": [],
  "relativePath": "posts/blog/api-examples.md",
  "filePath": "posts/blog/api-examples.md",
  "lastUpdated": 1706278737000
}

Page Frontmatter

{
  "outline": "deep",
  "date": "2024-01-25T00:00:00.000Z"
}

More

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