Zum Inhalt springen

Erstelle eine wiederverwendbare Navigationskomponente

Nun, da du denselben HTML-Code auf mehreren Seiten deiner Astro-Website wiederholt hast, ist es an der Zeit, diesen doppelten Inhalt durch eine wiederverwendbare Astro-Komponente zu ersetzen!

Mach dich bereit, …

  • einen neuen Ordner für Komponenten zu erstellen
  • eine Astro-Komponente zu bauen, um deine Navigationslinks anzuzeigen
  • den bestehenden HTML-Code durch eine neue, wiederverwendbare Navigationskomponente zu ersetzen

Erstelle einen neuen src/components/-Ordner

Abschnitt betitelt „Erstelle einen neuen src/components/-Ordner“

Um .astro-Dateien aufzunehmen, die HTML generieren, aber keine neuen Seiten auf deiner Website werden, benötigst du einen neuen Ordner in deinem Projekt: src/components/.

Erstelle eine Navigationskomponente

Abschnitt betitelt „Erstelle eine Navigationskomponente“

  1. Erstelle eine neue Datei: src/components/Navigation.astro.

  2. Kopiere deine Links für die Navigation zwischen den Seiten aus dem oberen Bereich einer beliebigen Seite und füge sie in deine neue Datei Navigation.astro ein:

    src/components/Navigation.astro
    ---
    ---
    <a href="/">Startseite</a>
    <a href="/about/">Über mich</a>
    <a href="/blog/">Blog</a>

Importieren und Verwenden von Navigation.astro

Abschnitt betitelt „Importieren und Verwenden von Navigation.astro“

  1. Gehe zurück zu index.astro und importiere deine neue Komponente innerhalb der Code-Abgrenzung:

    src/pages/index.astro
    import "../styles/global.css";
    

    const pageTitle = "Startseite";
    ---
    import Navigation from '../components/Navigation.astro';
    ---

  2. Ersetze dann darunter die vorhandenen Navigations-HTML-Link-Elemente durch die neu importierte Navigationskomponente:

    src/pages/index.astro
    <a href="/">Startseite</a>
    <a href="/about/">Über mich</a>
    <a href="/blog/">Blog</a>
    <Navigation />

  3. Überprüfe die Vorschau in deinem Browser und stelle fest, dass sie genau gleich aussehen sollte … und das ist genau das, was du erreichen wolltest!

Deine Website enthält nun denselben HTML-Code wie zuvor. Aber jetzt werden diese drei Zeilen Code durch deine <Navigation />-Komponente bereitgestellt.

Probiere es selbst aus - Füge Navigation zum Rest deiner Website hinzu

Abschnitt betitelt „Probiere es selbst aus - Füge Navigation zum Rest deiner Website hinzu“

Importiere die <Navigation />-Komponente und verwende sie auf den anderen beiden Seiten deiner Website (about.astro und blog.astro) mit derselben Methode.

Vergiss nicht,

  • eine Import-Anweisung am Anfang des Komponenten-Skripts, innerhalb der Code-Abgrenzung, hinzuzufügen.
  • den vorhandenen Code durch die Navigationskomponente zu ersetzen.

Teste dein Wissen

Abschnitt betitelt „Teste dein Wissen“

  1. Das kannst du tun, wenn Elemente auf mehreren Seiten wiederholt werden:

  2. Astro-Komponenten sind:

  3. Astro-Komponenten erstellen automatisch eine neue Seite auf deiner Website, wenn du …

Checkliste

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“
Wirke mit Community Sponsor