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

Создайте свой первый макет

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

  • Рефакторить общие элементы в макете страницы
  • Использовать элемент Astro <slot /> для размещения содержимого страницы в макете
  • Передавать значения, специфичные для страницы, в качестве свойств в макет

У вас всё ещё есть некоторые компоненты Astro, которые неоднократно отображаются на каждой странице. Пришло время снова провести рефакторинг, чтобы создать общий макет страницы!

Создайте ваш первый компонент макета

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

  1. Создайте новый файл в расположении src/layouts/BaseLayout.astro. (Сначала вам нужно создать новую папку layouts.)

  2. Скопируйте весь контент из index.astro в ваш новый файл, BaseLayout.astro.

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Главная";
    ---
    <html lang="ru">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
        <script>
          import "../scripts/menu.js";
        </script>
      </body>
    </html>

Используйте макет на странице

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

  1. Замените код в файле src/pages/index.astro на следующий:

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Главная";
    ---
    <BaseLayout>
      <h2>Мой потрясающий подзаголовок блога</h2>
    </BaseLayout>

  2. Снова проверьте предварительный просмотр в браузере, чтобы заметить, что изменилось (или, спойлер: не изменилось!).

  3. Добавьте элемент <slot /> в файл src/layouts/BaseLayout.astro прямо перед компонентом футера, затем проверьте предварительный просмотр в браузере вашей страницы «Главная» и заметьте, что на этот раз действительно изменилось!

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Главная";
    ---
    <html lang="ru">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Header />
        <h1>{pageTitle}</h1>
        <slot />
        <Footer />
        <script>
          import "../scripts/menu.js";
        </script>
      </body>
    </html>

Элемент <slot /> позволяет вставлять (или «вкладывать») дочерний контент, написанный между открывающим и закрывающим тегами <Component></Component>, в любой файл Component.astro.

Передайте значения, относящиеся к странице, в качестве свойств

Заголовок раздела Передайте значения, относящиеся к странице, в качестве свойств

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

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Главная";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>Мой потрясающий подзаголовок блога</h2>
    </BaseLayout>

  2. Измените скрипт вашего компонента макета BaseLayout.astro, чтобы он получал заголовок страницы через Astro.props, а не определял его как константу.

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Главная";
    const { pageTitle } = Astro.props;
    ---

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

Попробуйте сами — Используйте свой макет везде

Заголовок раздела Попробуйте сами — Используйте свой макет везде

Переделайте остальные страницы (blog.astro и about.astro) так, чтобы они использовали ваш новый компонент <BaseLayout> для отображения общих элементов страницы.

Не забудьте:

  • Передать заголовок страницы в виде свойств через атрибут компонента.

  • Позволить макету отвечать за рендеринг HTML любых общих элементов.

  • Переместить все существующие теги <style> в <head> страницы со стилями, которые вы хотите сохранить, в HTML-шаблон страницы.

  • Удалить всё, что теперь обрабатывается макетом, с каждой отдельной страницы, включая:

    • элементы HTML
    • компоненты и их импорты
    • CSS правила в теге <style> (например, <h1> на вашей странице «Главная»)
    • теги <script>

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

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

  1. Компонент Astro (файл .astro) может функционировать как:

  2. Чтобы отображать заголовок страницы, вы можете:

  3. Информацию можно передавать из одного компонента в другой следующим образом:

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

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

Ресурсы

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