4 • Save time and energy with reusable page layouts

Create and pass data to a custom blog layout

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

Get ready to…

  • Create a new blog post layout for your Markdown files
  • Pass YAML frontmatter values as props to layout component

Add a layout to your blog posts

Section titled Add a layout to your blog posts

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://docs.astro.build/assets/full-logo-light.png'
        alt: 'The full Astro logo.'
    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.

Try it yourself - Customize your blog post layout

Section titled Try it yourself - Customize your blog post layout

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.

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.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.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 />

Test your knowledge

Section titled Test your knowledge

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.
  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 />
    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.
    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 />

Checklist

Section titled Checklist

Resources

Section titled Resources