结合布局以获得两全其美的效果

现在你已经为每篇博客文章添加了布局，是时候让你的文章看起来像网站上的其他页面了！

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

Get ready to…

将博客文章布局嵌套在主页布局中

嵌套两个布局

¥Nest your two layouts

你已经有一个 BaseLayout.astro 用于定义页面的整体布局。

¥You already have a BaseLayout.astro for defining the overall layout of your pages.

MarkdownPostLayout.astro 为你提供了一些常见博客文章属性（例如 title 和 date）的附加模板，但你的博客文章与网站上的其他页面不同。你可以通过嵌套布局将博客文章的外观与站点的其余部分相匹配。

¥MarkdownPostLayout.astro gives you some additional templating for common blog post properties such as title and 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.

In src/layouts/MarkdownPostLayout.astro, import BaseLayout.astro and use it to wrap the entire template content. Don’t forget to pass the pageTitle prop:

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

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

Check your browser preview again at http://localhost:4321/posts/post-1 and 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:

每篇博客文章都显示相同的页面模板，并且没有丢失任何内容。（如果你的一篇博客文章缺少内容，请检查其 frontmatter 属性。）
页面上没有重复的内容。（如果某些内容被渲染两次，请务必将其从 MarkdownPostLayout.astro 中删除。）

如果你想自定义页面模板，你可以这样做。

¥If you’d like to customize your page template, you can.

测试你的知识

¥Test your knowledge

这允许你将一种布局嵌套在另一种布局中，并利用模块化部件的使用。

多种布局对于包含 Markdown 页面的项目特别有用，例如…

其中哪一个为你的所有页面提供模板？

清单

¥Checklist

我可以嵌套布局，检查是否有任何重复的元素。

资源

¥Resources

Astro 中的嵌套布局