-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
i18n(de): update
basics/astro-pages.mdx (#9759)
* update translation #1442 * update translation #1434 * update translation #1510 * update translation #1538 * Update src/content/docs/de/basics/astro-pages.mdx * Update src/content/docs/de/basics/astro-pages.mdx * Update src/content/docs/de/basics/astro-pages.mdx * Update src/content/docs/de/basics/astro-pages.mdx * Update src/content/docs/de/basics/astro-pages.mdx * update translation #1638 * update translation #2091 * update translation #2133 * update translation #2409 * update translation #2371 * update translation #4610 * update translation #5128 * update translation #5205 * update translation #5240 * update translation #5364 * update translation #5765 * update translation #6267 * remove paragraph where I cant find when it was deleted in original version * update translation #6620 * update translation #8495 * update translation #8573 * update translation #9336 * update translation #9336 2/2 didnt save file locally, so git didnt add * fix all visual differences by comparing manually against original english version * fix broken links in `astro-pages.mdx` * Breaking changes to other files! fixing links which link to the �stro-pages.mdx file * but now... * Update src/content/docs/de/basics/astro-pages.mdx Co-authored-by: Max <[email protected]> * Update src/content/docs/de/basics/astro-pages.mdx Co-authored-by: Max <[email protected]> * Update src/content/docs/de/basics/astro-pages.mdx Co-authored-by: Max <[email protected]> * revert Update markdown-content.mdx @lunaria-track:src/content/docs/de/basics/astro-pages.mdx --------- Co-authored-by: Max <[email protected]> Co-authored-by: Yan <[email protected]>
- Loading branch information
3 people
authored
Nov 4, 2024
1 parent
e96af58
commit c478fe4
Showing
2 changed files
with
139 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,25 +3,47 @@ title: Seiten | |
| description: Eine Einführung in die Astro-Seiten | ||
| --- | ||
|
|
||
| **Seiten** sind ein spezieller Typ von [Astro-Komponenten](/de/basics/astro-components/), 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. | ||
| import ReadMore from '~/components/ReadMore.astro'; | ||
| import Since from '~/components/Since.astro'; | ||
|
|
||
| ### Dateibasiertes Routing | ||
| **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. | ||
|
|
||
| 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. | ||
| ## Unterstützte Seitendateien | ||
|
|
||
| Du kannst standardmäßige [`<a>`-HTML-Elemente](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) in deiner Komponentenvorlage verwenden, um Seiten untereinander zu verlinken. | ||
| Astro unterstützt die folgenden Dateitypen im Verzeichnis `src/pages/`: | ||
|
|
||
| 📚 Lies mehr über [Routing in Astro](/de/guides/routing/). | ||
| - [`.astro`](#astro-seiten) | ||
| - [`.md`](#markdownmdx-seiten) | ||
| - `.mdx` (mit der [MDX-Integration installiert](/de/guides/integrations-guide/mdx/#installation)) | ||
| - [`.html`](#html-seiten) | ||
| - `.js`/`.ts` (als [Endpunkte](/de/guides/endpoints/)) | ||
|
|
||
| ### Seiten-HTML | ||
| ## Dateibasiertes Routing | ||
|
|
||
| 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.) | ||
| 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. | ||
|
|
||
| ```astro | ||
| Mit [dynamischen Routing](/de/guides/routing/#dynamische-routen) 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](/de/guides/content-collections/) oder einem [CMS](/de/guides/cms/). | ||
|
|
||
| <ReadMore>Lies mehr über [Routing in Astro](/de/guides/routing/).</ReadMore> | ||
|
|
||
| ### Link zwischen Seiten | ||
|
|
||
| Schreibe Standard-HTML [`<a>`-Elemente](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) 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 title="src/pages/index.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](/de/basics/astro-components/). | ||
|
|
||
| ```astro title="src/pages/index.astro" | ||
| --- | ||
| // Beispiel: src/pages/index.astro | ||
| --- | ||
| <html> | ||
| <html lang="de"> | ||
| <head> | ||
| <title>Meine Homepage</title> | ||
| </head> | ||
|
|
@@ -31,28 +53,31 @@ Astro-Seiten müssen eine vollständige `<html>...</html>`-Seitenantwort zurück | |
| </html> | ||
| ``` | ||
|
|
||
| ### Nutzung von Seitenlayouts | ||
| 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](#partielle-seiten) 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](/de/basics/layouts/) verschieben. Du kannst so viele oder so wenige Layout-Komponenten verwenden, wie du möchtest. | ||
|
|
||
| ```astro {3} /</?MeinLayout>/ | ||
| --- | ||
| // Beispiel: src/pages/index.astro | ||
| // 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](/de/basics/layouts/) in Astro. | ||
| <ReadMore>Lies mehr über [Layout-Komponenten](/de/basics/layouts/) in Astro.</ReadMore> | ||
|
|
||
| ## Markdown/MDX-Seiten | ||
|
|
||
| ## Markdown-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](/de/guides/integrations-guide/mdx/#installation), werden MDX-Dateien (`.mdx`) ebenfalls so behandelt. | ||
|
|
||
| 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. | ||
| :::tip | ||
| Ziehe in Erwägung, [Inhaltssammlungen](/de/guides/content-collections/) anstelle von Seiten für Verzeichnisse verwandter Markdown-Dateien zu erstellen, die eine ähnliche Struktur haben, wie z. B. Blogbeiträge oder Produktartikel. | ||
| ::: | ||
|
|
||
| Seitenlayouts sind besonders nützlich für [Markdown-Dateien](#markdown-seiten). Markdown-Dateien können die spezielle Frontmatter-Eigenschaft `layout` verwenden, um eine [Layout-Komponente](/de/basics/layouts/) zu spezifizieren, welche den Markdown-Inhalt in ein vollständiges `<html>...</html>`-Dokument einbettet. | ||
| Markdown-Dateien können die spezielle Frontmatter-Eigenschaft `layout` verwenden, um eine [Layout-Komponente](/de/basics/layouts/) zu spezifizieren, welche den Markdown-Inhalt in ein vollständiges `<html>...</html>`-Dokument einbettet. | ||
|
|
||
| ```md {3} | ||
| --- | ||
|
|
@@ -65,66 +90,121 @@ title: 'Meine Markdown-Seite' | |
| Das hier ist meine Seite, geschrieben in **Markdown.** | ||
| ``` | ||
|
|
||
| 📚 Lies mehr über [Markdown](/de/guides/markdown-content/) in Astro. | ||
| <ReadMore>Lies mehr über [Markdown](/de/guides/markdown-content/) in Astro.</ReadMore> | ||
|
|
||
| ## HTML-Seiten | ||
|
|
||
| ## Nicht-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](/de/basics/astro-components/#html-komponenten) nicht unterstützt werden. | ||
|
|
||
| Nicht-HTML-Seiten, z. B. `.json`, `.xml` oder sogar Bilder, können über API-Routen erstellt werden, die gemeinhin als **Dateirouten** bezeichnet werden. | ||
| ## Benutzerdefinierte 404-Fehlerseite | ||
|
|
||
| **Dateirouten** sind Skriptdateien, die mit der Erweiterung `.js` oder `.ts` enden und sich im Verzeichnis `src/pages/` befinden. | ||
| Für eine benutzerdefinierte 404-Fehlerseite kannst du eine Datei namens `404.astro` oder `404.md` in `src/pages` erstellen. | ||
|
|
||
| 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. | ||
| Aus dieser wird die Seite `404.html` erstellt. Die meisten [Hosting-Anbieter](/de/guides/deploy/) werden sie finden und verwenden. | ||
|
|
||
| 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. | ||
| ## Benutzerdefinierte 500-Fehlerseite | ||
|
|
||
| ```js | ||
| // Beispiel: src/pages/builtwith.json.ts | ||
| // Ausgabe: /builtwith.json | ||
| {/* TODO Link muss auf #enable-on-demand-server-rendering zeigen (outdated deutsche Übersetzung -> gibts noch nicht) */} | ||
|
|
||
| // 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/', | ||
| }), | ||
| }; | ||
| } | ||
| ``` | ||
| Um eine benutzerdefinierte 500-Fehlerseite für Seiten anzuzeigen, die [bei Bedarf gerendert](/de/guides/server-side-rendering/) 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. | ||
|
|
||
| <p><Since v="4.10.3" /></p> | ||
|
|
||
| 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` | ||
|
|
||
| <p><Since v="4.11.0" /></p> | ||
|
|
||
| API-Routen erhalten ein `APIContext`-Objekt, das [Parameter (params)](/de/reference/api-reference/#params) und eine [Anfrage (request)](https://developer.mozilla.org/en-US/docs/Web/API/Request) enthält: | ||
| 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. | ||
|
|
||
| ```ts title="src/pages/request-path.json.ts" | ||
| import type { APIContext } from 'astro'; | ||
| Der Datentyp der Fehler-Eigenschaft kann beliebig sein, was sich darauf auswirken kann, wie du den Wert in deinem Code einträgst oder verwendest: | ||
|
|
||
| export async function get({ params, request }: APIContext) { | ||
| return { | ||
| body: JSON.stringify({ | ||
| path: new URL(request.url).pathname | ||
| }) | ||
| }; | ||
| ```astro title="src/pages/500.astro" | ||
| --- | ||
| interface Props { | ||
| error: unknown | ||
| } | ||
| const { error } = Astro.props | ||
| --- | ||
| <div>{error instanceof Error ? error.message : 'Unbekannter Fehler'}</div> | ||
| ``` | ||
|
|
||
| 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: | ||
| 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 | ||
|
|
||
| <p><Since v="3.4.0" /></p> | ||
|
|
||
| ```ts title="src/pages/request-path.json.ts" | ||
| import type { APIRoute } from 'astro'; | ||
| :::caution | ||
| Partielle Seiten sind für die Verwendung in Verbindung mit einer Front-End-Bibliothek wie [htmx](https://htmx.org/) oder [Unpoly](https://unpoly.com/) 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. | ||
|
|
||
| export const get: APIRoute = ({ params, request }) => { | ||
| return { | ||
| body: JSON.stringify({ | ||
| path: new URL(request.url).pathname | ||
| }) | ||
| }; | ||
| }; | ||
| 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](/de/concepts/islands/) und [`<script>`-Tags](/de/guides/client-side-scripts/), um dynamische Inhalte in Astro zu erstellen. | ||
|
|
||
| Seitendateien, die einen Wert exportieren können (z.B. `.astro` , `.mdx`), können als partielle Seiten markiert werden. | ||
|
|
||
| Konfiguriere eine Datei im Verzeichnis `src/pages/` als partielle Seite, indem du den folgenden Export hinzufügst: | ||
|
|
||
| ```astro title="src/pages/partial.astro" ins={2} | ||
| --- | ||
| export const partial = true; | ||
| --- | ||
| <li>Ich bin partiell!</li> | ||
| ``` | ||
|
|
||
| ## Benutzerdefinierte 404-Fehlerseite | ||
| Die `export const partial` muss statisch identifizierbar sein. Sie kann folgende Werte annehmen: | ||
|
|
||
| Für eine benutzerdefinierte 404-Fehlerseite kannst du eine Datei namens `404.astro` oder `404.md` in `/src/pages` erstellen. | ||
| - Den booleschen Wert **`true`**. | ||
| - Eine Umgebungsvariable mit import.meta.env wie `import.meta.env.USE_PARTIALS`. | ||
|
|
||
| Aus dieser wird die Seite `404.html` erstellt. Die meisten [Hosting-Anbieter](/de/guides/deploy/) werden sie finden und verwenden. | ||
| ### Verwendung mit einer Bibliothek | ||
|
|
||
| Partielle Seiten werden verwendet, um einen Abschnitt einer Seite mit einer Bibliothek wie [htmx](https://htmx.org/) 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 title="src/pages/index.astro" 'hx-post="/partials/clicked/"' | ||
| <html> | ||
| <head> | ||
| <title>Meine Seite</title> | ||
| <script src="https://unpkg.com/[email protected]" | ||
| 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 title="src/pages/partials/clicked.astro" {2} | ||
| --- | ||
| export const partial = true; | ||
| --- | ||
| <div>Ich wurde angeklickt!</div> | ||
| ``` | ||
|
|
||
| In der [htmx-Dokumentation](https://htmx.org/docs/) findest du weitere Details zur Verwendung von htmx. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters