From 9bfa2293001338238ef49177ad96d320c800f96b Mon Sep 17 00:00:00 2001 From: trueberryless Date: Mon, 18 Nov 2024 10:05:44 +0100 Subject: [PATCH 1/2] i18n(de): update project-structure.mdx --- .../docs/de/basics/project-structure.mdx | 96 +++++++++++-------- 1 file changed, 58 insertions(+), 38 deletions(-) diff --git a/src/content/docs/de/basics/project-structure.mdx b/src/content/docs/de/basics/project-structure.mdx index 8ae20f4ceaaf1..568d593678db0 100644 --- a/src/content/docs/de/basics/project-structure.mdx +++ b/src/content/docs/de/basics/project-structure.mdx @@ -1,8 +1,11 @@ --- title: Projektstruktur -description: 'Erfahre, wie du ein Projekt mit Astro strukturierst.' +description: Erfahre, wie du ein Projekt mit Astro strukturierst. +i18nReady: true --- +import { FileTree } from '@astrojs/starlight/components'; + Dein neues Astro-Projekt, welches vom CLI-Assistenten `create-astro` erstellt wurde, enthält bereits einige Dateien und Verzeichnisse. Alle weiteren Inhalte erstellst du selbst und fügst sie zur bestehenden Verzeichnisstruktur von Astro hinzu. Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und welche Dateien du in deinem neuen Projekt vorfindest. @@ -11,7 +14,7 @@ Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und wel Astro nutzt einige fest vorgegebene Verzeichnisse, um dein Projekt zu strukturieren. Das Stammverzeichnis jedes Astro-Projekts sollte die folgenden Verzeichnisse und Dateien enthalten: -- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile usw.) +- `src/*` - Der Quellcode deines Projekts (Komponenten, Seiten, Stile, usw.) - `public/*` - Nicht zu verarbeitende Inhalte, die kein Quellcode sind (Schriftarten, Symbole usw.) - `package.json` - Die Projektdatei deines Paketmanagers - `astro.config.mjs` - Eine Astro-Konfigurationsdatei (wird empfohlen) @@ -21,30 +24,35 @@ Astro nutzt einige fest vorgegebene Verzeichnisse, um dein Projekt zu strukturie Ein typischer Astro-Verzeichnisbaum könnte so aussehen: -``` -├── src/ -│ ├── components/ -│ │ ├── Header.astro -│ │ └-─ Button.jsx -│ ├── layouts/ -│ │ └-─ PostLayout.astro -│ └── pages/ -│ │ ├── posts/ -│ │ │ ├── post1.md -│ │ │ ├── post2.md -│ │ │ └── post3.md -│ │ └── index.astro -│ └── styles/ -│ └-─ global.css -├── public/ -│ ├── robots.txt -│ ├── favicon.svg -│ └-─ social-image.png -├── astro.config.mjs -├── package.json -└── tsconfig.json - -``` + +- public/ + - robots.txt + - favicon.svg + - social-image.png +- src/ + - components/ + - Header.astro + - Button.jsx + - content/ + - config.ts + - posts/ + - post1.md + - post2.md + - post3.md + - layouts/ + - PostLayout.astro + - pages/ + - posts/ + - [post].astro + - about.astro + - **index.astro** + - rss.xml.js + - styles/ + - global.css +- astro.config.mjs +- package.json +- tsconfig.json + ### `src/` @@ -59,27 +67,35 @@ Im `src/`-Verzeichnis befindet sich der Großteil deines Projektquellcodes. Dies Astro verarbeitet, optimiert und bündelt deine Dateien in `src/`, um die endgültige Website zu erstellen, die an den Browser gesendet wird. Im Gegensatz zum statischen `public/`-Verzeichnis werden deine `src/`-Dateien von Astro für dich verarbeitet und optimiert: -Einige Dateien (z.B. Astro-Komponenten) werden gar nicht so an den Browser gesendet, wie du sie geschrieben hast, sondern stattdessen in statisches HTML gerendert. Andere Dateien (z.B. CSS) werden zwar an den Browser gesendet, können aber zur Leistungsverbesserung vorher optimiert und mit anderen CSS-Dateien gebündelt werden. +Einige Dateien (z.B. Astro-Komponenten) werden gar nicht so an den Browser gesendet, wie du sie geschrieben hast, sondern stattdessen in statisches HTML gerendert. Andere Dateien (z.B. CSS) werden zwar an den Browser gesendet, können aber zur Leistungsverbesserung vorher optimiert oder mit anderen CSS-Dateien gebündelt werden. + +:::tip +Dieser Leitfaden beschreibt zwar einige gängige Konventionen, die in der Astro-Community verwendet werden, aber die einzigen Verzeichnisse, die von Astro reserviert sind, sind `src/pages/` und `src/content/`. Es steht dir frei, alle anderen Verzeichnisse so umzubenennen und umzugestalten, wie es für dich am besten ist. +::: + +### `src/pages` + +Seitenrouten werden für deine Website erstellt, indem du [unterstützte Dateitypen](/de/basics/astro-pages/#unterstützte-seitendateien) zu diesem Verzeichnis hinzufügst. + +:::caution +`src/pages` ist ein **erforderliches** Unterverzeichnis deines Astro-Projekts. Fehlt es, hat deine Website keine Seiten oder Routen! +::: ### `src/components` -**Komponenten** sind wiederverwendbare Quellcode-Einheiten, die du beliebig oft auf deinen Seiten einsetzen kannst. Du kannst sowohl [Astro-Komponenten](/de/basics/astro-components/) als auch [UI-Framework-Komponenten](/de/guides/framework-components/) aus Frameworks wie React oder Vue verwenden. Es ist üblich, alle Komponenten eines Projekts in diesem Ordner zu gruppieren und zu organisieren. +**Komponenten** sind wiederverwendbare Code-Einheiten für deine HTML-Seiten. Das können [Astro-Komponenten](/de/basics/astro-components/) oder [UI-Framework-Komponenten](/de/guides/framework-components/) wie React oder Vue sein. Es ist üblich, dass du alle Komponenten deines Projekts in diesem Ordner zusammenfasst und organisierst. Diese Vorgehensweise ist in Astro-Projekten üblich, aber nicht zwingend erforderlich. Du kannst deine Komponenten gerne auch anders organisieren! -### `src/layouts` - -[Layouts](/de/basics/layouts/) sind spezielle Komponenten, die deine Inhalte in ein übergeordnetes Seitenlayout einbinden. Sie werden meistens verwendet, um das umgebende Layout von [Astro-Seiten](/de/basics/astro-pages/) und [Markdown- oder MDX-Seiten](/de/guides/markdown-content/) festzulegen. +### `src/content` -Genau wie bei `src/components` ist die Nutzung dieses Verzeichnisses in Astro-Projekten üblich, aber nicht zwingend erforderlich. +Das Verzeichnis `src/content/` ist für die Speicherung von [Inhaltssammlungen](/de/guides/content-collections/) und einer Konfigurationsdatei reserviert. Andere Dateien sind in diesem Verzeichnis nicht erlaubt. -### `src/pages` +### `src/layouts` -[Seiten](/de/basics/astro-pages/) sind spezielle Komponenten, die verwendet werden, um neue Seiten auf deiner Website zu erstellen. Es kann sich dabei um eine Astro-Komponente oder eine Markdown-Datei handeln, die den Inhalt einer Seite auf deiner Website repräsentiert. +[Layouts](/de/basics/layouts/) sind Astro-Komponenten, welche die UI-Struktur definieren, die von einer oder mehreren [Seiten](/de/basics/astro-pages/) gemeinsam genutzt wird. -:::caution -`src/pages` ist ein **erforderliches** Unterverzeichnis deines Astro-Projekts. Fehlt es, hat deine Website keine Seiten oder Routen! -::: +Genau wie bei `src/components` ist die Nutzung dieses Verzeichnisses in Astro-Projekten üblich, aber nicht zwingend erforderlich. ### `src/styles` @@ -109,7 +125,11 @@ Eine Anleitung zur Erstellung einer neuen `package.json`-Datei für dein Projekt Diese Datei wird von jeder Starter-Vorlage generiert und enthält Konfigurations­optionen für dein Astro-Projekt. Hier kannst du die zu verwendenden Integrationen, Build-Optionen, Serveroptionen und mehr angeben. -Weiterführende Informationen zu den Einstellungen findest du in der [Anleitung zur Konfiguration von Astro](/de/guides/configuring-astro/). +Astro unterstützt mehrere Dateiformate für seine JavaScript-Konfigurationsdatei: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` und `astro.config.ts`. Wir empfehlen, in den meisten Fällen `.mjs` oder `.ts` zu verwenden, wenn du TypeScript in deiner Konfigurationsdatei schreiben willst. + +Das Laden von TypeScript-Konfigurationsdateien wird mit [`tsm`](https://github.com/lukeed/tsm) gehandhabt und berücksichtigt die `tsconfig`-Optionen deines Projekts. + +In der [Astro-Konfigurationsanleitung](/de/guides/configuring-astro/) findest du weitere Informationen zum Einstellen der Konfigurationen. ### `tsconfig.json` From 42b63ae91282fcebd76d07bdd849117aa397a868 Mon Sep 17 00:00:00 2001 From: trueberryless Date: Mon, 18 Nov 2024 10:17:58 +0100 Subject: [PATCH 2/2] add missing changes --- src/content/docs/de/basics/project-structure.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/de/basics/project-structure.mdx b/src/content/docs/de/basics/project-structure.mdx index 568d593678db0..a00b0dfb51a2e 100644 --- a/src/content/docs/de/basics/project-structure.mdx +++ b/src/content/docs/de/basics/project-structure.mdx @@ -6,7 +6,7 @@ i18nReady: true import { FileTree } from '@astrojs/starlight/components'; -Dein neues Astro-Projekt, welches vom CLI-Assistenten `create-astro` erstellt wurde, enthält bereits einige Dateien und Verzeichnisse. Alle weiteren Inhalte erstellst du selbst und fügst sie zur bestehenden Verzeichnisstruktur von Astro hinzu. +Dein neues Astro-Projekt, welches vom CLI-Assistenten `create astro` erstellt wurde, enthält bereits einige Dateien und Verzeichnisse. Alle weiteren Inhalte erstellst du selbst und fügst sie zur bestehenden Verzeichnisstruktur von Astro hinzu. Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und welche Dateien du in deinem neuen Projekt vorfindest. @@ -103,7 +103,7 @@ Es ist eine übliche Vorgehensweise, deine CSS- oder Sass-Stile im Verzeichnis ` ### `public/` -Das Verzeichnis `public/` ist für Dateien und Inhalte vorgesehen, die Astro während des Buildvorgangs nicht verarbeiten muss. Diese Dateien werden während des Buildvorgangs unverändert in das Ausgabeverzeichnis kopiert. +Das Verzeichnis `public/` ist für Dateien und Inhalte vorgesehen, die Astro während des Buildvorgangs nicht verarbeiten muss. Die Dateien in diesem Ordner werden unverändert in den Build-Ordner kopiert, und dann wird deine Website gebaut. Dieses Verhalten macht `public/` ideal für verbreitete Inhalte wie Bilder und Schriftarten, sowie für besondere Dateien wie `robots.txt` und `manifest.webmanifest`.