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

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

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

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

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

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

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

У вас уже есть 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}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().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. В файле src/layouts/MarkdownPostLayout.astro теперь можно удалить тег meta, так как он уже включен в ваш BaseLayout:

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().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>

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

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

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

    Удалите из 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>Автор: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

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

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

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

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

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

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

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

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

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

  3. Что из перечисленного обеспечивает шаблонизацию всех ваших страниц?

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

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

Ресурсы

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