Zum Inhalt springen

Erstelle dein erstes Layout

Mach dich bereit, …

  • gemeinsame Elemente in ein Seiten-Layout zu refaktorieren (refactor)
  • ein Astro-<slot />-Element zu verwenden, um Seiteninhalte innerhalb eines Layouts zu platzieren
  • seitenspezifische Werte als Props an dein Layout zu übergeben

Du hast noch einige Astro-Komponenten, die auf jeder Seite wiederholt gerendert werden. Es ist Zeit für eine weitere Refaktorierung (Refactoring), um ein gemeinsames Seiten-Layout zu erstellen!

Erstelle deine erste Layout-Komponente

  1. Erstelle eine neue Datei unter src/layouts/BaseLayout.astro. (Du musst vorher einen neuen Ordner layouts anlegen.)

  2. Kopiere den gesamten Inhalt von index.astro in deine neue Datei BaseLayout.astro.

    ---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Startseite";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Verwende dein Layout auf einer Seite

  1. Ersetze den Code in src/pages/index.astro durch Folgendes:

    ---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Startseite";
---
<BaseLayout>
  <h2>Mein großartiger Blog-Untertitel</h2>
</BaseLayout>

  2. Prüfe die Vorschau im Browser erneut, um zu sehen, was sich geändert hat (Spoiler: vielleicht nicht viel).

  3. Füge ein <slot />-Element in src/layouts/BaseLayout.astro direkt oberhalb des Footer-Elements hinzu, und prüfe dann die Vorschau deiner Startseite, um zu sehen, was sich diesmal tatsächlich geändert hat!

    ---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Startseite";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Das <slot />-Element ermöglicht es, Kindelemente einzufügen (oder „einzuschieben“), die zwischen den öffnenden und schließenden <Component></Component>-Tags in jede Component.astro-Datei geschrieben werden.

Übergib seitenspezifische Werte als Props

  1. Übergib den Seitentitel von index.astro an dein Layout über ein Komponenten-Attribut:

    ---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Startseite";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>Mein großartiger Blog-Untertitel</h2>
</BaseLayout>

  2. Passe das Skript deiner BaseLayout.astro-Komponente an, sodass es den Seitentitel über Astro.props erhält, anstatt ihn als Konstante zu definieren.

    ---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Startseite";
const { pageTitle } = Astro.props;
---

  3. Prüfe die Browser-Vorschau, um sicherzustellen, dass sich der Seitentitel nicht verändert hat. Er wird nun dynamisch gerendert, und jede einzelne Seite kann jetzt ihren eigenen Titel an das Layout übergeben.

Probiere es selbst – Verwende dein Layout überall

Refaktoriere deine anderen Seiten (blog.astro und about.astro), sodass sie dein neues <BaseLayout>-Element verwenden, um die gemeinsamen Seitenelemente zu rendern.

Denk daran:

  • Übergib einen Seitentitel als Prop über ein Komponenten-Attribut.

  • Lass das Layout für das HTML-Rendering aller gemeinsamen Elemente verantwortlich sein.

  • Verschiebe vorhandene <style>-Tags aus dem <head> der Seite in die Seiten-HTML-Vorlage, wenn du diese Styles behalten möchtest.

  • Lösche alles von jeder einzelnen Seite, was nun vom Layout übernommen wird, einschließlich:

    • HTML-Elemente
    • Komponenten und deren Imports
    • CSS-Regeln in einem <style>-Tag (z. B. <h1> auf der Über mich-Seite)
    • <script>-Tags

:::note[Behalte deine „Über mich“-Seite-Styles]Wenn du <BaseLayout> für deine about.astro-Seite verwendest, verlierst du das <style>-Tag, das zuvor im <head> dieser Seite war. Um weiterhin nur auf Seitenebene mit Astro-Scoped-Styles zu stylen, verschiebe das <style>-Tag in den Body der Seiten-Komponente. So kannst du Elemente, die in dieser Seiten-Komponente erstellt wurden, weiter stylen (z. B. deine Liste von Skills).

Da dein <h1> jetzt vom Layout erstellt wird, kannst du das Attribut is:global zu deinem Style-Tag hinzufügen, um jedes Element auf dieser Seite zu beeinflussen, einschließlich derjenigen, die von anderen Komponenten erstellte werden: <style is:global define:vars={{ skillColor, fontWeight, textCase }}>:::

Teste dein Wissen

  1. Eine Astro-Komponente (.astro-Datei) kann fungieren als:

  2. Um einen Seitentitel auf der Seite anzuzeigen, kannst du:

  3. Informationen können von einer Komponente zur anderen übergeben werden durch:

Checkliste

Ressourcen

Wirke mit Community Sponsor