Пропустить до содержимого
Astro Astro

Создаем собственную шапку на Astro

Поскольку ваш сайт будет просматриваться на разных устройствах, давайте создадим навигацию страницы, которая может работать на нескольких размерах экранов!

Приготовьтесь к...

  • Создать Header для вашего сайта, который содержит компонент Navigation
  • Сделать Navigation компонент отзывчивым к ширине экрана

Попробуйте сами — Создайте новый компонент Header

  1. Создайте новый компонент Header. Импортируйте и используйте ваш существующий компонент Navigation.astro внутри элемента <nav>, который находится внутри элемента <header>.
Покажите мне код!

Создайте файл с именем Header.astro в src/components/

src/components/Header.astro
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>

Попробуйте сами — Обновить ваши страницы

  1. На каждой странице замените ваш существующий компонент <Navigation /> на ваш новый компонент.
Покажите мне код!
src/pages/index.astro
---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Главная страница";
---
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>
  1. Проверьте предварительный просмотр в вашем браузере и убедитесь, что ваш хедер отображается на каждой странице. Пока он не будет выглядеть по-другому, но если вы проверите предварительный просмотр с помощью инструментов разработчика, вы увидите, что теперь у вас есть элементы, такие как <header> и <nav>, вокруг ссылок вашей навигации.

Добавьте отзывчивые стили

  1. Обновите Navigation.astro с CSS-классом, чтобы управлять ссылками вашей навигации. Оберните существующие ссылки навигации в <div> с классом nav-links.

    src/components/Navigation.astro
    ---
    ---
    <div class="nav-links">
      <a href="/">Главная</a>
      <a href="/about">О проекте</a>
      <a href="/blog">Блог</a>
    </div>

  2. Скопируйте стили CSS ниже в global.css. Эти стили:

    • Стилизуют и позиционируют ссылки навигации для мобильных устройств
    • Добавляют класс expanded, который может быть переключен для отображения или скрытия ссылок на мобильном устройстве
    • Используют @media запрос для определения разных стилей для больших размеров экрана
    src/styles/global.css
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }
    

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }
    

    * {
      box-sizing: border-box;
    }
    

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    

    /* nav styles */
    

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }
    

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }
    

    .nav-links a:hover, a:focus {
      background-color: #ff9776;
    }
    

    .expanded {
      display: unset;
    }
    

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }
    

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
    

    }

Измените размер окна и посмотрите, как разные стили применяются при различных ширинах экрана. Ваш заголовок теперь адаптируется к размеру экрана с помощью медиа-запросов @media.

Чек-лист

Ресурсы