Create and pass data to a custom blog layout

import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

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

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.

2. Copy the following code into MarkdownPostLayout.astro

   astroCopy

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

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

   markdownCopy

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

   </Steps>

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

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:

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.

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

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!

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

<slot />

:::note[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. :::

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

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

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

   <details> <summary>Show the blanks filled in!</summary>
   Copy

   1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
       ---
       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.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
       ---
       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 />
       ```
   

   </details>

Checklist

Resources

• Markdown Layouts in Astro

• Markdown Layout Props

• Introduction to YAML <Badge class="neutral-badge" text="external" />