#How to use .astro layout file for markdown file?

4 messages · Page 1 of 1 (latest)

devout flax
#

How to use .astro layout file for markdown file?

glossy peakBOT
#

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

#

To use an .astro layout file for a Markdown file in Astro, you need to specify the layout in the frontmatter of your Markdown file. Here's a step-by-step guide:

  1. Create your layout file in the src/layouts/ directory. For example, you might create a file called MySiteLayout.astro.

  2. In your Markdown file, add a frontmatter section at the top of the file. In this section, specify the layout property with the relative path to your layout file. For example:

---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title
This is my page, written in **Markdown.**

In this example, the MySiteLayout.astro layout will be applied to the Markdown page. The title specified in the frontmatter will be available as a prop in the layout file.

  1. In your layout file, you can access the frontmatter properties through Astro.props.frontmatter. For example:
---
const { frontmatter } = Astro.props;
---
<html>
  <head>
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <h1>{frontmatter.title}</h1>
    <slot />
  </body>
</html>

In this example, the title from the Markdown file's frontmatter is used in the layout to set the page title and display a heading.

Remember, the layout file wraps the Markdown content in a full HTML page document. The <slot /> component is where the Markdown content will be injected.

For more details, you can refer to the Astro documentation on Markdown/MDX Pages (https://docs.astro.build/en/core-concepts/astro-pages#markdownmdx-pages) and Astro documentation on Layouts (https://docs.astro.build/en/core-concepts/layouts/#markdownmdx-layouts).

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

#

@devout flax kapa.ai is still learning and improving, please let us know how it did by reacting below