Question

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

准备好…

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

嵌套两个布局

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

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

1. 在 src/layouts/MarkdownPostLayout.astro 中导入 BaseLayout.astro 并将其用于包装整个模板内容，不要忘记传递 pageTitle 属性：

   src/layouts/MarkdownPostLayout.astro

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

2. 在浏览器预览中查看 http://localhost:4321/posts/post-1。现在，你应该看到以下内容的渲染：

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

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

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

   src/layouts/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>

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

请确保：

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

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

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

检验你的知识

1. 什么可以让你将一个布局嵌套在另一个布局中，并利用模块化的方式进行处理：

   1. 连续开发

   2. 响应式设计

   3. 基于组件的设计

2. 多个布局对于包含 Markdown 页面的项目特别有用，比如……

   1. 博客

   2. 管理面板

   3. 聊天应用

3. 以下哪个文件提供了所有页面的模板？

   1. index.astro

   2. BaseLayout.astro

   3. post-1.md

任务清单

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

相关资源

• Astro 中的嵌套布局

Tutorials