#Markdown layout not loading

4 messages · Page 1 of 1 (latest)

elder sedge
#

Following the Astro tutorial with Astro 5.0 but the markdownpost layout isn't working

Below is my MarkdownPostLayout.astro file

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <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 />
</BaseLayout>

My MDX posts are stored in src/pages/posts

e.g. post-1.mdx, post-2.mdx

Is there anything obvious I need to change?

craggy reefBOT
#

Hi @elder sedge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, there are a few things to check regarding your Markdown layout issue:

  1. Frontmatter Layout Property:
    Make sure you're using the layout frontmatter property in your MDX files. For individual Markdown pages in src/pages/, this property is used to specify which .astro component to use as the page layout Markdown Layouts (https://docs.astro.build/en/basics/layouts/#markdown-layouts).

  2. MDX File Structure:
    Ensure your MDX files have the correct structure, including the frontmatter. Here's an example of how your MDX file should look:

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

# My First Blog Post

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.

## What I've accomplished

1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!

## What's next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

Write your first Markdown blog post (https://docs.astro.build/en/tutorial/2-pages/2/#write-markdown-content)

#

  1. Layout File Location:
    Ensure that your MarkdownPostLayout.astro file is in the correct location. Based on the frontmatter in the example above, it should be in src/layouts/MarkdownPostLayout.astro.

  2. Content Collections:
    If you're using content collections, the layout frontmatter property is not recognized as a special property. In this case, you need to generate pages from your collection Generate pages from a collection (https://docs.astro.build/en/tutorial/6-islands/4/#generate-pages-from-a-collection).

  3. MDX Specific Considerations:
    For MDX files, you have the option to import and use a <Layout /> component directly in your MDX file instead of using the frontmatter layout property Importing Layouts Manually (MDX) (https://docs.astro.build/en/basics/layouts/#importing-layouts-manually-mdx).

If you've checked all these points and are still experiencing issues, it might be helpful to review the full tutorial section on creating and passing data to a custom blog layout (https://docs.astro.build/en/tutorial/4-layouts/2/) to ensure you haven't missed any steps.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: