Now that you have added a layout to each blog post, it’s time to make your posts look like the rest of the pages on your website!
Mach dich bereit, …
- Nest your blog post layout inside your main page layout
Nest your two layoutsSection titled Nest your two layouts
You already have a
BaseLayout.astro for defining the overall layout of your pages.
MarkdownPostLayout.astro gives you some additional templating for common blog post properties such as
date, but your blog posts don’t look like the other pages on your site. You can match the look of your blog posts to the rest of your site by nesting layouts.
BaseLayout.astroand use it to wrap the entire template content. Don’t forget to pass the
Check your browser preview at
http://localhost:4321/posts/post-1. Now you should see content rendered by:
- Your main page layout, including your styles, navigation links, and social footer.
- Your blog post layout, including frontmatter properties like the description, date, title, and image
- Your individual blog post Markdown content, including just the text written in this post
Notice that your page title is now displayed twice, once by each layout.
Remove the line that displays your page title from
Check your browser preview again at
http://localhost:4321/posts/post-1and verify that this line is no longer displayed and that your title is only displayed once. Make any other adjustments necessary to ensure that you do not have any duplicated content.
Make sure that:
Each blog post shows the same page template, and no content is missing. (If one of your blog posts is missing content, check its frontmatter properties.)
No content is duplicated on a page. (If something is being rendered twice, then be sure to remove it from
If you’d like to customize your page template, you can.
Test your knowledgeSection titled Test your knowledge
This allows you to nest one layout inside another and take advantage of working with modular pieces.
Multiple layouts are particularly useful for projects that contain Markdown pages, like a…
Which of these provides templating for all your pages?