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

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

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

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

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

Создайте новую папку 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

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

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    ---

  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 автоматически создают новую страницу на вашем сайте, когда вы…

Чек-лист

Ресурсы