布局结合，两全其美

现在你已经写好了第一篇 .md 博客文章，让我们使其看起来和你网站上的其他页面一样吧！

你已经有了一个名为 BaseLayout.astro 的文件，用于定义页面的整体布局。

MarkdownPostLayout.astro 为你提供了一些额外的模板，用于常见博客文章属性的格式化，例如 title 和 date，但你的博客文章看起来和网站上的其他页面不一样。你可以通过嵌套布局来解决。

1. 在 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.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. 在浏览器预览中查看 localhost:3000/posts/post-1。现在，你应该看到以下内容的渲染：

   • 你的主页面布局，包括样式、导航链接和社交页脚。
   • 你的博客文章布局，包括描述、日期、标题和图片等前置属性。
   • 你的独立博客文章 Markdown 内容，只包括此篇文章中编写的文本。

3. 注意，你的页面标题现在显示了两次，每个布局各有一次。

   从 MarkdownPostLayout.astro 中删除显示页面标题的行：

   <BaseLayout pageTitle={frontmatter.title}>
     <h1>{frontmatter.title}</h1>
     <p>{frontmatter.pubDate.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>

4. 再次检查浏览器预览 localhost:3000/posts/post-1，验证该行不再显示（你的标题只显示一次）。根据需要进行其他调整，确保没有重复的内容。

请确保：

• 每个博客文章都显示相同的页面模板，没有遗漏任何内容。（如果其中一篇博客文章缺少内容，请检查其前置属性。）

• 页面上没有重复的内容。（如果某个内容被渲染了两次，请确保从 MarkdownPostLayout.astro 中将其删除。）

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

• Astro 中的嵌套布局