Skip to content

Latest commit

 

History

History
153 lines (117 loc) · 7.34 KB

1.mdx

File metadata and controls

153 lines (117 loc) · 7.34 KB
type title description i18nReady
tutorial
Создание переиспользуемого компонента навигации
Учебное пособие: Создайте свой первый блог на Astro — Замените элементы, повторяющиеся на нескольких страницах, переиспользуемым компонентом
true

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

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

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

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

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

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

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

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

    ---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>

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

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

1. Вернитесь к `index.astro` и импортируйте ваш новый компонент внутри кодового забора: 
```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
---
```

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

    <a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />

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

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

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

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

Не забудьте

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

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

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

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

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

    перезапустите сервер разработки рефакторинг для многократного использования компонентов создать новую страницу

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

    могут быть многократно использованы фрагменты HTML оба из вышеперечисленных пунктов!

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

    вставляете `` проводите рефакторинг помещаете файл `.astro` в директорию `src/pages/`

Чек-лист

- [ ] Я могу рефакторить содержимое в компоненты многократного использования. - [ ] Я могу добавить новый компонент на страницу `.astro`.

Ресурсы