Перейти к содержимому

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

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

Приготовьтесь…

  • Создать новую папку для компонентов
  • Создать компонент Astro для отображения ваших ссылок навигации
  • Заменить существующий HTML на новый, переиспользуемый компонент навигации

Создайте новую папку src/components/

Для хранения файлов .astro, которые будут генерировать HTML, но не станут новыми страницами на вашем веб-сайте, вам понадобится новая папка в вашем проекте: src/components/.

Создайте компонент навигации

  1. Создайте новый файл: src/components/Navigation.astro.

  2. Скопируйте ваши ссылки для перехода между страницами из верхней части любой страницы и вставьте их в ваш новый файл Navigation.astro:

    ---
---
<a href="/">Главная</a>
<a href="/about/">О сайте</a>
<a href="/blog/">Блог</a>

    :::tipЕсли в метаданных вашего файла .astro ничего нет, вам не нужно писать разделители кода (---). Вы всегда можете добавить их обратно, когда это понадобится.:::

Импортируйте и используйте Navigation.astro

  1. Вернитесь к index.astro и импортируйте ваш новый компонент внутри разделителей кода:

    ---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Главная";
---

  2. Затем ниже замените существующие элементы ссылок HTML приведённым кодом, используя новый компонент навигации, который вы только что импортировали:

    <a href="/">Главная</a>
<a href="/about/">О сайте</a>
<a href="/blog/">Блог</a>
<Navigation />

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

Ваш сайт содержит тот же HTML, что и раньше. Но теперь эти три строки кода предоставляются вашим компонентом <Navigation />.

Попробуйте сами — Добавьте навигацию на остальные страницы своего сайта

Импортируйте и используйте компонент <Navigation /> на других двух страницах вашего сайта (about.astro и blog.astro) с помощью того же метода.

Не забудьте

  • Добавить оператор импорта в верхней части скрипта компонента, внутри разделителей кода.
  • Заменить существующий код компонентом навигации.

:::noteКогда вы перестраиваете свой код, но не изменяете внешний вид вашей страницы в браузере, это называется рефакторингом. Вы будете рефакторить несколько раз в этом модуле, когда замените части HTML вашей страницы на компоненты.

Это позволяет вам быстро начать работу с любым рабочим кодом, который часто дублируется в вашем проекте. Затем вы можете постепенно улучшать дизайн существующего кода, не изменяя внешний вид вашего сайта.:::

Проверьте свои знания

  1. Вы можете это сделать, когда элементы повторяются на нескольких страницах:

  2. Компоненты Astro:

  3. Компоненты Astro автоматически создают новую страницу на вашем сайте, когда вы…

Контрольный список

Ресурсы

Внести свой вклад Сообщество Поддержать