跳转到内容
Astro Astro

布局结合，两全其美

现在你已经写好了第一篇 .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.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.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. 什么这使你可以将一个布局嵌套在另一个布局中，并利用模块化的方式进行处理：

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

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

任务清单

相关资源