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

Совмещаем макеты для максимальной эффективности

Теперь, когда у вас написан ваш первый .md пост в блог, давайте заставим его выглядеть как остальные страницы на вашем сайте!

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

  • Вложите макет вашего поста в блоге в главный макет вашей страницы

Вложив два макета

В BaseLayout.astro уже определен общий макет ваших страниц.

MarkdownPostLayout.astro предлагает вам дополнительные шаблоны для обычных свойств поста в блоге, таких как title и date, но ваши посты в блоге не выглядят так, как другие страницы на вашем сайте. Вы можете достичь этого, вложив макеты.

  1. В src/layouts/MarkdownPostLayout.astro импортируйте BaseLayout.astro и используйте его для обертывания всего содержимого шаблона. Не забудьте передать свойство pageTitle:

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Написал: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

  2. Проверьте предварительный просмотр в браузере по адресу http://localhost:4321/posts/post-1. Теперь вы должны видеть содержимое, отрендеренное:

    • Вашим основным макетом страницы, включая стили, ссылки для навигации и социальные подвалы.
    • Вашим макетом поста в блоге, включая свойства frontmatter, такие как описание, дата, заголовок и изображение
    • Вашим отдельным содержимым поста Markdown, включая только текст, написанный в этом посте

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

    Удалите строку, которая отображает заголовок вашей страницы из MarkdownPostLayout.astro:

    src/layouts/MarkdownPostLayout.astro
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Написал: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

  4. Снова проверьте предварительный просмотр в браузере по адресу http://localhost:4321/posts/post-1 и убедитесь, что эта строка больше не отображается и что ваш заголовок отображается только один раз. Внесите все необходимые корректировки, чтобы убедиться, что у вас нет дублирующегося контента.

Убедитесь, что:

  • Каждый пост в блоге показывает один и тот же шаблон страницы, и никакого контента не пропущено. (Если в одном из ваших постов в блоге отсутствует контент, проверьте его свойства frontmatter.)

  • На странице не дублируется контент. (Если что-то отображается дважды, обязательно удалите это из MarkdownPostLayout.astro.)

Если вы хотите настроить шаблон вашей страницы, вы можете это сделать.

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

  1. Это позволяет вам вкладывать один макет в другой и использовать преимущества работы с модульными частями.

  2. Несколько макетов особенно полезны для проектов, которые содержат страницы Markdown, как например…

  3. Кто из них предоставляет шаблонирование для всех ваших страниц?

Чек-лист

Ресурсы