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

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

  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:

    ---
---
<a href="/">Startseite</a>
<a href="/about/">Über mich</a>
<a href="/blog/">Blog</a>

    :::tipWenn im Frontmatter deiner .astro-Datei nichts steht, musst du auch die Code-Abgrenzung nicht schreiben. Du kannst sie jederzeit wieder hinzufügen, wenn du sie brauchst.:::

Importieren und Verwenden von Navigation.astro

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

    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:

    <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

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.

:::noteWenn du deinen Code umstrukturierst, aber das Aussehen deiner Seite im Browser nicht veränderst, refaktorisierst du. In dieser Lektion wirst du mehrmals refaktorisieren, indem du Teile deines Seiten-HTMLs durch Komponenten ersetzt.

Das ermöglicht es dir, schnell mit beliebigem funktionierenden Code zu beginnen, der oft in deinem Projekt dupliziert wird. Dann kannst du das Design deines bestehenden Codes schrittweise verbessern, ohne das äußere Erscheinungsbild deiner Website zu verändern.:::

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

Ressourcen

Wirke mit Community Sponsor