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, …

  • Erstelle einen neuen Ordner für Komponenten
  • Baue eine Astro-Komponente, um deine Navigationslinks anzuzeigen
  • Ersetze den bestehenden HTML-Code durch eine neue, wiederverwendbare Navigationskomponente

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="/">Home</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 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="/">Home</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.

Test your knowledge

Abschnitt betitelt Test your knowledge

  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