创建数据并将其传递到自定义博客布局

现在你已经有了页面布局，是时候为博客文章添加布局了！

¥Now that you have a layout for your pages, it’s time to add a layout for blog posts!

Get ready to…

• 为你的 Markdown 文件创建新的博客文章布局

• 将 YAML frontmatter 值作为 props 传递给布局组件

为你的博客文章添加布局

Section titled 为你的博客文章添加布局

¥Add a layout to your blog posts

当你在 .md 文件中包含 layout frontmatter 属性时，所有 frontmatter YAML 值都可用于布局文件。

¥When you include the layout frontmatter property in an .md file, all of your frontmatter YAML values are available to the layout file.

1. Create a new file at src/layouts/MarkdownPostLayout.astro

2. Copy the following code into MarkdownPostLayout.astro

   src/layouts/MarkdownPostLayout.astro

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

3. Add the following frontmatter property in post-1.md

   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://astro.nodejs.cn/assets/rose.webp'
       alt: 'The Astro logo on a dark background with a pink glow.'
   tags: ["astro", "blogging", "learning in public"]
   ---

4. Check your browser preview again at http://localhost:4321/posts/post-1 and notice what the layout has added to your page.

5. Add the same layout property to your two other blog posts post-2.md and post-3.md. Verify in your browser that your layout is also applied to these posts.

Tip

When using layouts, you now have the option of including elements, like a page title, in the Markdown content or in the layout. Remember to visually inspect your page preview and make any adjustments necessary to avoid duplicated elements.

自己尝试一下 - 自定义你的博客文章布局

Section titled 自己尝试一下 - 自定义你的博客文章布局

¥Try it yourself - Customize your blog post layout

挑战：识别每篇博文中常见的项目，并使用 MarkdownPostLayout.astro 来渲染它们，而不是将它们写在 post-1.md 中的 Markdown 以及以后的每一篇博文中。

¥Challenge: Identify items common to every blog post, and use MarkdownPostLayout.astro to render them, instead of writing them in your Markdown in post-1.md and in every future blog post.

以下是重构代码以将 pubDate 包含在布局组件中而不是将其写入 Markdown 正文中的示例：

¥Here’s an example of refactoring your code to include the pubDate in the layout component instead of writing it in the body of your 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.toString().slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />

尽可能多地重构你认为对你有用的内容，并根据需要向布局中添加尽可能多的内容，请记住，添加到布局中的所有内容都会让你在每篇博客文章中少写一件内容！

¥Refactor as much as you think is useful to you, and add as much to your layout as you want, remembering that everything that you add to your layout is one less thing you will write in each and every blog post!

下面是一个重构布局的示例，该布局仅留下由插槽渲染的单个博客文章内容。请随意使用它，或者创建你自己的！

¥Here is an example of a refactored layout that leaves only individual blog post content rendered by the slot. Feel free to use this, or create your own!

src/layouts/MarkdownPostLayout.astro

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

Avoid duplication

Anything rendered by your layout does not need to be typed into your blog post! If you notice any duplication when you check your browser preview, then be sure to remove content from your Markdown file.

测试你的知识

Section titled 测试你的知识

¥Test your knowledge

你能弄清楚空白处应该填什么，以便下面的两个组件一起生成工作的 Astro 代码吗？

¥Can you figure out what should go in the blanks so that the following two components together produce working Astro code?

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.

src/layouts/MyMarkdownLayout.astro

  ---
  import ____________ from '../components/Footer.astro'
  const { ___________ } = Astro.props
  ---
  <h1>{frontmatter.title}</h1>
  <p>Written by: {frontmatter.______} on {frontmatter.pubDate}</p>
  < _______ />
  <Footer />

Show the blanks filled in!

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.

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

清单

Section titled 清单

¥Checklist

• 我可以在 Markdown 博客文章的 YAML 前言中添加布局属性。

• 我可以为 Markdown 帖子创建单独的布局。

• 我可以在布局组件中使用博客文章前言中的值。

资源

Section titled 资源

¥Resources

• Astro 中的 Markdown 布局

• Markdown 布局属性

• YAML 简介 external