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