Layouts
Layouts are a special type of Astro component useful for creating reusable page templates.
A layout component is conventionally used to provide an .astro
or .md
page both a page shell (<html>
, <head>
and <body>
tags) and a <slot />
to specify where in the layout page content should be injected.
Layouts often provide common <head>
elements and common UI elements for the page such as headers, navigation bars and footers.
Layout components are commonly placed in a src/layouts
directory in your project.
Sample Layout
Section titled Sample Layout---
// Example: src/layouts/MySiteLayout.astro
---
<html>
<head>
<!-- ... -->
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Posts</a>
<a href="#">Contact</a>
</nav>
<article>
<slot /> <!-- your content is injected here -->
</article>
</body>
</html>
---
// Example: src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
<p>My page content, wrapped in a layout!</p>
</MySiteLayout>
📚 Learn more about slots.
Nesting Layouts
Section titled Nesting LayoutsLayout components do not need to contain an entire page worth of HTML. You can break your layouts into smaller components, and then reuse those components to create even more flexible, powerful layouts in your project.
For example, a common layout for blog posts may display a title, date and author. A BlogPostLayout.astro
layout component could add this UI to the page and also leverage a larger, site-wide layout to handle the rest of your page.
---
// Example src/layout/BlogPostLayout.astro
import BaseLayout from '../layouts/BaseLayout.astro'
const {content} = Astro.props;
---
<BaseLayout>
<h1>{content.title}</h1>
<h2>Post author: {content.author}</h2>
<slot />
</BaseLayout>
Markdown Layouts
Section titled Markdown LayoutsPage layouts are especially useful for Markdown files. Markdown files can use the special layout
front matter property to specify a layout component that will wrap their Markdown content in a full page HTML document.
When a Markdown page uses a layout, it passes the layout a single content
prop that includes all of the Markdown front matter data and final HTML output. See the BlogPostLayout.astro
example above for an example of how you would use this content
prop in your layout component.
// src/pages/posts/post-1.md
---
title: Blog Post
description: My first blog post!
layout: ../layouts/BlogPostLayout.astro
---
This is a post written in Markdown.
📚 Learn more about Astro’s Markdown support in our Markdown guide.