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

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

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

  • Рефакторить общие элементы в макете страницы
  • Использовать элемент 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 = "Home Page";
    ---
    <html lang="en">
      <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 = "Home Page";
    ---
    <BaseLayout>
      <h2>My awesome blog subtitle</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 = "Home Page";
    ---
    <html lang="en">
      <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 /> позволяет вам внедрять (или «slotting in») дочерний контент, написанный между открывающими и закрывающими тегами <Component></Component>, в любой файл Component.astro.

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

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

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

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>My awesome blog subtitle</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 = "Home Page";
    const { pageTitle } = Astro.props;
    ---

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

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

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

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

Не забудьте:

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

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

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

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

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

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

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

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

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

Чек-лист

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

Ресурсы

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