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

Комбинируйте макеты, чтобы получить лучшее из двух миров

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

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

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

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

Заголовок раздела Вложите два макета

У вас уже есть 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.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {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.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {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. Что из перечисленного обеспечивает шаблонизацию всех ваших страниц?

Чек-лист

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

Ресурсы

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