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

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

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

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

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

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

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

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

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

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

Удалите из 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>
```

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

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

В каждом посте блога отображается один и тот же шаблон страницы, а контент не пропадает. (Если в одном из постов блога не хватает содержимого, проверьте его свойства frontmatter).
На странице не дублируется контент. (Если что-то отображается дважды, то обязательно удалите это из MarkdownPostLayout.astro).

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

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

Это позволяет вам вкладывать один макет в другой и использовать модульные элементы.
1. непрерывное развертывание
2. адаптивный дизайн
3. компонентный дизайн
Несколько макетов особенно полезны для проектов, содержащих страницы в формате Markdown, таких как…
1. блог
2. панель управления
3. приложение для чата
Что из перечисленного обеспечивает шаблонизацию всех ваших страниц?
1. index.astro
2. BaseLayout.astro
3. post-1.md