Главная страница

Тема VitePress по умолчанию предоставляет макет главной страницы, который содержит дополнительные секции с возможность изменение метаданных. Вы можете добавить несколько различных готовых «секций» на главную страницу, использую следующие ключи, такие как hero, features, teams, и sponsors.

Ключевая секция hero

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

---
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

  // Изображение отображается рядом с `text` и `tagline`
  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?: string

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

Секция с преимуществами features

В секции «Преимуществ» можно перечислить любое количество тизеров, которые вы хотели бы показать сразу после «Ключевой секции». Чтобы настроить этот раздел, передайте опцию features в метаданных страницы.

Для каждой функции вы можете указать иконку, которая может быть эмодзи или любым другим изображением. Если вы используете изображение в качестве иконки (svg, png, jpg и т. д.), вам нужно указать его ширину и высоту. При необходимости можно также добавить описание, задать собственный размер и варианты для тёмной и светлой темы.

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    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
    }

Секция: участники проекта teams

В секции выводится витрина с выборкой участников проекта размещенной на странице проекта «Участники». Секция размещена после секции features и до секции sponsors.

---
layout: home

teams:
  title: Участники проекта
  lead:
  moreText: Все участники
  moreLink: projects/contributions/
---

Секция: спонсоры проекта sponsors

В секции выводится витрина организаций, участвующих в проекте, с возможностью группировки. Секция размещена после секции teams.

sponsors:
message: Данный сервис является СПО-проектом и его поддержка и развитие зависит только от нашей совместной активности.
data:

- tier: Организационная структура
  size: big
  items:
  - name: ALT Linux Team
    img: ./alt-linux-team.png
    url: https://packages.altlinux.org/ru/sisyphus
  - name: BaseALT
    img: ./basealt.png
    url: https://www.basealt.ru

export interface Sponsors {
  tier: string
  size?: 'medium' | 'big'
  items: Sponsor[]
}

export interface Sponsor {
  name: string
  img: string
  url: string
}

Содержимое Markdown

Вы можете добавить дополнительный контент на главную страницу вашего сайта, просто добавив Markdown под разделителем ---.

---
layout: home

hero:
  name: VitePress
  text: Генератор статических сайтов на основе Vite и Vue.
---

## Начало работы

Вы можете начать использовать VitePress прямо сейчас, используя `npx`!

```sh
npm init
npx vitepress init
```