布局结合，两全其美

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

准备好…

将博客文章的布局嵌套在主页面布局内

嵌套两个布局

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

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

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

在浏览器预览中查看 http://localhost:4321/posts/post-1。现在，你应该看到以下内容的渲染：
- 你的主页面布局，包括样式、导航链接和社交页脚。
- 你的博客文章布局，包括描述、日期、标题和图片等前置属性。
- 你的独立博客文章 Markdown 内容，只包括此篇文章中编写的文本。

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

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

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

请确保：

每个博客文章都显示相同的页面模板，没有遗漏任何内容。（如果其中一篇博客文章缺少内容，请检查其前置属性。）
页面上没有重复的内容。（如果某个内容被渲染了两次，请确保从 MarkdownPostLayout.astro 中将其删除。）

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

检验你的知识

什么可以让你将一个布局嵌套在另一个布局中，并利用模块化的方式进行处理：
1. 连续开发
2. 响应式设计
3. 基于组件的设计
多个布局对于包含 Markdown 页面的项目特别有用，比如……
1. 博客
2. 管理面板
3. 聊天应用
以下哪个文件提供了所有页面的模板？
1. index.astro
2. BaseLayout.astro
3. post-1.md

任务清单

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

布局结合，两全其美

嵌套两个布局

检验你的知识

任务清单

相关资源