VitePress API 使用示例 - 测试

本页面演示了 VitePress 提供的运行时 API 的使用方法和实际效果。

🚀 useData() API

useData() 是 VitePress 的核心 API，用于访问当前页面的站点、主题和页面数据。它可以在 .md 和 .vue 文件中使用：

基本用法

```vue
<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

## 数据展示

### 站点信息
<pre>{{ site }}</pre>

### 主题配置
<pre>{{ theme }}</pre>

### 页面数据
<pre>{{ page }}</pre>

### 页面前言
<pre>{{ frontmatter }}</pre>
```

📊 实际数据展示

说明

以下展示的是当前页面的实际数据，这些数据由 VitePress 的 useData() API 动态获取：

站点信息

// 使用 useData() 获取站点信息
const { site } = useData()

console.log('站点标题:', site.title)
console.log('站点描述:', site.description) 
console.log('基础路径:', site.base)

实际输出：

• 站点标题: NodePro8 投研文档中心
• 站点描述: NodePro8投研相关文档内容
• 基础路径: /

主题配置

// 获取主题配置
const { theme } = useData()

console.log('导航菜单:', theme.nav)
console.log('侧边栏:', theme.sidebar)

实际输出：

• 导航菜单数量: 2 个
• 侧边栏配置: 已配置

页面数据

// 获取当前页面数据
const { page } = useData()

console.log('页面标题:', page.title)
console.log('页面路径:', page.relativePath)
console.log('最后更新:', page.lastUpdated)

实际输出：

• 页面标题: VitePress API 使用示例 - 测试
• 页面路径: api-examples.md
• 最后更新: 未知

页面前言 (Frontmatter)

// 获取页面前言数据
const { frontmatter } = useData()

console.log('大纲深度:', frontmatter.outline)

实际输出：

• 大纲深度: deep

💡 实用示例

动态显示页面标题

<template>
  <h1>当前页面：{{ page.title }}</h1>
</template>

<script setup>
import { useData } from 'vitepress'
const { page } = useData()
</script>

效果：

当前页面：VitePress API 使用示例 - 测试

条件渲染

<template>
  <div v-if="frontmatter.draft">
    <p>⚠️ 这是草稿页面</p>
  </div>
</template>

<script setup>
import { useData } from 'vitepress'
const { frontmatter } = useData()
</script>

主题切换状态

<template>
  <p>当前主题模式：{{ isDark ? '🌙 暗色' : '☀️ 亮色' }}</p>
</template>

<script setup>
import { useData } from 'vitepress'
const { isDark } = useData()
</script>

🛠️ 其他有用的 API

useRouter()

import { useRouter } from 'vitepress'

const router = useRouter()
// 编程式导航
router.go('/path/to/page')

useRoute()

import { useRoute } from 'vitepress'

const route = useRoute()
console.log(route.path) // 当前路径
console.log(route.data) // 当前页面数据

📚 更多信息

查看 VitePress Runtime API 完整文档 了解所有可用的 API。

提示

这些 API 主要用于创建动态组件和自定义主题。在普通的 Markdown 文档中，您通常不需要直接使用这些 API。

注意

运行时 API 只能在浏览器环境中使用，不能在构建时的服务端渲染过程中使用。