Skip to content
Astro Workshop

Navigation und Astro API

👉 Slides

Zentral in fast jeder Webanwendung ist die Navigation. In dieser Lektion lernst du, wie du eine Navigation als Astro Component entwickelst und in Astro Pages einbindest. Außerdem lernst du, wie du Astro Pages konfigurierbar machst und wie du die Astro API nutzt.

Die Navigation funktioniert in Astro genauso wie in einer normalen Webanwendung. Wir nutzen Links, um von einer Seite zur anderen zu navigieren.

<a href="/zielpfad">Linktext</a>

Zentrale Navigation mittels Component

Da wir nicht auf jeder Seite die Navigation wiederholen wollen, ist es sinnvoll, die Navigation in einer Component zu kapseln.

Der Inhalt könnte z.b. so aussehen:

<nav>
    <a href="/">Home</a>
    <a href="/programm">Programm</a>
    <a href="/programm/speaker">Speakers</a>
    <a href="/impressum">Impressum</a>
</nav>

Diese Component können wir dann in unseren Astro Pages einbinden. Das sieht dann folgendermaßen aus

---
import Navigation from '../components/Navigation.astro'
---
<Navigation />

Dynamische Navigation

Die Navigation Component immer manuell zu pflegen ist auf Dauer nicht praktikabel und fehleranfällig. Daher ist es sinnvoll, die Navigation dynamisch zu generieren.

Eine Möglichkeit ist die Astro API nutzen, um die Navigationseinträge aus den Astro Pages automatisch zu generieren. Die Funktion die uns dies ermöglicht, ist Astro.glob().

---
import type { AstroInstance } from "astro";


let allpages = await Astro.glob<AstroInstance & { title: string }>(
    "../pages/**/*.astro",
);
---
<nav>
    {allpages.map(({ url, title }) => {
        if (!url) { url = "/"; } // Home URL
        return <a href={url}>{title}</a>;
    })}
</nav>

Aktuelle Seite hervorheben

Um die aktuelle Seite in der Navigation hervorzuheben, können wir die url der aktuellen Seite aus der Astro API nutzen.

const pathname = new URL(Astro.request.url).pathname;

Dann brauchen wir nur noch diesen Pfad mit dem href der Links zu vergleichen und die aktuelle Seite hervorzuheben.

  {allpages.map(({ url, title }) => {
    if (!url) { url = "/"; } // Home URL
    return (
        <a class={pathname === url ? "active" : ""} href={url}>
            {title}
        </a>
      )
    }
  )}

Schon haben wir eine dynamische Navigation wie sie in fast jeder Webanwendung zu finden ist.