|
|
# Главная страница {#home-page}
|
|
|
|
|
|
Тема VitePress по умолчанию предоставляет макет главной страницы, который вы также можете увидеть на [главной странице этого сайта](../). Вы можете использовать его на любой из своих страниц, указав `layout: home` в [метаданных](./frontmatter-config) страницы.
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
layout: home
|
|
|
---
|
|
|
```
|
|
|
|
|
|
Однако сам по себе этот вариант мало что даст. Вы можете добавить несколько различных готовых «секций» на главную страницу, установив дополнительные опции, такие как `hero` и `features`.
|
|
|
|
|
|
## Секция `hero` {#hero-section}
|
|
|
|
|
|
Секция `hero` находится в верхней части главной страницы. Вот как можно её настроить:
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
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
|
|
|
---
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
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
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### Настройка цвета заголовка секции {#customizing-the-name-color}
|
|
|
|
|
|
VitePress использует фирменный цвет (`--vp-c-brand-1`) для атрибута `name` в секции `hero`. Однако вы можете настроить этот цвет, переопределив переменную `--vp-home-hero-name-color`.
|
|
|
|
|
|
```css
|
|
|
:root {
|
|
|
--vp-home-hero-name-color: blue;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Также вы можете настроить его ещё больше, комбинируя `--vp-home-hero-name-background`, чтобы придать `name` градиентный цвет.
|
|
|
|
|
|
```css
|
|
|
:root {
|
|
|
--vp-home-hero-name-color: transparent;
|
|
|
--vp-home-hero-name-background: -webkit-linear-gradient(
|
|
|
120deg,
|
|
|
#bd34fe,
|
|
|
#41d1ff
|
|
|
);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## Секция `features` {#features-section}
|
|
|
|
|
|
В секции `features` можно перечислить любое количество функций, которые вы хотели бы показать сразу после секции `hero`. Чтобы настроить её, передайте опцию `features` в метаданных страницы.
|
|
|
|
|
|
Для каждой функции можно указать иконку, который может быть эмодзи или любым другим изображением. Если настраиваемая иконка представляет собой изображение (svg, png, jpeg...), вы должны предоставить ей соответствующую ширину и высоту. При необходимости можно указать описание, собственный размер, а также варианты для тёмной и светлой темы.
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
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...
|
|
|
---
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
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
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## Содержимое Markdown {#markdown-content}
|
|
|
|
|
|
Вы можете добавить дополнительный контент на главную страницу вашего сайта, просто добавив Markdown под разделителем `---`.
|
|
|
|
|
|
````md
|
|
|
---
|
|
|
layout: home
|
|
|
|
|
|
hero:
|
|
|
name: VitePress
|
|
|
text: Генератор статических сайтов на основе Vite и Vue.
|
|
|
---
|
|
|
|
|
|
## Начало работы
|
|
|
|
|
|
Вы можете начать использовать VitePress прямо сейчас, используя `npx`!
|
|
|
|
|
|
```sh
|
|
|
npm init
|
|
|
npx vitepress init
|
|
|
```
|
|
|
````
|
|
|
|
|
|
::: info ПРИМЕЧАНИЕ
|
|
|
VitePress не всегда автоматически стилизовал дополнительный контент страницы с макетом `layout: home`. Чтобы вернуться к старому поведению, добавьте `markdownStyles: false` в метаданных.
|
|
|
:::
|
