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

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

Теперь, когда у вас написан ваш первый .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. Кто из них предоставляет шаблонирование для всех ваших страниц?

Чек-лист

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

Ресурсы

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