import ReadMore from '/components/ReadMore.astro'; import Since from '/components/Since.astro';

Seiten sind Dateien, die sich im Unterverzeichnis src/pages/ deines Astro-Projekts befinden. Sie sind verantwortlich für das Routing, das Laden von Daten und das gesamte Seitenlayout für jede HTML-Seite in deiner Website.

Unterstützte Seitendateien

Astro unterstützt die folgenden Dateitypen im Verzeichnis src/pages/:

Dateibasiertes Routing

Astro nutzt eine Routing-Strategie, die dateibasiertes Routing genannt wird. Jede Datei in deinem src/pages/-Verzeichnis wird anhand ihres Dateipfads zu einem Endpunkt auf deiner Website.

Mit dynamischen Routing kann eine einzelne Datei auch mehrere Seiten erzeugen. So kannst du auch dann Seiten erstellen, wenn sich deine Inhalte außerhalb des speziellen /pages/-Verzeichnisses befinden, z. B. in einer Inhaltssammlung oder einem CMS.

Lies mehr über Routing in Astro.

Link zwischen Seiten

Schreibe Standard-HTML <a>-Elemente in deine Astro-Seiten, um Links zu anderen Seiten auf deiner Website zu erstellen. Verwende einen URL-Pfad relativ zu deiner Root-Domain als Link, nicht einen relativen Dateipfad.

Um zum Beispiel von einer beliebigen Seite auf example.com auf https://example.com/authors/sonali/ zu verlinken:

astro
Lies mehr <a href="/authors/sonali/">über Sonali</a>.

Astro-Seiten

Astro-Seiten verwenden die Dateierweiterung .astro und unterstützen die gleichen Funktionen wie Astro-Komponenten.

astro
------<html lang="de">  <head>    <title>Meine Homepage</title>  </head>  <body>    <h1>Willkommen auf meiner Website!</h1>  </body></html>

Eine Seite muss ein vollständiges HTML-Dokument erzeugen. Wenn nicht explizit angegeben, fügt Astro die notwendige <!DOCTYPE html>-Deklaration und den <head>-Inhalt zu jeder .astro-Komponente, die sich innerhalb von src/pages/ befindet, hinzu. Du kannst dieses Verhalten für jede einzelne Komponente deaktivieren, indem du sie als partielle Seite markierst.

Um zu vermeiden, dass sich dieselben HTML-Elemente auf jeder Seite wiederholen, kannst du gemeinsame <head>- und <body>-Elemente in ihre eigenen Layout-Komponenten verschieben. Du kannst so viele oder so wenige Layout-Komponenten verwenden, wie du möchtest.

astro
---// src/pages/index.astroimport MeinLayout from '../layouts/MeinLayout.astro';---<MeinLayout>  <p>Mein Seiteninhalt, umgeben von einem Layout!</p></MeinLayout>

Lies mehr über Layout-Komponenten in Astro.

Markdown/MDX-Seiten

Astro behandelt auch alle Markdown-Dateien (.md) innerhalb von /src/pages/ als Seiten in deiner finalen Website. Wenn du die MDX-Integration installiert hast, werden MDX-Dateien (.mdx) ebenfalls so behandelt.

:::tip Ziehe in Erwägung, Inhaltssammlungen anstelle von Seiten für Verzeichnisse verwandter Markdown-Dateien zu erstellen, die eine ähnliche Struktur haben, wie z. B. Blogbeiträge oder Produktartikel. :::

Markdown-Dateien können die spezielle Frontmatter-Eigenschaft layout verwenden, um eine Layout-Komponente zu spezifizieren, welche den Markdown-Inhalt in ein vollständiges <html>...</html>-Dokument einbettet.

md
---# Beispiel: src/pages/page.mdlayout: '../layouts/MeinLayout.astro'title: 'Meine Markdown-Seite'---# TitelDas hier ist meine Seite, geschrieben in **Markdown.**

Lies mehr über Markdown in Astro.

HTML-Seiten

Dateien mit der Dateierweiterung .html können im Verzeichnis src/pages/ abgelegt und direkt als Seiten auf deiner Website verwendet werden. Beachte, dass einige wichtige Astro-Funktionen in HTML-Komponenten nicht unterstützt werden.

Benutzerdefinierte 404-Fehlerseite

Für eine benutzerdefinierte 404-Fehlerseite kannst du eine Datei namens 404.astro oder 404.md in src/pages erstellen.

Aus dieser wird die Seite 404.html erstellt. Die meisten Hosting-Anbieter werden sie finden und verwenden.

Benutzerdefinierte 500-Fehlerseite

Um eine benutzerdefinierte 500-Fehlerseite für Seiten anzuzeigen, die bei Bedarf gerendert wird, erstelle die Datei src/pages/500.astro. Diese benutzerdefinierte Seite ist nicht für vorgerenderte Seiten verfügbar und kann nicht vorgerendert werden.

Wenn beim Rendern dieser Seite ein Fehler auftritt, wird deinem Besucher die standardmäßige 500-Fehlerseite deines Hosts angezeigt.

Wenn du während der Entwicklung eine 500.astro-Datei hast, wird der Fehler, der zur Laufzeit auftritt, in deinem Terminal protokolliert und nicht im Fehler-Overlay angezeigt.

error

Die Seite src/pages/500.astro ist eine spezielle Seite, die bei jedem Fehler, der während des Renderings auftritt, automatisch eine error-Eigenschaft erhält. So kannst du die Details eines Fehlers (z. B. von einer Seite, von der Middleware usw.) verwenden, um deinem Besucher Informationen anzuzeigen.

Der Datentyp der Fehler-Eigenschaft kann beliebig sein, was sich darauf auswirken kann, wie du den Wert in deinem Code einträgst oder verwendest:

astro
---interface Props {    error: unknown}const { error } = Astro.props---<div>{error instanceof Error ? error.message : 'Unbekannter Fehler'}</div>

Um zu vermeiden, dass sensible Informationen beim Anzeigen von Inhalten aus der Eigenschaft error durchsickern, solltest du zuerst den Fehler auswerten und dann den entsprechenden Inhalt basierend auf dem Fehler zurückgeben. Du solltest zum Beispiel vermeiden, die gesamte Ursprungsverfolgung des Fehlers anzuzeigen, da sie Informationen darüber enthält, wie dein Code auf dem Server strukturiert ist.

Partielle Seiten

:::caution Partielle Seiten sind für die Verwendung in Verbindung mit einer Front-End-Bibliothek wie htmx oder Unpoly gedacht. Du kannst sie auch verwenden, wenn du mit dem Schreiben von Low-Level-JavaScript im Frontend vertraut bist. Aus diesem Grund sind sie ein fortgeschrittenes Feature.

Außerdem sollten partielle Seiten nicht verwendet werden, wenn die Komponente Scoped Styles (auf Komponenten begrenzte lokale CSS-Stile) oder Skripte enthält, da diese Elemente aus der HTML-Ausgabe entfernt werden. Wenn du Scoped Styles brauchst, ist es besser, reguläre, nicht-partielle Seiten zusammen mit einer Frontend-Bibliothek zu verwenden, die weiß, wie man den Inhalt in den Head einfügt. :::

Partielle Seiten sind Seitenkomponenten, die sich in src/pages/ befinden und nicht als vollständige Seiten dargestellt werden sollen.

Wie Komponenten, die sich außerhalb dieses Ordners befinden, enthalten diese Dateien nicht automatisch die <!DOCTYPE html>-Deklaration und auch keinen <head>-Inhalt, wie z. B. skalierte Stile und Skripte.

Da sie sich jedoch in dem speziellen Verzeichnis src/pages/ befinden, ist das erzeugte HTML unter einer URL verfügbar, die dem Dateipfad entspricht. So kann eine Rendering-Bibliothek (z. B. htmx, Stimulus, jQuery) auf dem Client darauf zugreifen und HTML-Abschnitte dynamisch auf eine Seite laden, ohne dass der Browser aktualisiert werden muss oder eine Seitennavigation erforderlich ist.

Partielle Seiten bieten in Kombination mit einer Rendering-Bibliothek eine Alternative zu Astro-Inseln und <script>-Tags, um dynamische Inhalte in Astro zu erstellen.

Seitendateien, die einen Wert für partial exportieren können (z.B. .astro und .mdx, aber nicht .md), können als partielle Dateien markiert werden.

astro
---export const partial = true;---<li>Ich bin partiell!</li>

Verwendung mit einer Bibliothek

Partielle Seiten werden verwendet, um einen Abschnitt einer Seite mit einer Bibliothek wie htmx dynamisch zu aktualisieren. Das folgende Beispiel zeigt ein hx-post-Attribut, das auf die URL einer partiellen Seite gesetzt ist. Der Inhalt der partiellen Seite wird verwendet, um das gewünschte HTML-Element auf dieser Seite zu aktualisieren.

astro
<html>  <head>    <title>Meine Seite</title>    <script src="https://unpkg.com/htmx.org@1.9.6"      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"      crossorigin="anonymous"></script>  </head></html><section>  <div id="parent-div">Ziel hierher</div>    <button hx-post="/partials/clicked/"    hx-trigger="click"    hx-target="#parent-div"    hx-swap="innerHTML"  >      Klick mich!  </button></section>

Die .astro-partielle Seite muss unter dem entsprechenden Dateipfad existieren und einen Export enthalten, der die Seite als partielle Seite definiert:

astro
---export const partial = true;---<div>Ich wurde angeklickt!</div>

In der htmx-Dokumentation findest du weitere Details zur Verwendung von htmx.

Astro-Komponenten
Projektstruktur