Skip to content

Latest commit

 

History

History
183 lines (143 loc) · 6.52 KB

2.mdx

File metadata and controls

183 lines (143 loc) · 6.52 KB
Raw
type title description i18nReady
tutorial
Create and pass data to a custom blog layout
Tutorial: Build your first Astro blog — Create a blog post layout for your Markdown files and pass it frontmatter values as props
true

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!

- 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

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`

  1. Copy the following code into MarkdownPostLayout.astro

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

  2. Add the following frontmatter property in 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/rose.webp' 
    alt: 'The Astro logo on a dark background with a pink glow.'
tags: ["astro", "blogging", "learning in public"]
---

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

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

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

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

Checklist

- [ ] I can add a layout property to a Markdown blog post in its YAML frontmatter. - [ ] I can create a separate layout for Markdown posts. - [ ] I can use values from a blog post's frontmatter in a layout component.

Resources