Комбинируйте макеты, чтобы получить лучшее из двух миров
Теперь, когда вы добавили макет к каждому блог-посту, пришло время сделать ваши посты похожими на остальные страницы на вашем веб-сайте!
Приготовьтесь…
- Вложить макет вашего блог-поста в основной макет страницы
Вложите два макета
Заголовок раздела Вложите два макетаУ вас уже есть BaseLayout.astro
для определения общего макета ваших страниц.
MarkdownPostLayout.astro
дает вам некоторые дополнительные шаблоны для общих свойств блог-постов, таких как title
и date
, но ваши записи блога не похожи на другие страницы на вашем сайте. Вы можете привести внешний вид блог-постов в соответствие с остальными страницами вашего сайта с помощью вложенных макетов.
-
В
src/layouts/MarkdownPostLayout.astro импортируйте
BaseLayout.astroи используйте его для обертывания всего содержимого шаблона. Не забудьте передать параметр
pageTitle`: -
Проверьте предварительный просмотр браузера по адресу
http://localhost:4321/posts/post-1
. Теперь вы должны увидеть контент, отображаемый:- Вашим основным макетом страницы, включая стили, навигационные ссылки и социальные подвалы.
- Вашим макетом блога, включая свойства frontmatter, такие как описание, дата, заголовок и изображение.
- Вашим индивидуальным содержимым блог-поста в формате Markdown, включая только текст, написанный в этом посте.
-
Обратите внимание, что заголовок вашей страницы теперь отображается дважды, по одному разу в каждом макете.
Удалите из
MarkdownPostLayout.astro
строку, которая отображает заголовок страницы:
- Проверьте предварительный просмотр в браузере по адресу
http://localhost:4321/posts/post-1
и убедитесь, что эта строка больше не отображается и что заголовок отображается только один раз. Внесите любые другие необходимые изменения, чтобы исключить дублирование контента.
Убедитесь, что:
-
В каждом посте блога отображается один и тот же шаблон страницы, а контент не пропадает. (Если в одном из постов блога не хватает содержимого, проверьте его свойства frontmatter).
-
На странице не дублируется контент. (Если что-то отображается дважды, то обязательно удалите это из
MarkdownPostLayout.astro
).
Если вы хотите настроить шаблон страницы, вы можете это сделать.
Проверьте свои знания
Заголовок раздела Проверьте свои знания-
Это позволяет вам вкладывать один макет в другой и использовать модульные элементы.
-
Несколько макетов особенно полезны для проектов, содержащих страницы в формате Markdown, таких как…
-
Что из перечисленного обеспечивает шаблонизацию всех ваших страниц?