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

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

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

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

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

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

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

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

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

    ---
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:

    ---
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 строку, которая отображает заголовок страницы:

    <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. Что из перечисленного обеспечивает шаблонизацию всех ваших страниц?

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

Ресурсы

Внести свой вклад Сообщество Поддержать