Zum Inhalt springen

Seiten

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

Astro nutzt eine Routing-Strategie, die dateibasiertes Routing genannt wird. Jede .astro-Datei im src/pages-Verzeichnis wird basierend auf ihrem Dateipfad zu einer Seite oder zu einem Endpunkt auf deiner Website.

Du kannst standardmäßige <a>-HTML-Elemente in deiner Komponentenvorlage verwenden, um Seiten untereinander zu verlinken.

📚 Lies mehr über Routing in Astro.

Astro-Seiten müssen eine vollständige <html>...</html>-Seitenantwort zurückgeben, einschließlich <head> und <body>. (<!doctype html> ist optional und wird automatisch hinzugefügt.)

src/pages/index.astro
<html>
<head>
<title>Meine Homepage</title>
</head>
<body>
<h1>Willkommen auf meiner Website!</h1>
</body>
</html>

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.

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

📚 Lies mehr über Layout-Komponenten in Astro.

Astro behandelt auch alle Markdown-Dateien (.md) innerhalb von /src/pages/ als Seiten in deiner finalen Website. Diese werden üblicherweise für textlastige Seiten wie Blogbeiträge und Dokumentationen verwendet.

Seitenlayouts sind besonders nützlich für Markdown-Dateien. 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.

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

📚 Lies mehr über Markdown in Astro.

Nicht-HTML-Seiten, z. B. .json, .xml oder sogar Bilder, können über API-Routen erstellt werden, die gemeinhin als Dateirouten bezeichnet werden.

Dateirouten sind Skriptdateien, die mit der Erweiterung .js oder .ts enden und sich im Verzeichnis src/pages/ befinden.

Erstellte Dateinamen und Erweiterungen basieren auf den Namen der Quelldateien. Die Datei src/pages/data.json.ts wird z. B. so erstellt, dass sie der /data.json-Route in deinem endgültigen Build entspricht.

Bei SSR (server-side rendering) spielt die Erweiterung keine Rolle und kann weggelassen werden, da zum Zeitpunkt der Erstellung keine Dateien erzeugt werden. Stattdessen erzeugt Astro eine einzige Serverdatei.

src/pages/builtwith.json.ts
// Ausgabe: /builtwith.json
// Dateirouten exportieren eine get()-Funktion, die aufgerufen wird, um die Datei zu erzeugen.
// Gib ein Objekt mit `body` zurück, um den Inhalt der Datei in deinem endgültigen Build zu speichern.
export async function get() {
return {
body: JSON.stringify({
name: 'Astro',
url: 'https://astro.build/',
}),
};
}

API-Routen erhalten ein APIContext-Objekt, das Parameter (params) und eine Anfrage (request) enthält:

src/pages/request-path.json.ts
import type { APIContext } from 'astro';
export async function get({ params, request }: APIContext) {
return {
body: JSON.stringify({
path: new URL(request.url).pathname
})
};
}

Du kannst deine API-Routenfunktionen auch unter Verwendung des Typs APIRoute schreiben. Dadurch erhältst du bessere Fehlermeldungen, wenn deine API-Route den falschen Typ zurückgibt:

src/pages/request-path.json.ts
import type { APIRoute } from 'astro';
export const get: APIRoute = ({ params, request }) => {
return {
body: JSON.stringify({
path: new URL(request.url).pathname
})
};
};

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.