Layouts

Layouts sind Astro-Komponenten, die verwendet werden, um eine wiederverwendbare UI-Struktur, wie z.B. eine Seitenvorlage, bereitzustellen.

Wir verwenden den Begriff „Layout“ üblicherweise für Astro-Komponenten, die gemeinsame UI-Elemente für alle Seiten bereitstellen, wie z. B. Kopf-, Navigations- und Fußzeilen. Eine typische Astro-Layoutkomponente bietet Astro-, Markdown- oder MDX-Seiten folgendes:

einer Seitenhülle (<html>, <head> und <body> Tags)
einen <Slot />, um festzulegen, wo einzelne Seiteninhalte eingefügt werden sollen.

Allerdings sind Layoutkomponenten nichts Besonderes! Sie können Props akzeptieren und andere Komponenten importieren und verwenden wie jede andere Astro-Komponente. Sie können UI-Framework-Komponenten und client-seitige Skripte enthalten. Sie müssen nicht einmal eine vollständige Seitenoberfläche bereitstellen, sondern können stattdessen als partielle UI-Vorlagen verwendet werden.

Wenn eine Layoutkomponente jedoch eine Seitenhülle enthält, muss ihr <html>-Element das übergeordnete Element aller anderen Elemente der Komponente sein. Alle <style> oder <script> Elemente müssen von den <html> Tags umschlossen sein.

Layout-Komponenten werden normalerweise in einem src/layouts-Verzeichnis in deinem Projekt platziert, aber das ist keine Voraussetzung; du kannst sie überall in deinem Projekt platzieren. Du kannst Layout-Komponenten sogar neben deinen Seiten platzieren, indem du den Layout-Namen ein _ voranstellst.

Beispiel-Layout

---
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props;
---
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Beiträge</a>
      <a href="#">Kontakt</a>
    </nav>
    <h1>{title}</h1>
    <article>
      <slot /> <!-- dein Inhalt wird hier eingefügt -->
    </article>
    <Footer />
  </body>
  <style>
    h1 {
      font-size: 2rem;
    }
  </style>
</html>

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout title="Startseite">
  <p>Mein Seiteninhalt, verpackt in ein Layout!</p>
</MySiteLayout>

Erfahre mehr über Slots.

TypeScript mit Layouts verwenden

Jedes Astro-Layout kann modifiziert werden, um Typensicherheit und Autovervollständigung einzuführen, indem die Typen für deine Eigenschaft bereitgestellt werden:

---
interface Props {
  title: string;
  description: string;
  publishDate: string;
  viewCount: number;
}
const { title, description, publishDate, viewCount } = Astro.props;
---
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content={description}>
    <title>{title}</title>
  </head>
  <body>
    <header>
      <p>Veröffentlicht am {publishDate}</p>
      <p>Gesehen von {viewCount} Leuten</p>
    </header>
    <main>
      <slot />
    </main>
  </body>
</html>

Markdown Layouts

Seitenlayouts sind besonders nützlich für einzelne Markdown-Seiten, die sonst keine Seitenformatierung haben würden.

Astro bietet eine spezielle layout-Frontmatter-Eigenschaft für einzelne .md-Dateien, die sich innerhalb von src/pages/ befinden und dateibasiertes Routing verwenden (EN), um anzugeben, welche .astro-Komponente als Seitenlayout verwendet werden soll. Diese Komponente ermöglicht es dir, <head>-Inhalte wie Meta-Tags (z.B. <meta charset="utf-8">) und Stile für die Markdown-Seite anzugeben. Standardmäßig kann die angegebene Komponente automatisch auf Daten aus der Markdown-Datei zugreifen.

---
layout: ../layouts/BlogPostLayout.astro
title: "Hallo, Welt!"
author: "Matthew Phillips"
date: "09. August 2022"
---
Alle Frontmatter-Eigenschaften sind als Eigenschaft für eine Astro-Layoutkomponente verfügbar.

Die Eigenschaft `layout` ist die einzige spezielle Eigenschaft von Astro.

Du kannst es in Markdown-Dateien verwenden, die sich in `src/pages/` befinden.

Ein typisches Layout für eine Markdown-Seite umfasst:

Die Eigenschaft frontmatter für den Zugriff auf das Frontmatter der Markdown-Seite und andere Daten.
Ein Standard-<slot />, um anzugeben, wo der Markdown-Inhalt der Seite gerendert werden soll.

---
// 1. Die Frontmatter-Eigenschaft ermöglicht den Zugriff auf Frontmatter und andere Daten
const { frontmatter } = Astro.props;
---
<html>
  <head>
    <!-- Füge hier andere Head-Elemente wie Stile und Meta-Tags hinzu. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <!-- Füge hier andere UI-Komponenten hinzu, wie z.B. allgemeine Kopf- und Fußzeilen. -->
    <h1>{frontmatter.title} by {frontmatter.author}</h1>
    <!-- 2. Das gerenderte HTML wird in den Standard-Slot übertragen. -->
    <slot />
    <p>Geschrieben am: {frontmatter.date}</p>
  </body>
</html>

Du kannst den Props-Typ eines Layouts mit dem MarkdownLayoutProps-Helper setzen:

---
import type { MarkdownLayoutProps } from 'astro';

type Props = MarkdownLayoutProps<{
  // Definiere hier Frontmatter-Requisiten
  title: string;
  author: string;
  date: string;
}>;

// Jetzt sind `frontmatter`, `url` und andere Markdown-Layout-Eigenschaften
// mit Typsicherheit zugänglich
const { frontmatter, url } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href={new URL(url, Astro.site).pathname}>
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <h1>{frontmatter.title} von {frontmatter.author}</h1>
    <slot />
    <p>Geschrieben am: {frontmatter.date}</p>
  </body>
</html>

Markdown Layout Eigenschaften

Ein Markdown-Layout hat über Astro.props Zugriff auf die folgenden Informationen:

file - Der absolute Pfad zu dieser Datei (z.B. /home/user/projects/.../file.md).
url - Die URL der Seite (z.B. /de/guides/markdown-content).
frontmatter - Alle Frontmatter aus dem Markdown- oder MDX-Dokument.
- frontmatter.file - Dasselbe wie die Top-Level-Eigenschaft „file“.
- frontmatter.url - Dasselbe wie die Eigenschaft url der obersten Ebene.
headings - Eine Liste von Überschriften (h1 -> h6) im Markdown- oder MDX-Dokument mit zugehörigen Metadaten. Diese Liste folgt dem Typ: { depth: number; slug: string; text: string }[].
rawContent() - Eine Funktion, die das rohe Markdown-Dokument als String zurückgibt.
compiledContent() - Eine asynchrone Funktion, die das Markdown-Dokument zu einem HTML-String kompiliert zurückgibt.

Manuelles Importieren von Layouts (MDX)

Du kannst auch die spezielle Markdown-Layout-Eigenschaft im Frontmatter von MDX-Dateien verwenden, um die Eigenschaften frontmatter und headings auf die gleiche Weise direkt an eine bestimmte Layoutkomponente zu übergeben.

Um Informationen an dein MDX-Layout zu übergeben, die in deinem Frontmatter nicht vorhanden sind (oder sein können), kannst du stattdessen eine <Layout />-Komponente importieren und verwenden. Diese funktioniert wie jede andere Astro-Komponente und erhält nicht automatisch Eigenschaften. Übergib ihr alle notwendigen Eigenschaften direkt:

---
layout: ../../layouts/BaseLayout.astro
title: 'Mein erster MDX Beitrag'
publishDate: '21. September 2022'
---
import BaseLayout from '../../layouts/BaseLayout.astro';

export function fancyJsHelper() {
  return "Versuch das mal mit YAML zu machen!";
}

<BaseLayout title={frontmatter.title} fancyJsHelper={fancyJsHelper}>
  Willkommen auf meinem neuen Astro-Blog, der MDX verwendet!
</BaseLayout>

Dann stehen dir deine Werte über Astro.props in deinem Layout zur Verfügung, und dein MDX-Inhalt wird in die Seite injiziert, in der deine <Slot />-Komponente geschrieben wird:

---
const { title, fancyJsHelper } = Astro.props;
---
<html>
  <head>
    <!-- -->
    <meta charset="utf-8">
  </head>
  <body>
    <!-- -->
    <h1>{title}</h1>
    <slot /> <!-- dein Inhalt wird hier eingefügt -->
    <p>{fancyJsHelper()}</p>
    <!-- -->
  </body>
</html>

Wenn du ein Layout verwendest (entweder über die Frontmatter-Eigenschaft layout oder durch den Import eines Layouts), musst du den <meta charset="utf-8">-Tag in dein Layout einfügen, da Astro ihn nicht mehr automatisch in deine MDX-Seite einfügt.

Erfahre mehr über die Markdown- und MDX-Unterstützung von Astro in unserem Markdown-Leitfaden (EN).

Verschachtelte Layouts

Layout-Komponenten müssen nicht unbedingt eine ganze Seite mit HTML enthalten. Du kannst deine Layouts in kleinere Komponenten aufteilen und Layoutkomponenten kombinieren, um noch flexiblere Seitenvorlagen zu erstellen. Dieses Muster ist nützlich, wenn du einen Teil des Codes für mehrere Layouts verwenden willst.

Eine Layoutkomponente BlogPostLayout.astro könnte zum Beispiel den Titel, das Datum und den Autor eines Beitrags gestalten. Ein seitenweites BaseLayout.astro könnte dann den Rest deiner Seitenvorlage übernehmen, wie Navigation, Fußzeilen, SEO-Meta-Tags, globale Stile und Schriftarten. Du kannst auch Requisiten, die du von deinem Beitrag erhalten hast, an ein anderes Layout weitergeben, genau wie jede andere verschachtelte Komponente.

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

Wirke mit

Community