From 0f1ad4b70e25019c161331a31828db040922c95e Mon Sep 17 00:00:00 2001 From: Bugo Date: Wed, 27 Mar 2024 18:30:45 +0500 Subject: [PATCH] Translate reference/default-theme-home-page.md --- docs/ru/reference/default-theme-home-page.md | 196 +++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 docs/ru/reference/default-theme-home-page.md diff --git a/docs/ru/reference/default-theme-home-page.md b/docs/ru/reference/default-theme-home-page.md new file mode 100644 index 00000000..a526496f --- /dev/null +++ b/docs/ru/reference/default-theme-home-page.md @@ -0,0 +1,196 @@ +# Главная страница {#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` в метаданных. +:::