|
|
# Runtime API {#runtime-api}
|
|
|
|
|
|
VitePress предлагает несколько встроенных API, позволяющих получить доступ к данным приложения. VitePress также поставляется с несколькими встроенными компонентами, которые можно использовать глобально.
|
|
|
|
|
|
Вспомогательные методы глобально импортируются из `vitepress` и обычно используются в компонентах Vue для пользовательских тем. Однако их можно использовать и внутри страниц `.md`, так как файлы markdown компилируются в [однофайловые компоненты](https://ru.vuejs.org/guide/scaling-up/sfc.html) Vue.
|
|
|
|
|
|
Методы, начинающиеся с `use*`, указывают на то, что это функция [Vue 3 Composition API](https://ru.vuejs.org/guide/introduction.html#composition-api) («композабл»), которая может быть использована только внутри `setup()` или `<script setup>`.
|
|
|
|
|
|
## `useData` <Badge type="info" text="композабл" /> {#usedata}
|
|
|
|
|
|
Возвращает данные, относящиеся к конкретной странице. Возвращаемый объект имеет следующий тип:
|
|
|
|
|
|
```ts
|
|
|
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
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Пример:**
|
|
|
|
|
|
```vue
|
|
|
<script setup>
|
|
|
import { useData } from 'vitepress'
|
|
|
|
|
|
const { theme } = useData()
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<h1>{{ theme.footer.copyright }}</h1>
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
## `useRoute` <Badge type="info" text="композабл" /> {#useroute}
|
|
|
|
|
|
Возвращает текущий объект маршрута со следующим типом:
|
|
|
|
|
|
```ts
|
|
|
interface Route {
|
|
|
path: string
|
|
|
data: PageData
|
|
|
component: Component | null
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## `useRouter` <Badge type="info" text="композабл" /> {#userouter}
|
|
|
|
|
|
Возвращает экземпляр маршрутизатора VitePress, чтобы вы могли программно перейти на другую страницу.
|
|
|
|
|
|
```ts
|
|
|
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` <Badge type="info" text="хелпер" /> {#withbase}
|
|
|
|
|
|
- **Тип**: `(path: string) => string`
|
|
|
|
|
|
Добавляет настроенный [`base`](./site-config#base) к заданному URL-пути. Также смотрите секцию [Базовый URL](../guide/asset-handling#base-url).
|
|
|
|
|
|
## `<Content />` <Badge type="info" text="компонент" /> {#content}
|
|
|
|
|
|
Компонент `<Content />` отображает отрисованное содержимое Markdown. Полезно [при создании собственной темы](../guide/custom-theme).
|
|
|
|
|
|
```vue
|
|
|
<template>
|
|
|
<h1>Пользовательский макет!</h1>
|
|
|
<Content />
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
## `<ClientOnly />` <Badge type="info" text="компонент" /> {#clientonly}
|
|
|
|
|
|
Компонент `<ClientOnly />` отображает свой слот только на стороне клиента.
|
|
|
|
|
|
Поскольку приложения VitePress при генерации статических сборок рендерятся в Node.js, любое использование Vue должно соответствовать универсальным требованиям к коду. Короче говоря, убедитесь, что доступ к API Browser / DOM осуществляется только в хуках `beforeMount` или `mounted`.
|
|
|
|
|
|
Если вы используете или демонстрируете компоненты, которые не являются SSR-дружественными (например, содержат пользовательские директивы), вы можете обернуть их внутри компонента `ClientOnly`.
|
|
|
|
|
|
```vue-html
|
|
|
<ClientOnly>
|
|
|
<NonSSRFriendlyComponent />
|
|
|
</ClientOnly>
|
|
|
```
|
|
|
|
|
|
- См. также: [Совместимость с SSR](../guide/ssr-compat)
|
|
|
|
|
|
## `$frontmatter` <Badge type="info" text="глобальный шаблон" /> {#frontmatter}
|
|
|
|
|
|
Прямой доступ к [метаданным](../guide/frontmatter) текущей страницы в выражениях Vue.
|
|
|
|
|
|
```md
|
|
|
---
|
|
|
title: Привет
|
|
|
---
|
|
|
|
|
|
# {{ $frontmatter.title }}
|
|
|
```
|
|
|
|
|
|
## `$params` <Badge type="info" text="глобальный шаблон" /> {#params}
|
|
|
|
|
|
Прямой доступ к параметрам [динамических маршрутов](../guide/routing#dynamic-routes) текущей страницы в выражениях Vue.
|
|
|
|
|
|
```md
|
|
|
- имя пакета: {{ $params.pkg }}
|
|
|
- версия: {{ $params.version }}
|
|
|
```
|
