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

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

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

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

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

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

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

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

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

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

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

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

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