4 • 通过可复用的页面布局节省时间和精力

创建并传递数据到博客布局

现在你已经为页面创建了布局，让我们为博客文章也添加一个布局！

准备好…

  • 为你的 Markdown 文件创建一个新的博客文章布局
  • 将 YAML frontmatter 的值作为 props 传递给布局组件

为你的博客文章编写布局

标题部分 为你的博客文章编写布局

当你在一个 .md 文件中包含 layout frontmatter 属性时，你可以在布局文件中使用所有 frontmatter YAML 的值。

  1. 创建一个新文件：src/layouts/MarkdownPostLayout.astro。

  2. 将以下代码复制到 MarkdownPostLayout.astro 中。

    src/layouts/MarkdownPostLayout.astro
    ---
    const { frontmatter } = Astro.props;
    ---
    <h1>{frontmatter.title}</h1>
    <p>Written by {frontmatter.author}</p>
    <slot />

  3. 在 post-1.md 中添加以下 frontmatter 属性。

    src/pages/posts/post-1.md
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'My First Blog Post'
    pubDate: 2022-07-01
    description: 'This is the first post of my new Astro blog.'
    author: 'Astro Learner'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        alt: 'The full Astro logo.'
    tags: ["astro", "blogging", "learning in public"]
    ---

  4. 再次检查 localhost:3000/posts/post-1 上的浏览器预览，并注意布局为页面添加了什么内容。

  5. 将相同的布局属性添加到你的另外两篇博客文章 post-2.md 和 post-3.md 中。在浏览器中验证你的布局是否也应用于这些文章。

自己动手尝试 - 自定义博客文章布局

标题部分 自己动手尝试 - 自定义博客文章布局

挑战：确定每篇博客文章中共有的项目，并使用 MarkdownPostLayout.astro 来渲染它们，而不是在 post-1.md 和将来的每篇博客文章中编写它们。

下面是重构你的代码的例子，将 pubDate 包含在布局组件中，而不是在你的 Markdown 内容的正文中编写：

src/pages/posts/post-1.md
Published on: 2022-07-01


Welcome to my new blog about learning Astro! Here, I will share my learning journey as I build a new website.
src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Published on: {frontmatter.pubDate.slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />

根据你认为的有用程度进行重构，并根据需要向布局中添加更多内容。记住，你添加到布局中的每一项都会减少你在每篇博客文章中需要编写的内容！

下面是一个重构后的布局示例，只留下了由 slot 渲染的单个博客文章内容。你可以自由使用这个示例，或者创建自己的布局！

src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<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 />

检验你的知识

标题部分 检验你的知识

你能找出应该填入空白处的内容，使得以下两个组件一起产生可用的 Astro 代码吗？

  1. src/pages/posts/learning-astro.md
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Learning About Markdown in Astro"
    author: Astro Learner
    ____: 2022-08-08
    ---
    I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.
  2. src/layouts/MarkdownLayout.astro
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Written by:{frontmatter.______ } on {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    显示填写好空白处的代码！
    1. src/pages/posts/learning-astro.md
      ---
      layout: ../../layouts/MyMarkdownLayout.astro
      title: "Learning About Markdown in Astro"
      author: Astro Learner
      pubDate: 2022-08-08
      ---
      I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.
    2. src/layouts/MarkdownLayout.astro
      ---
      import Footer from '../components/Footer.astro'
      const { frontmatter } = Astro.props
      ---
      <h1>{frontmatter.title}</h1>
      <p>Written by:{frontmatter.author } on {frontmatter.pubDate}</p>
      <slot />
      <Footer />

任务清单

标题部分 任务清单

相关资源

标题部分 相关资源