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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заголовок раздела Импортируйте и используйте Navigation.astro

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

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

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

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

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

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

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

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

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

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

Не забудьте

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

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

Заголовок раздела Проверьте свои знания

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

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

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

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

Заголовок раздела Контрольный список

Ресурсы

Заголовок раздела Ресурсы
Внести свой вклад Сообщество Sponsor