跳转到内容

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

既然你已经为页面创建了布局,现在是时候为博客文章添加布局了!

准备好去……

  • 为你的 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;
    ---
    <meta charset="utf-8" />
    <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.js.cn/assets/rose.webp'
    alt: 'The Astro logo on a dark background with a pink glow.'
    tags: ["astro", "blogging", "learning in public"]
    ---
  4. 再次在 https://:4321/posts/post-1 查看你的浏览器预览,并注意布局为你的页面添加了什么。

  5. 将相同的布局属性添加到你的另外两篇博客文章 post-2.mdpost-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;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />

尽情地重构你认为有用的部分,并向你的布局中添加任何你想要的内容,请记住,你添加到布局中的所有内容都会让你在每篇博客文章中少写一点东西!

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

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

你能想出空白处应该填什么,以便以下两个组件共同生成可运行的 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/MyMarkdownLayout.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/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 />
贡献 社区 赞助