Astro JS - Layouts

Quiz

Astro Layouts

The term 'layout' in Astro refer to the Astro components that provide common UI elements shared across pages, such as headers, navigation bars, and footers. The layout components in Astro provides Markdown pages with a page shell (<html>, <head> and <body> tags) and a <slot /> to specify where individual page content should be injected.

Key Features of Astro Layouts

Layout components are just like other components in Astro, they can accept props and import and use other components like any other Astro component.
Layout components can be nested inside other layout components.
Layout components are generally stored in the 'src/layouts' directory, this is not necessary, you can place them anywhere in the 'src' directory.
The layout component may not have to provide full page shell. However, if a layout component does contain a page shell, its <html> element must be the parent of all other elements in the component.

Astro Sample Layout

The section below shows a simple example of how to create and use a layout component in Astro.

Create Layout Component

First, we need to create a basic layout component. The layout component will contain the basic structure of the page, such as <html>, <head>, <body>, and a navigation bar.

// src/layouts/Layout.astro

---

const { title } = Astro.props;
---
<html lang="en">
    <head>
        <h1 title={title}/>
    </head>
    <body>
        <nav>
        <a href="#">Home</a>
        <a href="#">Posts</a>
        <a href="#">Contact</a>
        </nav>
        <h1>{title}</h1>
        <article>
        <slot /> <!-- your content is injected here -->
        </article>
    </body>
</html>

Use Layout in Home Page

Now, we will import and use the layout component in the index page of our Astro project.

// src/pages/index.astro

---
import MySiteLayout from '../layouts/Layout.astro';
---
<MySiteLayout title="Home Page">
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

Output

When you run the Astro project, you will see the output as shown below. The content of the index page is wrapped inside the layout component.

Use TypeScript with Layout

Astro framework have TypeScript support, and you can use TypeScript with layout components. Any Astro layout can be modified to introduce type safety & autocompletion by providing the types for your props. Let's see an example.

Example

Here is an example of how to use TypeScript with layout components in Astro.

// src/layouts/Layout.astro

---
interface Props {
  title: string;
  description: string;
  publishDate: string;
  viewCount: number;
}
const { title, description, publishDate, viewCount } = Astro.props;
---
<html lang="en">
    <head>
        <title>{title}</title>
    </head>
    <body>
        <header>
        <p>Published on {publishDate}</p>
        <p>Viewed by {viewCount} folks</p>
        </header>
        <main>
        <slot />
        </main>
    </body>
</html>

Markdown Layouts

You can also use Markdown files as layout components in Astro. The Astro provides a special layout frontmatter property intended for individual .md files located within src/pages/ using file-based routing to specify which .astro component to use as the page layout. This component allows you to provide <head> content like meta tags (e.g. <meta charset="utf-8">) and styles for the Markdown page. By default, this specified component can automatically access data from the Markdown file.

Example

Here is an example of how to use a Markdown file as a layout component in Astro.

// src/layouts/MarkdownLayout.astro

---
layout: ../layouts/Layout.astro
title: "Hello, World!"
author: "Matthew Phillips"
date: "09 Aug 2022"
---
All frontmatter properties are available as props to an Astro layout component.

The `layout` property is the only special one provided by Astro.

You can use it in Markdown files located within `src/pages/`.

Output

When you run the Astro project, you will see the output as shown below. The content of the Markdown file is wrapped inside the layout component.

Nesting Layouts

In Astro, you can break down your layout into smaller components and nest them inside each other. This allows you to create a more modular and reusable layout structure.

In the code, a BlogPostLayout.astro layout component could style a posts title, date and author. Then, a site-wide BaseLayout.astro could handle the rest of your page template, like navigation, footers, SEO meta tags, global styles, and fonts. You can also pass props received from your post to another layout, just like any other nested component.

// src/layouts/BaseLayout.astro

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout url={frontmatter.url}>
    <h1>{frontmatter.title}</h1>
    <h2>Post author: {frontmatter.author}</h2>
    <slot />
</BaseLayout>

Print Page