Шаг 3: Компоненты
Теперь, когда у вас есть файлы .astro и .md, генерирующие полные страницы на вашем сайте, давайте создадим и повторно используем более мелкие части HTML с помощью Astro компонентов!
Где мы сейчас?
Вы можете найти код на этом этапе учебника на GitHub или StackBlitz.
Сравните ваш код с этим примером, или, если вы только что присоединились к нам, создайте форк на StackBlitz, чтобы начать кодировать прямо в вашем браузере отсюда.
Куда мы идем?
На этом шаге вы узнаете, как создавать Astro компоненты для повторного использования кода для общих элементов на вашем сайте.
Вы создадите:
- Компонент навигации, который представляет меню ссылок на ваши страницы
- Компонент нижнего колонтитула для включения внизу каждой страницы
- Компонент социальных медиа, используемый в нижнем колонтитуле, который ссылается на страницы профилей
- Интерактивный компонент Hamburger для переключения Навигации на мобильных устройствах.
По пути вы будете использовать CSS и JavaScript, чтобы создать отзывчивый дизайн, реагирующий на размеры экрана и действия пользователя.