diff --git a/docs/ru/guide/custom-theme.md b/docs/ru/guide/custom-theme.md index 24d75bae..22da9f02 100644 --- a/docs/ru/guide/custom-theme.md +++ b/docs/ru/guide/custom-theme.md @@ -33,12 +33,17 @@ interface Theme { */ Layout: Component /** - * Улучшение экземпляра приложения Vue + * Расширяем экземпляр приложения Vue * @optional */ enhanceApp?: (ctx: EnhanceAppContext) => Awaitable /** - * Расширяем другую тему, вызывая её `enhanceApp` перед нашей + * Выполняется внутри `setup()` корневого компонента + * @optional + */ + setup?: () => void + /** + * Расширяем другую тему, вызывая её `enhanceApp` и `setup` перед нашими * @optional */ extends?: Theme @@ -88,6 +93,26 @@ export default { Верните `false` из `onBeforeRouteChange` или `onBeforePageLoad`, чтобы отменить переход. +Хук `setup` выполняется внутри `setup()` корневого компонента, поэтому вызовы Composition API (`onMounted`, `watch`, composables и т. д.) работают там без необходимости оборачивать компонент layout: + +```ts [.vitepress/theme/index.ts] +import { watch } from 'vue' +import { useData } from 'vitepress' +import DefaultTheme from 'vitepress/theme' + +export default { + extends: DefaultTheme, + setup() { + const { page } = useData() + watch(() => page.value.relativePath, (path) => { + console.log('now viewing', path) + }) + } +} +``` + +При использовании `extends` `setup` каждой темы выполняется в порядке от базовой к производной, как и `enhanceApp`. Он также выполняется во время SSR/SSG-рендеринга, поэтому код, зависящий от браузера, следует размещать внутри `onMounted`. + Экспорт по умолчанию является единственным контрактом для пользовательской темы, и только свойство `Layout` является обязательным. Таким образом, технически тема VitePress может быть простой, как один компонент Vue. Внутри компонент макета работает так же, как и обычное приложение Vite + Vue 3. Обратите внимание, что тема также должна быть [SSR-совместимой](./ssr-compat).