Zum Inhalt springen
Astro Astro

Layouts

Layouts sind besondere Astro-Komponenten, die nützlich für die Erstellung wiederverwendbarer Seitenvorlagen sind.

Eine Layout-Komponente wird üblicherweise verwendet, um einer .astro- oder .md-Seite sowohl ein Seiten-Gerüst (<html>, <head> und <body>-Tags) als auch einen <slot /> zur Verfügung zu stellen, der bestimmt, wo im Layout der Seiteninhalt eingefügt werden soll.

Layouts enthalten häufig gemeinsame <head>-Elemente und gemeinsame UI-Elemente der Website, z.B. Kopfzeilen, Navigationsleisten und Fußzeilen.

Layouts werden normalerweise im Verzeichnis src/layouts deines Projekts abgelegt.

Beispiel-Layout

src/layouts/MeinLayout.astro
<html>
  <head>
    <meta charset="utf-8">
    <title>Meine coole Astro-Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav>
      <a href="#">Startseite</a>
      <a href="#">Beiträge</a>
      <a href="#">Kontakt</a>
    </nav>
    <article>
      <slot /> <!-- Dein Inhalt wird hier eingefügt -->
    </article>
  </body>
</html>
src/pages/index.astro
---
import MeinLayout from '../layouts/MeinLayout.astro';
---
<MeinLayout>
  <p>Mein Seiteninhalt, umgeben von einem Layout!</p>
</MeinLayout>

📚 Lerne mehr über die Verwendung von Slots.

Markdown-Layouts

Seitenlayouts sind besonders nützlich für Markdown-Dateien. Markdown-Dateien können eine spezielle layout-Eigenschaft am Anfang des Frontmatters verwenden, um anzugeben, welche .astro-Komponente als Seitenlayout verwendet werden soll.

src/pages/posts/beitrag-1.md
---
layout: ../../layouts/BlogBeitragsLayout.astro
title: Blogbeitrag
description: Mein erster Blogbeitrag!
---
Dies ist ein Beitrag, der in Markdown geschrieben wurde.

Wenn eine Markdown-Seite ein Layout verwendet, übergibt sie eine frontmatter-Eigenschaft an die .astro-Komponente, die alle Frontmatter-Eigenschaften sowie die gerenderte HTML-Ausgabe der Seite enthält.

src/layouts/BlogBeitragsLayout.astro
---
const {frontmatter} = Astro.props;
---
<html>
   <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>Autor des Beitrags: {frontmatter.author}</h2>
  <slot />
   <!-- ... -->
</html>

📚 Erfahre mehr über Astros Markdown-Unterstützung in unserer Markdown-Anleitung.

Verschachtelung von Layouts

Layout-Komponenten müssen nicht eine ganze Seite im HTML-Format enthalten. Du kannst deine Layouts in kleinere Komponenten aufteilen und diese Komponenten dann wiederverwenden, um noch flexiblere, leistungsfähigere Layouts in deinem Projekt zu erstellen.

Beispielsweise könnte ein übliches Layout für Blogbeiträge einen Titel, ein Datum und einen Autor anzeigen. Eine BlogBeitragsLayout.astro-Layout-Komponente könnte diese Informationen zur Seite hinzufügen und für die Darstellung der restlichen Seitenelemente ein größeres, Website-weites Basis-Layout nutzen.

src/layouts/BlogBeitragsLayout.astro
---
import BasisLayout from '../layouts/BasisLayout.astro'
const {frontmatter} = Astro.props;
---
<BasisLayout>
  <h1>{frontmatter.title}</h1>
  <h2>Autor des Beitrags: {frontmatter.author}</h2>
  <slot />
</BasisLayout>