#Shared layout without importing Layout component

13 messages · Page 1 of 1 (latest)

inland ingot
#

does astro not support shared layouts?
or i have to import layout file in every pages/*.astro file :/

jaunty troutBOT
#

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

#

Astro does support shared layouts, but there is no global “app layout” file that is auto‑applied to every page.

Instead, layouts are just normal Astro components that you import and wrap around your page content wherever you want to reuse them. For example, a typical layout:

---
// src/layouts/MySiteLayout.astro
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';

const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <BaseHead title={title} />
  </head>
  <body>
    <nav>...</nav>
    <h1>{title}</h1>
    <article>
      <slot />
    </article>
    <Footer />
  </body>
</html>

Used on a page like:

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

[Layouts basics]

So yes, you do import the layout in each page that should use it. This is the recommended pattern for shared layouts in Astro. Pages are responsible for their own layout choice, and can also nest layouts if needed. [Layouts basics; Nesting layouts]

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

#

@inland ingot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

inland ingot
#

thats the worst thing of astro @jaunty trout , imagine importing layout component for every docs file???

jaunty troutBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

For large sets of content (like docs or blog posts), Astro gives you two patterns that avoid importing a layout in every single file:

  1. Markdown pages with layout frontmatter

Any .md in src/pages/ can declare a layout once in its frontmatter:

---
layout: ../layouts/BlogPostLayout.astro
title: "Hello, World!"
author: "Matthew Phillips"
date: "09 Aug 2022"
---
Content here…

Astro will wrap that Markdown page with the specified layout automatically; you don’t import the layout in the Markdown file itself. [Markdown pages; Markdown layouts]

  1. Content collections + a single dynamic route

For a docs/blog section, you can put all your Markdown/MDX in a content collection and then have one Astro page generate all the routes and apply the layout:

---
// src/pages/posts/[...slug].astro
import { getCollection, render } from 'astro:content';
import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---
<MarkdownPostLayout frontmatter={post.data}>
  <Content />
</MarkdownPostLayout>

All posts in the blog collection now share MarkdownPostLayout.astro, and you only import that layout in this one [...slug].astro file, not in every doc. [Generate pages]

#

So: for .astro pages you do import the layout per page, but for lots of docs/posts you typically use Markdown + layout or content collections + a single route file to avoid that repetition.

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

#

@inland ingot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

inland ingot
#

@jaunty trout declaring front matter like that is the same thing

jaunty troutBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You’re right that per-file frontmatter can still feel repetitive.

Astro’s docs basically describe three levels here:

  1. .astro pages
    There is no global layout; each page chooses its layout by importing and using it. [Layouts basics]

  2. Individual Markdown pages with layout
    Each .md in src/pages/ still declares its own layout in frontmatter. [Individual Markdown pages]

  3. Content collections + one route
    This is the only pattern where you don’t touch every content file for layout at all:

    • Your Markdown/MDX files in a collection (e.g. src/content/docs/…) do not need a layout field.
    • A single route file (e.g. src/pages/docs/[...slug].astro) imports the layout once and wraps all docs:
    ---
import { getCollection, render } from 'astro:content';
import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---
<MarkdownPostLayout frontmatter={post.data}>
  <Content />
</MarkdownPostLayout>

    Here, all posts share the layout via this one file, and you can remove the layout field from each post’s frontmatter. [Generate pages]

#

So if you want to avoid per-file layout declarations for a docs/blog system, Astro’s recommended way (per the docs) is to use content collections + a single dynamic route.

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