Домашняя Страница

Тема по умолчанию VitePress предоставляет макет домашней страницы, который вы также можете видеть на домашней странице сайта оригинальной документации. Вы можете использовать его на любой из своих страниц, указав layout: home в frontmatter.

---
layout: home
---

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

Секция Героя

Секция героя находится в верхней части домашней страницы. Вот как вы можете настроить секцию героя.

---
layout: home

hero:
  name: VitePress
  text: Генератор статических сайтов на Vite & Vue.
  tagline: Lorem ipsum...
  image:
    src: /logo.png
    alt: VitePress
  actions:
    - theme: brand
      text: Начать
      link: /guide/what-is-vitepress
    - theme: alt
      text: Посмотреть на GitHub
      link: https://github.com/vuejs/vitepress
---

interface Hero {
  // Строка, отображаемая в верхней части `text`. Имеет цвет бренда
  // и ожидается, что будет короткой, например, название продукта.
  name?: string

  // Основной текст для секции героя. Определяется
  // как тег `h1`.
  text: string

  // Слоган, отображаемый под `text`.
  tagline?: string

  // Изображение отображается рядом с областью текста и слогана.
  image?: ThemeableImage

  // Кнопки действий для отображения в секции героя на домашней странице.
  actions?: HeroAction[]
}

type ThemeableImage =
  | string
  | { src: string; alt?: string }
  | { light: string; dark: string; alt?: string }

interface HeroAction {
  // Цветовая тема кнопки. По умолчанию `brand`.
  theme?: 'brand' | 'alt'

  // Надпись на кнопке.
  text: string

  // Ссылка назначения кнопки.
  link: string

  // Атрибут target ссылки.
  target?: string

  // Атрибут rel ссылки.
  rel?: string
}

Настройка цвета имени

VitePress использует цвет бренда (--vp-c-brand-1) для name. Однако, вы можете настроить этот цвет, переопределив переменную --vp-home-hero-name-color.

:root {
  --vp-home-hero-name-color: blue;
}

Также вы можете дополнительно настроить его, комбинируя --vp-home-hero-name-background, чтобы дать name градиентный цвет.

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}

Секция Особенностей

В секции Особенностей вы можете перечислить любое количество особенностей, которые хотели бы показать сразу после секции Героя. Чтобы настроить её, передайте параметр features в frontmatter.

Вы можете предоставить иконку для каждой особенности, которая может быть эмодзи или любым типом изображения. Когда настроенная иконка является изображением (svg, png, jpeg...), вы должны предоставить иконку с правильной шириной и высотой; вы также можете предоставить описание, его внутренний размер, а также его варианты для темной и светлой темы при необходимости.

---
layout: home

features:
  - icon: 🛠️
    title: Простота и минимализм, всегда
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Еще одна крутая особенность
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Еще одна крутая особенность
    details: Lorem ipsum...
---

interface Feature {
  // Иконка для каждой особенности.
  icon?: FeatureIcon

  // Название особенности.
  title: string

  // Детали особенности.
  details: string

  // Ссылка при нажатии на компонент особенности. Ссылка может
  // быть как внутренней, так и внешней.
  //
  // например, `guide/reference/default-theme-home-page` или `https://example.com`
  link?: string

  // Текст ссылки, отображаемый в компоненте особенности. Лучше всего
  // использовать с параметром `link`.
  //
  // например, `Узнать больше`, `Посетить страницу` и т.д.
  linkText?: string

  // Атрибут rel для параметра `link`.
  //
  // например, `external`
  rel?: string

  // Атрибут target для параметра `link`.
  target?: string
}

type FeatureIcon =
  | string
  | { src: string; alt?: string; width?: string; height: string }
  | {
      light: string
      dark: string
     

 alt?: string
      width?: string
      height: string
    }