Skip to content

Latest commit

 

History

History
210 lines (161 loc) · 7.57 KB

3.mdx

File metadata and controls

210 lines (161 loc) · 7.57 KB
type title description i18nReady
tutorial
Создаем свою собственную Шапку
Учебное пособие: Создайте свой первый блог на Astro — Используйте все, что вы узнали до сих пор, чтобы создать шапку с отзывчивой навигацией
true

import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

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

- Создать шапку для вашего сайта, которая содержит компонент навигации - Сделать компонент навигации адаптивным

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

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

Создайте файл с именем `Header.astro` в `src/components/`
```astro title="src/components/Header.astro"
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

</details>

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

1. На каждой странице замените ваш существующий компонент `` на вашу новую шапку. 
<details>
<summary>Покажите мне код!</summary>

```astro title="src/pages/index.astro" ins={3,18} del={2,17}
---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <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>
```
</details>
  1. Проверьте предварительный просмотр в браузере и убедитесь, что ваша шапка отображается на каждой странице. Пока она не выглядит иначе, но если вы проверите предварительный просмотр с помощью инструментов разработчика, вы увидите, что у вас теперь есть элементы, такие как <header> и <nav> вокруг ваших навигационных ссылок.

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

1. Обновите `Navigation.astro` классом CSS для управления навигационными ссылками. Оберните существующие навигационные ссылки в `
` с классом `nav-links`. 
```astro title="src/components/Navigation.astro" ins={3,7}
---
---
<div class="nav-links">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
</div>
```

  1. Скопируйте приведенные ниже стили CSS в файл global.css. Эти стили:

    • Стилизируют и позиционируют навигационные ссылки для мобильных устройств
    • Включают класс expanded, который можно переключать для отображения или скрытия ссылок на мобильных устройствах
    • Используют @media запрос для определения различных стилей для больших размеров экрана

    :::tip[Mobile-first дизайн] Начните с определения того, что должно происходить на малых размерах экрана! Маленькие размеры экрана требуют более простых макетов. Затем адаптируйте ваши стили, чтобы учесть более крупные устройства. Если вы сначала спроектируете сложный вариант, потом вам придется потрудиться, чтобы снова сделать его простым. :::

    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-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,
.nav-links 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 запросов.

Чек-лист

- [ ] Я могу использовать CSS для добавления адаптивных элементов на свой сайт.

Ресурсы