API Времени Выполнения

VitePress предлагает несколько встроенных API для доступа к данным приложения. VitePress также включает несколько встроенных компонентов, которые можно использовать глобально.

Вспомогательные методы можно импортировать глобально из vitepress и обычно используются в пользовательских компонентах темы Vue. Однако они также могут использоваться внутри страниц .md, поскольку файлы markdown компилируются в Однофайловые Компоненты Vue.

Методы, начинающиеся с use*, указывают на то, что это функция Vue 3 Composition API ("Composable"), которая может использоваться только внутри setup() или <script setup>.

useData composable

Возвращает данные, специфичные для страницы. Возвращаемый объект имеет следующий тип:

interface VitePressData<T = any> {
  /**
   * Метаданные на уровне сайта
   */
  site: Ref<SiteData<T>>
  /**
   * themeConfig из .vitepress/config.js
   */
  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
}

Пример:

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

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

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

useRoute composable

Возвращает текущий объект маршрута со следующим типом:

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

useRouter composable

Возвращает экземпляр маршрутизатора VitePress, чтобы вы могли программно перейти на другую страницу.

interface Router {
  /**
   * Текущий маршрут.
   */
  route: Route
  /**
   * Перейти к новому URL.
   */
  go: (to?: string) => Promise<void>
  /**
   * Вызывается перед изменением маршрута. Верните `false`, чтобы отменить навигацию.
   */
  onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
  /**
   * Вызывается перед загрузкой компонента страницы (после обновления состояния истории). Верните `false`, чтобы отменить навигацию.
   */
  onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
  /**
   * Вызывается после изменения маршрута.
   */
  onAfterRouteChanged?: (to: string) => Awaitable<void>
}

withBase helper

• Тип: (path: string) => string

Добавляет настроенный base к заданному URL-пути. См. также Базовый URL.

<Content /> component

Компонент <Content /> отображает отрендеренное содержимое markdown. Полезно при создании собственной темы.

<template>
  <h1>Пользовательский Макет!</h1>
  <Content />
</template>

<ClientOnly /> component

Компонент <ClientOnly /> рендерит свой слот только на стороне клиента.

Поскольку приложения VitePress рендерятся на стороне сервера в Node.js при генерации статических сборок, весь пользовательский код должен соответствовать требованиям универсального кода. Короче говоря, убедитесь, что вы обращаетесь к API браузера / DOM только в хуках beforeMount или mounted компонентов Vue.

Если вы используете или демонстрируете компоненты, которые не поддерживают SSR (например, содержат пользовательские директивы), вы можете обернуть их в компонент ClientOnly.

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

• Связано с: Совместимость с SSR

$frontmatter template global

Прямой доступ к данным frontmatter текущей страницы в выражениях Vue.

---
title: Привет
---

# API Времени Выполнения

$params template global

Прямой доступ к [

динамическим параметрам маршрута](../introduction/routing#dynamic-routes) текущей страницы в выражениях Vue.

- название пакета: {{ $params.pkg }}
- версия: {{ $params.version }}