Runtime API

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

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

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

useData композабл

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

interface VitePressData<T = any> {
  /**
   * Метаданные на уровне сайта
   */
  site: Ref<SiteData<T>>
  /**
   * themeConfig from .vitepress/config.js
   */
  theme: Ref<T>
  /**
   * Метаданные на уровне страницы
   */
  page: Ref<PageData>
  /**
   * Метаданные страницы
   */
  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 композабл

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

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

useRouter композабл

Возвращает экземпляр маршрутизатора 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 хелпер

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

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

<Content /> компонент

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

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

<ClientOnly /> компонент

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

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

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

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

• См. также: Совместимость с SSR

$frontmatter глобальный шаблон

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

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

# {{ $frontmatter.title }}

$params глобальный шаблон

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

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