fanweibin.cn

主题

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:

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 ​

{
  "siteTitle": "fanweibin.cn",
  "logo": {
    "src": "/logo.svg",
    "width": 24,
    "height": 24,
    "alt": "FF"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "文章",
      "link": "/posts/"
    },
    {
      "text": "索引",
      "items": [
        {
          "text": "按分类",
          "link": "/categories"
        },
        {
          "text": "按标签",
          "link": "/tags"
        },
        {
          "text": "按年份",
          "link": "/posts/"
        }
      ]
    },
    {
      "text": "关于",
      "link": "/pages/about"
    },
    {
      "text": "RSS",
      "link": "/feed.xml",
      "target": "_blank"
    }
  ],
  "sidebar": {
    "/posts/": [
      {
        "text": "全部文章 (37)",
        "items": [
          {
            "text": "Lovart 完全指南：AI 设计 Agent 的功能、对比与最佳实践",
            "link": "/posts/2026-04-17-lovart-wan-quan-zhi-nan"
          },
          {
            "text": "Claude Opus 4.7 深度评测：百万上下文、极致推理与 AI Agent 新基准",
            "link": "/posts/2026-04-17-cL47dP9m"
          },
          {
            "text": "Claude Code Routines：让 AI 编程助手 7×24 自动干活",
            "link": "/posts/2026-04-15-IIVFr15b"
          },
          {
            "text": "Claude Desktop 三合一：Chat、Cowork、Code 深度对比与实战指南",
            "link": "/posts/2026-04-15-E1C4bEkd"
          },
          {
            "text": "Claude Managed Agents 深度解析：从概念到最佳实践",
            "link": "/posts/2026-04-09-HtCs1Xh7"
          },
          {
            "text": "2026 年 Claude Code 工作流框架全景对比：ECC、Superpowers、GSD、gstack、BMAD、Taskmaster、ZCF",
            "link": "/posts/2026-04-03-j1zxIBC6"
          },
          {
            "text": "打造现代化终端工作流：Zellij + Starship 完整配置",
            "link": "/posts/2026-04-01-BMdyi0Yr"
          },
          {
            "text": "OpenClaw 多人共用服务器的文件隔离实战指南",
            "link": "/posts/2026-03-30-L5mKaSG1"
          },
          {
            "text": "Ubuntu Server 24.04 使用 Docker Compose 部署 Mihomo 完整指南",
            "link": "/posts/2026-03-23-KWYcDNkK"
          },
          {
            "text": "宝塔面板环境配置 + OpenClaw 安装与进阶实战指南",
            "link": "/posts/2026-03-19-Tqzljcbf"
          },
          {
            "text": "FastTunnel v2 内网穿透 Docker 部署完整指南（服务端 + 客户端）",
            "link": "/posts/2026-03-13-R1NxTJFP"
          },
          {
            "text": "Windows 10 LTSC 上用 WSL + mihomo 实现 Claude Code Agent Teams 分屏模式完整指南",
            "link": "/posts/2026-03-12-z1XXVHzT"
          },
          {
            "text": "Ubuntu 24.04 服务器初始化配置指南",
            "link": "/posts/2026-03-11-cqLFkvEc"
          },
          {
            "text": "OpenClaw 完整安装与使用指南：零成本打造全能 AI 助理",
            "link": "/posts/2026-03-09-gepHjO1b"
          },
          {
            "text": "Debian 13 虚拟机安装与配置完全指南（Parallels / VMware 双平台）",
            "link": "/posts/2026-02-25-h9BqrNUK"
          },
          {
            "text": "Claude Code Agent Teams：多智能体协作编程的完全指南",
            "link": "/posts/2026-02-11-vXvKomjr"
          },
          {
            "text": "2025年度好用AI大分享：从文本到视频的全场景工具指南",
            "link": "/posts/2026-01-14-5wx4lDzY"
          },
          {
            "text": "量化交易完全指南：从入门到实战",
            "link": "/posts/2026-01-13-5jmhxRYd"
          },
          {
            "text": "穿越牛熊的智慧：永久投资组合与全天候组合深度解析",
            "link": "/posts/2026-01-12-1IoIj5x5"
          },
          {
            "text": "基金相关概念",
            "link": "/posts/2025-12-26-YjBz6u7t"
          },
          {
            "text": "MySQL ：如何选择 utf8mb4 排序规则（Collation）",
            "link": "/posts/2025-12-16-zlWTJ0Mo"
          },
          {
            "text": "mvnd：让 Maven 构建速度提升 2-10 倍的神器",
            "link": "/posts/2025-12-08-bTIfSo6x"
          },
          {
            "text": "📈 一夜持股法 · 尾盘狙击策略",
            "link": "/posts/2025-11-26-IfzTN13l"
          },
          {
            "text": "ZCF：零配置 Claude Code 工作流神器",
            "link": "/posts/2025-11-14-zcf-ling-pei-zhi-claude-code-gong-zuo-liu-shen-qi"
          },
          {
            "text": "Spring Boot 4.0 全面升级指南：拥抱现代化 Java 企业开发",
            "link": "/posts/2025-11-10-spring-boot-4-0-quan-mian-sheng-ji-zhi-nan-yong-bao-xian-dai-hua-java-qi-ye-kai-fa"
          },
          {
            "text": "JDK 25 新特性深度解析：Java 生态的又一次飞跃",
            "link": "/posts/2025-11-06-jdk-25-xin-te-xing-shen-du-jie-xi-java-sheng-tai-de-you-yi-ci-fei-yue"
          },
          {
            "text": "程序员必备的30+个MCP工具推荐",
            "link": "/posts/2025-10-24-15ge-fu-yu-aibian-cheng-gong-ju-qiang-da-gong-neng-de-mcptui-jian"
          },
          {
            "text": "备忘录",
            "link": "/posts/2025-10-20-DWT9SD9i"
          },
          {
            "text": "连接 Docker 容器与宿主机 MySQL 的跨平台指南",
            "link": "/posts/2025-09-17-lian-jie-docker-rong-qi-yu-su-zhu-ji-mysql-de-kua-ping-tai-zhi-nan"
          },
          {
            "text": "JVM JIT 编译器 Jeandle",
            "link": "/posts/2025-08-21-ma-yi-kai-yuan-quan-xin-jvm-jit-bian-yi-qi-jeandle-wei-java-cha-shang-jin-dou-yun-de-chi-bang"
          },
          {
            "text": "Docker 安装",
            "link": "/posts/2025-08-20-wei-ming-ming-wen-zhang"
          },
          {
            "text": "Docker 安装 Redis 详细教程",
            "link": "/posts/2025-08-20-docker-an-zhuang-redis-xiang-xi-jiao-cheng"
          },
          {
            "text": "Docker 安装 MySQL 详细教程",
            "link": "/posts/2025-08-20-docker-an-zhuang-mysql-xiang-xi-jiao-cheng"
          },
          {
            "text": "JDK 21 新特性",
            "link": "/posts/2025-08-16-jdk-21-xin-te-xing"
          },
          {
            "text": "如何用 Claude Code 组建个 Al Agent 员工团队",
            "link": "/posts/2025-08-13-ru-he-yong-claude-code-zu-jian-ge-al-agent-yuan-gong-tuan-dui"
          },
          {
            "text": "Git 规范流程",
            "link": "/posts/2025-08-10-git-gui-fan-liu-cheng"
          },
          {
            "text": "常见报错",
            "link": "/posts/2025-08-10-chang-jian-bao-cuo"
          }
        ]
      }
    ]
  },
  "outline": {
    "level": [
      2,
      3
    ],
    "label": "本页目录"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "lastUpdated": {
    "text": "最后更新",
    "formatOptions": {
      "dateStyle": "medium"
    }
  },
  "darkModeSwitchLabel": "主题",
  "sidebarMenuLabel": "菜单",
  "returnToTopLabel": "回到顶部",
  "externalLinkIcon": true,
  "notFound": {
    "code": "404",
    "title": "页面走丢了",
    "quote": "你访问的页面可能已被移动、重命名或从未存在过。",
    "linkLabel": "返回首页",
    "linkText": "回到首页"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/fanweibin2018"
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "locales": {
        "root": {
          "translations": {
            "button": {
              "buttonText": "搜索文档",
              "buttonAriaLabel": "搜索文档"
            },
            "modal": {
              "displayDetails": "显示详情",
              "resetButtonTitle": "清除查询条件",
              "backButtonTitle": "关闭搜索",
              "noResultsText": "无法找到相关结果",
              "footer": {
                "selectText": "选择",
                "navigateText": "切换",
                "closeText": "关闭"
              }
            }
          }
        }
      }
    }
  },
  "footer": {
    "message": "以 <a href=\"https://vitepress.dev/\" target=\"_blank\">VitePress</a> 驱动，部署于 GitHub Pages",
    "copyright": "© 2020-2026 范伟彬"
  }
}

Page Data ​

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep",
    "head": [
      [
        "meta",
        {
          "property": "og:title",
          "content": "范伟彬 · 写作空间"
        }
      ],
      [
        "meta",
        {
          "property": "og:description",
          "content": "技术、投资、AI 工作流的记录与思考 — 范伟彬的个人博客"
        }
      ],
      [
        "meta",
        {
          "property": "og:url",
          "content": "https://fanweibin.cn/api-examples"
        }
      ],
      [
        "meta",
        {
          "property": "og:image",
          "content": "https://fanweibin.cn/logo.svg"
        }
      ],
      [
        "meta",
        {
          "name": "twitter:title",
          "content": "范伟彬 · 写作空间"
        }
      ],
      [
        "meta",
        {
          "name": "twitter:description",
          "content": "技术、投资、AI 工作流的记录与思考 — 范伟彬的个人博客"
        }
      ],
      [
        "meta",
        {
          "name": "twitter:image",
          "content": "https://fanweibin.cn/logo.svg"
        }
      ],
      [
        "link",
        {
          "rel": "canonical",
          "href": "https://fanweibin.cn/api-examples"
        }
      ]
    ]
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1776418676000
}

Page Frontmatter ​

{
  "outline": "deep",
  "head": [
    [
      "meta",
      {
        "property": "og:title",
        "content": "范伟彬 · 写作空间"
      }
    ],
    [
      "meta",
      {
        "property": "og:description",
        "content": "技术、投资、AI 工作流的记录与思考 — 范伟彬的个人博客"
      }
    ],
    [
      "meta",
      {
        "property": "og:url",
        "content": "https://fanweibin.cn/api-examples"
      }
    ],
    [
      "meta",
      {
        "property": "og:image",
        "content": "https://fanweibin.cn/logo.svg"
      }
    ],
    [
      "meta",
      {
        "name": "twitter:title",
        "content": "范伟彬 · 写作空间"
      }
    ],
    [
      "meta",
      {
        "name": "twitter:description",
        "content": "技术、投资、AI 工作流的记录与思考 — 范伟彬的个人博客"
      }
    ],
    [
      "meta",
      {
        "name": "twitter:image",
        "content": "https://fanweibin.cn/logo.svg"
      }
    ],
    [
      "link",
      {
        "rel": "canonical",
        "href": "https://fanweibin.cn/api-examples"
      }
    ]
  ]
}

More ​

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

最后更新:

💬 评论

以 VitePress 驱动，部署于 GitHub Pages

© 2020-2026 范伟彬