跳转到内容

布局结合,两全其美

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

准备好…

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

嵌套两个布局

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

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

  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. 以下哪个文件提供了所有页面的模板?

任务清单

相关资源