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

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

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

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

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

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

Раздел, озаглавленный Попробуйте сами — Создайте новый компонент 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.

Чек-лист

Раздел, озаглавленный Чек-лист

Ресурсы

Раздел, озаглавленный Ресурсы