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

Abschnitt betitelt „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.

    src/layouts/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

Abschnitt betitelt „Verwende dein Layout auf einer Seite“

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

    src/pages/index.astro
    ---
    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!

    src/layouts/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>
        <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

Abschnitt betitelt „Übergib seitenspezifische Werte als Props“

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

    src/pages/index.astro
    ---
    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.

    src/layouts/BaseLayout.astro
    ---
    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

Abschnitt betitelt „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

Teste dein Wissen

Abschnitt betitelt „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

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“
Wirke mit Community Sponsor