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

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

Теперь, когда вы имеете одинаковый 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';
    ---

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

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы