运行时 API

VitePress 提供了几个内置的 API 来让你访问应用程序数据。VitePress 还附带了一些可以在全局范围内使用的内置组件。

辅助函数可从 vitepress 全局导入，通常用于自定义主题 Vue 组件。但是，它们也可以在 .md 页面内使用，因为 markdown 文件被编译成 Vue 单文件组件。

以 use* 开头的方法表示它是一个 Vue 3 组合式 API 函数，只能在 setup() 或 <script setup> 中使用。

"'},"",-1))]),s[33]||(s[33]=t(`

返回特定页面的数据。返回的对象具有以下类型：

interface VitePressData<T = any> {
  /**
   * 站点级元数据
   */
  site: Ref<SiteData<T>>
  /**
   * .vitepress/config.js 中的 themeConfig
   */
  theme: Ref<T>
  /**
   * 页面级元数据
   */
  page: Ref<PageData>
  /**
   * 页面 frontmatter
   */
  frontmatter: Ref<PageData['frontmatter']>
  /**
   * 动态路由参数
   */
  params: Ref<PageData['params']>
  title: Ref<string>
  description: Ref<string>
  lang: Ref<string>
  isDark: Ref<boolean>
  dir: Ref<string>
  localeIndex: Ref<string>
}

interface PageData {
  title: string
  titleTemplate?: string | boolean
  description: string
  relativePath: string
  filePath: string
  headers: Header[]
  frontmatter: Record<string, any>
  params?: Record<string, any>
  isNotFound?: boolean
  lastUpdated?: number
}

示例：

vue

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

const { theme } = useData()
</script>

<template>
  <h1>{{ theme.footer.copyright }}</h1>
</template>

`,4)),i("h2",g,[s[4]||(s[4]=i("code",null,"useRoute",-1)),s[5]||(s[5]=a()),l(n,{type:"info",text:"composable"}),s[6]||(s[6]=a()),s[7]||(s[7]=i("a",{class:"header-anchor",href:"#useroute","aria-label":'Permalink to "`useRoute` "'},"",-1))]),s[34]||(s[34]=t(`

返回具有以下类型的当前路由对象：

interface Route {
  path: string
  data: PageData
  component: Component | null
}

`,2)),i("h2",E,[s[8]||(s[8]=i("code",null,"useRouter",-1)),s[9]||(s[9]=a()),l(n,{type:"info",text:"composable"}),s[10]||(s[10]=a()),s[11]||(s[11]=i("a",{class:"header-anchor",href:"#userouter","aria-label":'Permalink to "`useRouter` "'},"",-1))]),s[35]||(s[35]=t(`

返回 VitePress 路由实例，以便可以以编程方式导航到另一个页面。

interface Router {
  /**
   * 当前路由
   */
  route: Route
  /**
   * 导航到新的 URL
   */
  go: (to?: string) => Promise<void>
  /**
   * 在路由更改前调用。返回 \`false\` 表示取消导航
   */
  onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
  /**
   * 在页面组件加载前（history 状态更新后）调用。返回 \`false\` 表示取消导航
   */
  onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
  /**
   * 在页面组件加载后（页面组件实际更新前）调用
   */
  onAfterPageLoad?: (to: string) => Awaitable<void>
  /**
   * 在路由更改后调用
   */
  onAfterRouteChange?: (to: string) => Awaitable<void>
}

`,2)),i("h2",y,[s[12]||(s[12]=i("code",null,"withBase",-1)),s[13]||(s[13]=a()),l(n,{type:"info",text:"helper"}),s[14]||(s[14]=a()),s[15]||(s[15]=i("a",{class:"header-anchor",href:"#withbase","aria-label":'Permalink to "`withBase` "'},"",-1))]),s[36]||(s[36]=i("ul",null,[i("li",null,[i("strong",null,"Type"),a(": "),i("code",null,"(path: string) => string")])],-1)),s[37]||(s[37]=i("p",null,[a("将配置的 "),i("a",{href:"./site-config#base"},[i("code",null,"base")]),a(" 追加到给定的 URL 路径。另请参阅 "),i("a",{href:"./../guide/asset-handling#base-url"},"Base URL"),a("。")],-1)),i("h2",o,[s[16]||(s[16]=i("code",null,"",-1)),s[17]||(s[17]=a()),l(n,{type:"info",text:"component"}),s[18]||(s[18]=a()),s[19]||(s[19]=i("a",{class:"header-anchor",href:"#content","aria-label":'Permalink to "`` "'},"",-1))]),s[38]||(s[38]=t(`

<Content /> 组件显示渲染的 markdown 内容。在创建自己的主题时很有用。

vue

<template>
  <h1>Custom Layout!</h1>
  <Content />
</template>

`,2)),i("h2",F,[s[20]||(s[20]=i("code",null,"",-1)),s[21]||(s[21]=a()),l(n,{type:"info",text:"component"}),s[22]||(s[22]=a()),s[23]||(s[23]=i("a",{class:"header-anchor",href:"#clientonly","aria-label":'Permalink to "`` "'},"",-1))]),s[39]||(s[39]=t(`

<ClientOnly /> 组件仅在客户端渲染其插槽。

由于 VitePress 应用程序在生成静态构建时是在 Node.js 中服务器渲染的，因此任何 Vue 使用都必须符合通用代码要求。简而言之，确保仅在 beforeMount 或 mounted 钩子中访问 Browser/DOM API。

如果正在使用或演示对 SSR 不友好的组件 (例如，包含自定义指令)，可以将它们包装在 ClientOnly 组件中。

template

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

相关文档：SSR 兼容性

`,5)),i("h2",A,[s[24]||(s[24]=i("code",null,"$frontmatter",-1)),s[25]||(s[25]=a()),l(n,{type:"info",text:"template global"}),s[26]||(s[26]=a()),s[27]||(s[27]=i("a",{class:"header-anchor",href:"#frontmatter","aria-label":'Permalink to "`$frontmatter` "'},"",-1))]),s[40]||(s[40]=t(`

在 Vue 表达式中直接访问当前页面的 frontmatter 数据。

---
title: Hello
---

# {{ $frontmatter.title }}

`,2)),i("h2",C,[s[28]||(s[28]=i("code",null,"$params",-1)),s[29]||(s[29]=a()),l(n,{type:"info",text:"template global"}),s[30]||(s[30]=a()),s[31]||(s[31]=i("a",{class:"header-anchor",href:"#params","aria-label":'Permalink to "`$params` "'},"",-1))]),s[41]||(s[41]=t(`

在 Vue 表达式中直接访问当前页面的动态路由参数。

- package name: {{ $params.pkg }}
- version: {{ $params.version }}

`,2))])}const T=p(r,[["render",D]]);export{v as __pageData,T as default};

运行时 API ​

运行时 API