Учебник VuePress

# Добавление изображения на домашнюю страницу

Вы можете добавить на домашнюю страницу, используя стандартную тему VuePress - это большая, определяющая картинка, называемая heroImage. Вы добавляете изображение героя, используя YAML, так же как заголовок heroText, добавленный в предыдущем разделе.

# Изображение героя

Тема по умолчанию ищет изображение своего героя каталоге /.vuepress/public.

first_project
└─ docs
   ├─ .vuepress
   │   └─ public
   │       └─ hero.png
   └─ READRME.md
1
2
3
4
5
6

  • Добавьте строку YAML heroImage: /hero.png. Тема по умолчанию ищет свое изображение героя в общедоступном каталоге, который находится в ./vuepress/public.

  • Обновите файл README.md, чтобы он выглядел следующим образом:

---
home: true
heroImage: /hero.png
---
1
2
3
4

Результаты сразу появляются, если вы все еще используете vuepress dev внутри директории вашего проекта:

vuepress_homepage_image_hero

Надписи:

  • VuePress - это главный текст.
  • Welcome to your VuePress site - это слоган.

ПРИМЕЧАНИЕ:

Без указания главного текста и слогана они прописываются по умолчанию. Но их всегда можно изменить. 😉

# Другие изображения

Для добавления других изображений на главную страницу можно используя ссылку markdown. Обновите файл README.md, чтобы он выглядел следующим образом:

---
home: true
heroImage: /hero.png
---

### Добавим изображение в главную страницу

![vue_nuxt_firebase](/vue_nuxt_firebase.jpg)
1
2
3
4
5
6
7
8

vuepress_homepage_image

Ищет изображение для главной странице также в каталоге /.vuepress/public.

← Добавление текста →