Макет

Вы можете выбрать макет страницы, установив опцию layout в frontmatter страницы. Существует 3 варианта макета: doc, page и home. Если ничего не указано, то страница обрабатывается как страница doc.

---
layout: doc
---

Макет Doc

Опция doc является макетом по умолчанию и стилизует весь контент Markdown в вид "документации". Он работает, оборачивая весь контент в класс CSS vp-doc и применяя стили к элементам под ним.

Почти все общие элементы, такие как p или h2, получают специальное оформление. Поэтому имейте в виду, что если вы добавите любой пользовательский HTML внутрь содержимого Markdown, на них также будут влиять эти стили.

Он также предоставляет функции, специфичные для документации, перечисленные ниже. Эти функции включены только в этом макете.

• Ссылка на редактирование
• Ссылки на предыдущую/следующую страницу
• Содержание
• Реклама Carbon Ads

Макет Page

Опция page рассматривается как "пустая страница". Markdown все еще будет разобран, и все Расширения Markdown будут работать так же, как и в макете doc, но он не получит никаких стандартных стилей.

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

Обратите внимание, что даже в этом макете боковая панель все равно будет отображаться, если для страницы есть соответствующая конфигурация боковой панели.

Макет Home

Опция home создаст шаблонную "Домашнюю страницу". В этом макете вы можете установить дополнительные опции, такие как hero и features, чтобы дополнительно настроить контент. Пожалуйста, посетите Домашняя страница стандартной темы для получения дополнительной информации.

Без Макета

Если вы не хотите использовать никакой макет, вы можете передать layout: false через frontmatter. Этот вариант полезен, если вы хотите полностью настраиваемую целевую страницу (без боковой панели, навигационной панели или подвала по умолчанию).

Пользовательский Макет

Вы также можете использовать пользовательский макет:

---
layout: foo
---

Это будет искать компонент с именем foo, зарегистрированный в контексте. Например, вы можете зарегистрировать свой компонент глобально в .vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'
import Foo from './Foo.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('foo', Foo)
  }
}