xnscu

Appearance

Runtime API Examples ​

well..

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:

md
<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 ​

{
  "footer": {
    "message": "version 0.2.0"
  },
  "logo": {
    "src": "/vitepress-logo-mini.svg",
    "width": 24,
    "height": 24
  },
  "outline": {
    "label": "页面导航"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "editLink": {
    "pattern": "https://github.com/xiangnanscu/xiangnanscu.github.io/edit/master/docs/:path",
    "text": "编辑"
  },
  "lastUpdated": {
    "text": "更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "short"
    }
  },
  "nav": [],
  "search": {
    "provider": "algolia",
    "options": {
      "appId": "DZOK7P9YI0",
      "apiKey": "500e3bc4051eb3541f2fde622983568b",
      "indexName": "xnscu"
    }
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/xiangnanscu/xiangnanscu.github.io"
    }
  ],
  "sidebar": [
    {
      "text": "目录",
      "link": "https://github.com/xiangnanscu",
      "items": [
        {
          "text": "api examples",
          "link": "/api-examples"
        },
        {
          "text": "chat",
          "items": [
            {
              "text": "ChatGPT数学基础",
              "link": "/chat/ChatGPT数学基础"
            },
            {
              "text": "JS简易内置并发函数",
              "link": "/chat/JS简易内置并发函数"
            },
            {
              "text": "Postfix搭建邮件服务器",
              "link": "/chat/Postfix搭建邮件服务器"
            },
            {
              "text": "Vue3+Vite+json server后端数据模拟框架",
              "link": "/chat/Vue3+Vite+json-server后端数据模拟框架"
            },
            {
              "text": "cloudflare r2 删除ongoing upload",
              "link": "/chat/cloudflare-r2-删除ongoing-upload"
            },
            {
              "text": "ffmpeg转换格式压缩视频",
              "link": "/chat/ffmpeg转换格式压缩视频"
            },
            {
              "text": "systemctl停用",
              "link": "/chat/systemctl停用"
            },
            {
              "text": "systemctl彻底删除postfix服务",
              "link": "/chat/systemctl彻底删除postfix服务"
            },
            {
              "text": "ubuntu如何结束top命令显示COMMAND对应名称的进程",
              "link": "/chat/ubuntu如何结束top命令显示COMMAND对应名称的进程"
            },
            {
              "text": "video视频播放抓取当前帧并下载为JPG图片",
              "link": "/chat/video视频播放抓取当前帧并下载为JPG图片"
            },
            {
              "text": "个人开发者跨平台开发claude建议flutter, MAUI哭晕在厕所",
              "link": "/chat/个人开发者跨平台开发claude建议flutter,-MAUI哭晕在厕所"
            },
            {
              "text": "如何一个事务内插入和返回数据(包含关联数据)",
              "link": "/chat/如何一个事务内插入和返回数据(包含关联数据)"
            },
            {
              "text": "如何实现输入框粘贴自动上传图片的功能",
              "link": "/chat/如何实现输入框粘贴自动上传图片的功能"
            },
            {
              "text": "汉字和数字垂直居中对齐问题",
              "link": "/chat/汉字和数字垂直居中对齐问题"
            },
            {
              "text": "配置SDK和JAVA还有RUST",
              "link": "/chat/配置SDK和JAVA还有RUST"
            }
          ],
          "collapsed": false
        },
        {
          "text": "markdown examples",
          "link": "/markdown-examples"
        },
        {
          "text": "postgresql",
          "items": [
            {
              "text": "about pg insert or get or create",
              "link": "/postgresql/about-pg-insert-or-get_or_create"
            },
            {
              "text": "postgresql分页查询优化",
              "link": "/postgresql/postgresql分页查询优化"
            },
            {
              "text": "postgresql如何查看执行过的语句的最长查询时间和对应的语句",
              "link": "/postgresql/postgresql如何查看执行过的语句的最长查询时间和对应的语句"
            },
            {
              "text": "postgresql如何获取最大连接数",
              "link": "/postgresql/postgresql如何获取最大连接数"
            }
          ],
          "collapsed": false
        },
        {
          "text": "prompt",
          "items": [
            {
              "text": "D2模型生成器",
              "link": "/prompt/D2模型生成器"
            },
            {
              "text": "Model代码生成器",
              "link": "/prompt/Model代码生成器"
            },
            {
              "text": "just a test",
              "link": "/prompt/just-a-test"
            }
          ],
          "collapsed": false
        },
        {
          "text": "基于资源的权限控制 (ABAC)",
          "link": "/基于资源的权限控制-(ABAC)"
        },
        {
          "text": "工具",
          "items": [
            {
              "text": "doc2x",
              "link": "/工具/doc2x"
            }
          ],
          "collapsed": false
        },
        {
          "text": "读后感",
          "items": [
            {
              "text": "智能时代",
              "link": "/读后感/智能时代"
            }
          ],
          "collapsed": false
        },
        {
          "text": "随笔",
          "items": [
            {
              "text": "占位符",
              "link": "/随笔/占位符"
            }
          ],
          "collapsed": false
        }
      ],
      "collapsed": false
    }
  ]
}

Page Data ​

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

Page Frontmatter ​

{
  "outline": "deep"
}

More ​

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

version 0.2.0