diff --git a/src/content/docs/de/basics/astro-components.mdx b/src/content/docs/de/basics/astro-components.mdx index 3c365da0c07cd..2ffe73df31097 100644 --- a/src/content/docs/de/basics/astro-components.mdx +++ b/src/content/docs/de/basics/astro-components.mdx @@ -18,7 +18,7 @@ Astro-Komponenten sind extrem flexibel. Eine Astro-Komponente kann so klein sein Das Wichtigste, was du über Astro-Komponenten wissen musst, ist, dass sie **nicht auf dem Client gerendert werden**. Sie werden entweder während der Erstellung oder bei Bedarf in HTML gerendert. Du kannst JavaScript-Code in das Frontmatter deiner Komponente einfügen, der dann aus der endgültigen Seite, die an die Browser deiner Nutzer gesendet wird, entfernt wird. Das Ergebnis ist eine schnellere Website, die standardmäßig keinen JavaScript-Fußabdruck hinterlässt. -Wenn deine Astro-Komponente clientseitige Interaktivität benötigt, kannst du [Standard-HTML-` -``` - -Standardmäßig verarbeitet und bündelt Astro ` -``` - -### Skriptverarbeitung - -` -``` - -Das Attribut `type="module"` bewirkt, dass der Browser das Skript als JavaScript-Modul behandelt. Das hat mehrere Leistungsvorteile: - -- Das Rendering wird nicht blockiert. Der Browser fährt mit der Verarbeitung des restlichen HTML fort, während das Modulskript und seine Abhängigkeiten geladen werden. -- Der Browser wartet auf die Verarbeitung von HTML, bevor er die Modulskripte ausführt. Du musst nicht auf das Ereignis `load` warten. -- Die Attribute `async` und `defer` sind unnötig. Modulskripte werden immer aufgeschoben. - -:::note -Das Attribut `async` ist für normale Skripte nützlich, weil es verhindert, dass sie das Rendern blockieren. Modulskripte haben dieses Verhalten jedoch bereits. Wenn du `async` zu einem Modulskript hinzufügst, wird es ausgeführt, bevor die Seite vollständig geladen ist. Das ist wahrscheinlich nicht das, was du willst. -::: - -### Skript-Verarbeitung deaktivieren - -Um zu verhindern, dass Astro ein Skript verarbeitet, füge die Direktive `is:inline` hinzu. - -```astro title="src/components/InlineScript.astro" "is:inline" - -``` - -:::note -Astro wird deine Skript-Tags in manchen Situationen nicht verarbeiten. Insbesondere das Hinzufügen von `type="module"` oder eines anderen Attributs als `src` zu einem ` - - - -``` - -#### Externe Skripte laden - -**Wann sollte man das verwenden:** wenn deine JavaScript-Datei in `public/` oder in einem CDN liegt. - -Um Skripte außerhalb des Ordners `src/` deines Projekts zu laden, füge die Direktive `is:inline` ein. Dieser Ansatz überspringt die Verarbeitung, Bündelung und Optimierung von JavaScript, die Astro beim Import von Skripten wie oben beschrieben vornimmt. - -```astro title="src/components/ExternalScripts.astro" "is:inline" - - - - - -``` - -## Übliche Skript-Pattern - -### `onclick` und andere Ereignisse verarbeiten - -Einige UI-Frameworks verwenden eine eigene Syntax für die Ereignisbehandlung wie `onClick={...}` (React/Preact) oder `@click="..."` (Vue). Astro hält sich enger an den HTML-Standard und verwendet keine eigene Syntax für Ereignisse. - -Stattdessen kannst du [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) in einem ` -``` - -:::note -Wenn du mehrere ``-Komponenten auf einer Seite hast, führt Astro das Skript nicht mehrfach aus. Skripte werden gebündelt und nur einmal pro Seite eingebunden. Die Verwendung von `querySelectorAll` stellt sicher, dass dieses Skript den Event-Listener an jede Schaltfläche mit der Klasse `alert` auf der Seite anhängt. -::: - -### Webkomponenten mit benutzerdefinierten Elementen - -Du kannst deine eigenen HTML-Elemente mit benutzerdefiniertem Verhalten mithilfe des Webkomponenten-Standards erstellen. Wenn du ein [benutzerdefiniertes Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) in einer `.astro`-Komponente definierst, kannst du interaktive Komponenten erstellen, ohne ein UI-Framework zu benötigen. - -In diesem Beispiel definieren wir ein neues `` HTML-Element, das aufzeichnet, wie oft du auf den Herz-Button klickst und das `` mit der Anzahl aktualisiert. - -```astro title="src/components/AstroHeart.astro" - - - × 0 - - - -``` - -Die Verwendung eines benutzerdefinierten Elements hat hier zwei Vorteile: - -1. Anstatt die gesamte Seite mit `document.querySelector()` zu durchsuchen, kannst du `this.querySelector()` verwenden, das nur innerhalb der aktuellen benutzerdefinierten Elementinstanz sucht. Das macht es einfacher, jeweils nur mit den Children einer Komponenteninstanz zu arbeiten. - -2. Obwohl ein ` -``` - -Jetzt können wir unsere Komponente mehrmals verwenden und werden jedes Mal mit einer anderen Nachricht begrüßt. - -```astro title="src/pages/example.astro" ---- -import AstroGreet from '../components/AstroGreet.astro'; ---- - - - - - - - -``` - -:::tip[Wusstest du schon?] -Genau das macht Astro hinter den Kulissen, wenn du Props an eine Komponente übergibst, die mit einem UI-Framework wie React geschrieben wurde! Für Komponenten mit einer `client:*`-Direktive erstellt Astro ein benutzerdefiniertes ``-Element mit einem `props`-Attribut, das deine serverseitigen Props in der HTML-Ausgabe speichert. -::: - -### Kombination von Skripten und UI-Frameworks - -Elemente, die von einem UI-Framework gerendert werden, sind möglicherweise noch nicht verfügbar, wenn ein ` - - - - - - - - - - - - -``` diff --git a/src/content/docs/de/guides/data-fetching.mdx b/src/content/docs/de/guides/data-fetching.mdx index dc467f869826c..cc13075a3f025 100644 --- a/src/content/docs/de/guides/data-fetching.mdx +++ b/src/content/docs/de/guides/data-fetching.mdx @@ -101,7 +101,7 @@ const { film } = json.data; ## Abfragen von einem Headless-CMS -Astro-Komponenten können Daten aus deinem bevorzugten CMS abrufen und sie dann als Seiteninhalt wiedergeben. Mit [dynamischen Routen](/de/guides/routing/#dynamische-routen) können die Komponenten sogar Seiten auf der Grundlage deiner CMS-Inhalte erstellen. +Astro-Komponenten können Daten aus deinem bevorzugten CMS abrufen und sie dann als Seiteninhalt wiedergeben. Mit [dynamischen Routen](/de/guides/routing/#dynamic-routes) können die Komponenten sogar Seiten auf der Grundlage deiner CMS-Inhalte erstellen. In unseren [CMS Guides](/de/guides/cms/) findest du alle Details zur Integration von Astro in Headless CMS wie Storyblok, Contentful und WordPress. diff --git a/src/content/docs/de/guides/deploy/aws.mdx b/src/content/docs/de/guides/deploy/aws.mdx deleted file mode 100644 index 6ba47c2150774..0000000000000 --- a/src/content/docs/de/guides/deploy/aws.mdx +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Veröffentliche deine Astro-Website auf AWS -description: Wie du deine Astro-Website mit AWS im Internet bereitstellst. -sidebar: - label: AWS -type: deploy -i18nReady: true ---- - -import { Steps } from '@astrojs/starlight/components'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; - -[AWS](https://aws.amazon.com/) ist eine umfangreiche Web-App-Hosting-Plattform, die für die Bereitstellung einer Astro-Seite verwendet werden kann. - -Für die Bereitstellung deines Projekts bei AWS musst du die [AWS-Konsole](https://aws.amazon.com/console/) verwenden. (Die meisten dieser Aktionen können auch mit der [AWS CLI](https://aws.amazon.com/cli/) durchgeführt werden). Diese Anleitung führt dich durch die Schritte zur Bereitstellung deiner Website bei AWS mit [AWS Amplify](https://aws.amazon.com/amplify/), [S3 static website hosting](https://aws.amazon.com/s3/) und [CloudFront](https://aws.amazon.com/cloudfront/). - -## AWS Amplify - -AWS Amplify ist eine Reihe von speziell entwickelten Tools und Funktionen, mit denen Frontend-Web- und Mobilentwickler schnell und einfach Full-Stack-Anwendungen auf AWS erstellen können. - - -1. Erstelle ein neues Amplify Hosting Projekt. - -2. Verbinde dein Repository mit Amplify. - -3. Ändere deine Build-Einstellungen, um sie an den Build-Prozess deines Projekts anzupassen. - - - - ```yaml - version: 1 - frontend: - phases: - preBuild: - commands: - - npm i -g pnpm - - pnpm config set store-dir .pnpm-store - - pnpm i - build: - commands: - - pnpm run build - artifacts: - baseDirectory: /dist - files: - - '**/*' - cache: - paths: - - .pnpm-store/**/* - ``` - - - ```yaml - version: 1 - frontend: - phases: - preBuild: - commands: - - npm ci - build: - commands: - - npm run build - artifacts: - baseDirectory: /dist - files: - - '**/*' - cache: - paths: - - node_modules/**/* - ``` - - - ```yaml - version: 1 - frontend: - phases: - preBuild: - commands: - - yarn install - build: - commands: - - yarn build - artifacts: - baseDirectory: /dist - files: - - '**/*' - cache: - paths: - - node_modules/**/* - ``` - - - - -Amplify stellt deine Website automatisch bereit und aktualisiert sie, wenn du einen Commit an dein Repository sendest. - -## Statisches Website-Hosting mit S3 - -S3 ist der Startpunkt jeder Anwendung. Hier werden deine Projektdateien und andere Assets gespeichert. S3 berechnet Gebühren für die Speicherung von Dateien und die Anzahl der Anfragen. Weitere Informationen über S3 findest du in der [AWS-Dokumentation](https://aws.amazon.com/s3/). - - -1. Erstelle einen S3-Bucket mit dem Namen deines Projekts. - - :::tip - Der Bucket-Name sollte weltweit eindeutig sein. Wir empfehlen eine Kombination aus deinem Projektnamen und dem Domainnamen deiner Website. - ::: - -2. Deaktiviere **"Blockieren des gesamten öffentlichen Zugriffs"**. Standardmäßig werden alle Buckets von AWS als privat eingestuft. Um sie öffentlich zu machen, musst du das Kontrollkästchen "Blockieren des gesamten öffentlichen Zugriffs" in den Berechtigungen des Buckets deaktivieren. - -3. Lade deine erstellten Dateien, die sich in `dist` befinden, in S3 hoch. Du kannst dies manuell in der Konsole tun oder die AWS CLI verwenden. Wenn du die AWS CLI verwendest, gibst du nach der [Authentifizierung mit deinen AWS-Anmeldeinformationen](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) folgenden Befehl ein: - - ``` - aws s3 cp dist/ s3:/// --recursive - ``` - -4. Aktualisiere deine Bucket-Richtlinie, um öffentlichen Zugriff zu erlauben. Du findest diese Einstellung unter **Berechtigungen > Bucket-Richtlinie** des Buckets. - - ```json - { - "Version": "2012-10-17", - "Statement": [ - { - "Sid": "PublicReadGetObject", - "Effect": "Allow", - "Principal": "*", - "Action": "s3:GetObject", - "Resource": "arn:aws:s3:::/*" - } - ] - } - ``` - - :::caution - Vergiss nicht, `` durch den Namen deines Buckets zu ersetzen. - ::: - -5. Aktiviere das Website-Hosting für deinen Bucket. Du findest diese Einstellung in den **Einstellungen > Hosten einer statischen Website** des Buckets. Setze dein Index-Dokument auf `index.html` und dein Fehler-Dokument auf `404.html`. Schließlich findest du deine neue Website-URL unter **Einstellungen > Hosten einer statischen Website** im Bucket. - - :::note - Wenn du eine Single-Page-Anwendung (SPA) bereitstellst, setze dein Fehlerdokument auf `index.html`. - ::: - - -## S3 mit CloudFront - -CloudFront ist ein Webservice, der Content Delivery Network (CDN)-Funktionen bietet. Er wird verwendet, um Inhalte eines Webservers zwischenzuspeichern und an Endnutzer zu verteilen. CloudFront erhebt Gebühren für die übertragene Datenmenge. Wenn du CloudFront zu deinem S3-Bucket hinzufügst, ist das kostengünstiger und ermöglicht eine schnellere Bereitstellung. - -Um S3 mit Cloudfront zu verbinden, erstellst du eine CloudFront-Distribution mit den folgenden Werten: - -- **Ursprungsdomäne:** Der Endpunkt deiner statischen Website im S3-Bucket. Du findest deinen Endpunkt in den **Eigenschaften > Statisches Website-Hosting** deines S3-Buckets. Alternativ kannst du deinen S3-Bucket auswählen und auf das Callout klicken, um die Bucket-Adresse durch deinen statischen Bucket-Endpunkt zu ersetzen. -- **Viewer-Protokollrichtlinie:** „Zu HTTPS umleiten“ - -Mit dieser Konfiguration wird deine Website über das Cloudfront CDN-Netzwerk bereitgestellt. Die URL deiner CloudFront-Distribution findest du im Bucket unter **Distributionen > Domainname**. - -:::note -Wenn du CloudFront mit einem Endpunkt für eine statische S3-Website verbindest, verlässt du dich bei der Zugriffskontrolle auf die S3-Bucket-Richtlinien. Im Abschnitt [S3 Hosting statischer Websites](#statisches-website-hosting-mit-s3) findest du weitere Informationen zu Bucket-Richtlinien. -::: - -## Kontinuierliche Bereitstellung mit GitHub-Actions - -Es gibt viele Möglichkeiten, die kontinuierliche Bereitstellung für AWS einzurichten. Eine Möglichkeit für Code, der auf GitHub gehostet wird, ist die Verwendung von [GitHub Actions](https://github.com/features/actions), um deine Website bei jedem Commit bereitzustellen. - - -1. Erstelle in deinem AWS-Konto mit [IAM](https://aws.amazon.com/iam/) eine neue Richtlinie mit den folgenden Berechtigungen. Mit dieser Richtlinie kannst du erstellte Dateien in deinen S3-Bucket hochladen und die CloudFront-Verteilungsdateien ungültig machen, wenn du einen Commit durchführst. - - ```json - { - "Version": "2012-10-17", - "Statement": [ - { - "Sid": "VisualEditor0", - "Effect": "Allow", - "Action": [ - "s3:PutObject", - "s3:ListBucket", - "s3:DeleteObject", - "cloudfront:CreateInvalidation" - ], - "Resource": [ - "", - "arn:aws:s3:::/*", - "arn:aws:s3:::" - ] - } - ] - } - ``` - - :::caution - Vergiss nicht, `` und `` zu ersetzen. Du findest den DISTRIBUTION_ARN in **CloudFront > Distributions > Details**. - ::: - -2. Erstelle einen neuen IAM-Benutzer und füge die Richtlinie an den Benutzer an. So erhältst du deinen `AWS_SECRET_ACCESS_KEY` und deine `AWS_ACCESS_KEY_ID`. - -3. Füge diesen Beispielworkflow zu deinem Repository unter `.github/workflows/deploy.yml` hinzu und pushe ihn auf GitHub. Du musst `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `BUCKET_ID` und `DISTRIBUTION_ID` als "Secrets" zu deinem Repository auf GitHub unter **Settings** > **Secrets** > **Actions** hinzufügen. Klicke auf Neues Repository-Secret, um jedes einzelne hinzuzufügen. - - ```yaml - name: Website bereitstellen - - on: - push: - branches: - - main - - jobs: - deploy: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Configure AWS Credentials - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - aws-region: us-east-1 - - name: Install modules - run: npm ci - - name: Build application - run: npm run build - - name: Deploy to S3 - run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }} - - name: Create CloudFront invalidation - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*" - ``` - - :::note - Deine `BUCKET_ID` ist der Name deines S3-Buckets. Deine `DISTRIBUTION_ID` ist die ID deiner CloudFront-Distribution. Du findest deine CloudFront-Veröffentlichungs-ID unter **CloudFront > Distributions> ID** - ::: - - -## Community-Ressourcen - -- [Bereitstellung von Astro für AWS Amplify](https://www.launchfa.st/blog/deploy-astro-aws-amplify) -- [Bereitstellung von Astro auf AWS Elastic Beanstalk](https://www.launchfa.st/blog/deploy-astro-aws-elastic-beanstalk) -- [Bereitstellung von Astro für Amazon ECS auf AWS Fargate](https://www.launchfa.st/blog/deploy-astro-aws-fargate) diff --git a/src/content/docs/de/guides/deploy/cloudflare.mdx b/src/content/docs/de/guides/deploy/cloudflare.mdx deleted file mode 100644 index 8b229485861b8..0000000000000 --- a/src/content/docs/de/guides/deploy/cloudflare.mdx +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Veröffentliche deine Astro-Seite auf Cloudflare Pages -description: Wie du deine Astro-Website mit Cloudflare Pages ins Internet stellst. -type: deploy -i18nReady: true ---- - -Du kannst dein Astro-Projekt auf [Cloudflare Pages](https://pages.cloudflare.com/) bereitstellen, einer Plattform für Frontend-Entwickler zur Zusammenarbeit und Bereitstellung statischer (JAMstack) und SSR-Webseiten. - -Diese Anleitung enthält: - -- [Wie du über das Cloudflare Pages Dashboard veröffentlichst](#wie-man-eine-website-mit-git-veröffentlicht) -- [Wie man mit Wrangler, dem Cloudflare CLI, veröffentlicht](#wie-man-eine-website-mit-wrangler-veröffentlicht) -- [Wie man eine SSR-Seite mit `@astrojs/cloudflare` veröffentlicht](#wie-man-eine-ssr-seite-veröffentlicht) - -## Voraussetzungen - -Um loszulegen, brauchst du Folgendes: - -- Ein Cloudflare-Konto. Wenn du noch keins hast, kannst du während des Prozesses ein kostenloses Cloudflare-Konto erstellen. -- Dein App-Code wird in ein [GitHub](https://github.com/) oder ein [GitLab](https://about.gitlab.com/) Repository gepusht. - -## Wie man eine Website mit Git veröffentlicht - -1. Richte ein neues Projekt auf Cloudflare Pages ein. -2. Pushe deinen Code in dein Git-Repository (GitHub, GitLab). -3. Melde dich im Cloudflare-Dashboard an und wähle dein Konto unter **Konto-Startseite** > **Seiten** aus. -4. Wähle **Ein neues Projekt erstellen** und die Option **Git verbinden**. -5. Wähle das Git-Projekt aus, das du einrichten willst, und klicke auf **Einrichtung beginnen** -6. Verwende die folgenden Build-Einstellungen: - - - **Framework-Voreinstellung**: `Astro` - - **Build-Befehl:** `npm run build` - - **Build-Ausgabeverzeichnis:** `dist` - - **Umgebungsvariablen (erweitert)**: Standardmäßig verwendet Cloudflare Pages Node.js 12.18.0, aber Astro [erfordert eine höhere Version](/de/install-and-setup/#prerequisites). Füge eine Umgebungsvariable mit einem **Variablennamen** von `NODE_VERSION` und einem **Wert** von `v16.13.0` oder höher hinzu, um Cloudflare anzuweisen, eine kompatible Node-Version zu verwenden. Alternativ kannst du auch eine `.nvmrc`-Datei zu deinem Projekt hinzufügen, um eine Node-Version anzugeben. - -7. Klicke auf die Schaltfläche **Speichern und bereitstellen**. - -## Wie man eine Website mit Wrangler veröffentlicht - -1. Installiere [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/). -2. Authentifiziere Wrangler mit deinem Cloudflare-Konto mit `Wrangler Login`. -3. Führe deinen Build-Befehl aus. -4. Veröffentliche mit `npx wrangler pages publish dist`. - -```bash -# Wrangler CLI installieren -npm install -g wrangler -# Anmeldung beim Cloudflare-Konto über CLI -wrangler login -# Run your build command -npm run build -# Neues Deployment erstellen -npx wrangler pages publish dist -``` - -Nachdem du deine Assets hochgeladen hast, gibt dir Wrangler eine Vorschau-URL, mit der du deine Seite überprüfen kannst. Wenn du dich in das Cloudflare Pages Dashboard einloggst, siehst du dein neues Projekt. - -### Lokale Vorschau mit Wrangler aktivieren - -Damit die Vorschau funktioniert, musst du `wrangler` installieren - -```bash -pnpm add wrangler --save-dev -``` - -Es ist dann möglich, das Vorschauskript zu aktualisieren, um `wrangler` anstelle des in Astro eingebauten Vorschau-Befehls auszuführen: - - -```json title="package.json" -"preview": "wrangler pages dev ./dist" -``` - -## Wie man eine SSR-Seite veröffentlicht - -Du kannst eine Astro SSR-Seite für den Einsatz auf Cloudflare Pages mit dem [`@astrojs/cloudflare` adapter](/de/guides/integrations-guide/cloudflare/) erstellen. - -Befolge die folgenden Schritte, um den Adapter einzurichten. Du kannst dann eine der beiden oben beschriebenen Methoden anwenden. - -### Schnelle Installation - -Füge den Cloudflare-Adapter hinzu, um SSR in deinem Astro-Projekt mit dem folgenden `astro add`-Befehl zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor. - -```bash -npx astro add cloudflare -``` - -### Manuelle Installation - -Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus: - -1. Füge den Adapter `@astrojs/cloudflare` mit deinem bevorzugten Paketmanager zu den Abhängigkeiten deines Projekts hinzu. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus: - - ```bash - npm install @astrojs/cloudflare - ``` - -2. Füge Folgendes zu deiner Datei `astro.config.mjs` hinzu: - - ```js title="astro.config.mjs" ins={2, 5-6} - import { defineConfig } from 'astro/config'; - import cloudflare from '@astrojs/cloudflare'; - - export default defineConfig({ - output: 'server', - adapter: cloudflare() - }); - ``` - -### Modi - -Derzeit werden zwei Modi bei der Verwendung von Pages Functions mit dem [`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme) Adapter unterstützt. - -1. **Erweiterter** Modus: Dieser Modus wird verwendet, wenn du deine Funktion im `erweiterten` Modus ausführen willst, der die `_worker.js` in `dist` aufnimmt, oder einen Verzeichnismodus, bei dem Pages den Worker aus einem Funktionsordner im Projektstamm kompiliert. - - Wenn kein Modus eingestellt ist, ist der Standardwert `Erweitert`. - -2. **Verzeichnis**-Modus: Dieser Modus wird verwendet, wenn du deine Funktion im `Verzeichnis`-Modus ausführen willst. Das bedeutet, dass der Adapter den clientseitigen Teil deiner App auf die gleiche Weise kompiliert, aber das Worker-Skript in einen `Funktions`-Ordner im Projektstamm verschiebt. Der Adapter legt in diesem Ordner immer nur eine `[[Pfad]].js` ab, so dass du zusätzliche Plugins und Seiten-Middleware hinzufügen kannst, die in die Versionskontrolle eingecheckt werden können. - - ```ts title="astro.config.mjs" "directory" - export default defineConfig({ - adapter: cloudflare({ mode: "directory" }), - }); - ``` -### Seitenfunktionen verwenden - -Mit [Seitenfunktionen] (https://developers.cloudflare.com/pages/platform/functions/) kannst du serverseitigen Code ausführen, um dynamische Funktionen zu ermöglichen, ohne einen eigenen Server zu betreiben. - -Um loszulegen, erstelle ein Verzeichnis `/functions` im Stammverzeichnis deines Projekts. Wenn du deine Funktionsdateien in dieses Verzeichnis schreibst, wird automatisch ein Worker mit benutzerdefinierten Funktionen für die vorgegebenen Routen erstellt. Mehr über das Schreiben von Funktionen erfährst du in der [Pages Functions Dokumentation](https://developers.cloudflare.com/pages/platform/functions/). - -📚 Lies mehr über [SSR in Astro](/de/guides/on-demand-rendering/). - -## Fehlerbehandlung - -Wenn du auf Fehler stößt, überprüfe, ob die Version von `node`, die du lokal verwendest (`node -v`), mit der Version übereinstimmt, die du in der Umgebungsvariable angibst. - -Cloudflare benötigt [Node v16.13](https://miniflare.dev/get-started/cli#installation), eine neuere Version als die Standardversion von Astro, also überprüfe, ob du mindestens v16.13 verwendest. - -Die clientseitige Hydratisierung kann aufgrund der Einstellung "Auto Minify" von Cloudflare fehlschlagen. Wenn du in der Konsole die Meldung "Hydration completed but contains mismatches" siehst, stelle sicher, dass du Auto Minify in den Cloudflare-Einstellungen deaktivierst. diff --git a/src/content/docs/de/guides/deploy/github.mdx b/src/content/docs/de/guides/deploy/github.mdx deleted file mode 100644 index db3ff545dc159..0000000000000 --- a/src/content/docs/de/guides/deploy/github.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Veröffentliche deine Astro-Website bei GitHub Pages -description: Wie du deine Astro-Website mit GitHub Pages im Internet veröffentlichst. -sidebar: - label: GitHub Pages -type: deploy -i18nReady: true ---- - -import { Steps } from '@astrojs/starlight/components'; - -Du kannst [GitHub Pages](https://pages.github.com/) verwenden, um eine Astro-Website direkt von einem Repository auf [GitHub.com](https://github.com/) zu hosten. - -## Wie du sie veröffentlichst - -Du kannst eine Astro-Website bei GitHub Pages veröffentlichen, indem du [GitHub Actions](https://github.com/features/actions) verwendest und so deine Website automatisch erzeugst und veröffentlichst. Um dies zu erreichen, muss dein Quelltext auf GitHub gehosted sein. - -Astro pflegt die offizielle `withastro/action`, welche dein Projekt mit minimaler Konfiguration veröffentlicht. Folge den unten angeführten Anweisungen, um deine Astro-Website bei GitHub Pages zu veröffentlichen, und lies [die README-Datei des Pakets](https://github.com/withastro/action), falls du mehr Informationen benötigst. - -## Astro für GitHub Pages konfigurieren - -### Veröffentlichung auf einer `github.io` UR - -Setze die Optionen [`site`](/de/reference/configuration-reference/#site) und [`base`](/de/reference/configuration-reference/#base) in `astro.config.mjs`. - -```js title="astro.config.mjs" ins={4-5} -import { defineConfig } from 'astro/config' - -export default defineConfig({ - site: 'https://astronaut.github.io', - base: 'my-repo', -}) -``` - -#### `site` - -Der Wert für `site` muss einer der folgenden sein: - -- Die folgende URL basiert auf deinem Benutzernamen: `https://.github.io` -- Die zufällige URL, die automatisch für eine [private Seite der GitHub-Organisation] (https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site) generiert wird: `https://.pages.github.io/` - -#### `base` - -Ein Wert für `base` kann erforderlich sein, damit Astro deinen Repository-Namen (z.B. `/my-repo`) als Stammverzeichnis deiner Website behandelt. - -:::note -Setze keinen `base`-Parameter, wenn: - -- Deine Seite wird aus dem Stammordner ausgeliefert. -- Dein Repository befindet sich unter `https://github.com//.github.io`. -::: - -Der Wert für `base` sollte der Name deines Repositorys sein, der mit einem Schrägstrich beginnt, zum Beispiel `/my-blog`. Damit Astro weiß, dass das Stammverzeichnis deiner Website `/my-repo` ist und nicht der Standardwert `/`. - -:::caution -Wenn dieser Wert konfiguriert ist, muss allen deinen internen Seitenlinks dein „Basis“-Wert vorangestellt werden: - -```astro ins="/my-repo" -Über mich -``` - -Siehe mehr über [einen `base`-Wert konfigurieren](/de/reference/configuration-reference/#base). -::: - -### GitHub-Seiten mit einer eigenen Domain verwenden - -:::tip[Eine benutzerdefinierte Domäne einrichten] -Du kannst eine benutzerdefinierte Domain einrichten, indem du die folgende Datei `./public/CNAME` zu deinem Projekt hinzufügst: - -```js title="public/CNAME" -sub.mydomain.com -``` - -Dadurch wird deine Website unter deiner benutzerdefinierten Domain statt unter `user.github.io` bereitgestellt. Vergiss nicht, auch [DNS für deinen Domainanbieter zu konfigurieren](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain). -::: - -Um Astro für die Verwendung von GitHub-Seiten mit einer benutzerdefinierten Domain zu konfigurieren, gibst du deine Domain als Wert für `site` an. Setze keinen Wert für `base`: - -```js title="astro.config.mjs" ins={4} -import { defineConfig } from 'astro/config' - -export default defineConfig({ - site: 'https://example.com', -}) -``` - -## Konfiguriere eine GitHub-Aktion - - -1. Erstelle eine neue Datei in deinem Projekt unter `.github/workflows/deploy.yml` und füge die folgende YAML ein. - - ```yaml title="deploy.yml" - name: Deploy to GitHub Pages - - on: - # Löse den Workflow jedes Mal aus, wenn du zum `main`-Branch pushst - # Du verwendest einen anderen Branchnamen? Ersetze `main` durch den Namen deines Branches - push: - branches: [ main ] - # Ermöglicht es dir, diesen Workflow manuell über die Registerkarte „Actions“ auf GitHub auszuführen. - workflow_dispatch: - - # Erlaube diesem Job, das Repo zu klonen und eine Seitenbereitstellung zu erstellen - permissions: - contents: read - pages: write - id-token: write - - jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Checkout your repository using git - uses: actions/checkout@v4 - - name: Install, build, and upload your site - uses: withastro/action@v3 - # with: - # path: . # Das Stammverzeichnis deines Astro-Projekts innerhalb des Repositorys. (optional) - # node-version: 20 # Die spezifische Version von Node, die für die Erstellung deiner Website verwendet werden soll. Der Standardwert ist 20. (optional) - # package-manager: pnpm@latest # Der Node-Paketmanager, der für die Installation von Abhängigkeiten und die Erstellung deiner Website verwendet werden soll. Wird automatisch anhand deines Lockfiles ermittelt. (optional) - - deploy: - needs: build - runs-on: ubuntu-latest - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 - ``` - - :::note - Die Astro-Aktion benötigt ein paar optionale Eingaben. Diese kannst du angeben, indem du die Zeile `with:` auskommentierst und die gewünschte Eingabe angibst. - ::: - - :::caution - Die offizielle Astro-[Action](https://github.com/withastro/action) scannt nach einer Lock-Datei, um deinen bevorzugten Paketmanager (`npm`, `yarn`, `pnpm` oder `bun`) zu erkennen. Du solltest die von deinem Paketmanager automatisch generierte Datei `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml` oder `bun.lockb` in dein Repository übertragen. - ::: - -2. Gehe auf GitHub auf den Reiter **Einstellungen** deines Repositorys und suche den Abschnitt **Seiten** der Einstellungen. - -3. Wähle **GitHub Actions** als **Quelle** für deine Seite. - -4. Übertrage die neue Workflow-Datei und pushe sie auf GitHub. - - -Deine Website sollte jetzt veröffentlicht werden! Wenn du Änderungen am Repository deines Astro-Projekts vornimmst, wird die GitHub-Aktion sie automatisch für dich veröffentlichen. diff --git a/src/content/docs/de/guides/deploy/heroku.mdx b/src/content/docs/de/guides/deploy/heroku.mdx deleted file mode 100644 index 4727449b73363..0000000000000 --- a/src/content/docs/de/guides/deploy/heroku.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Veröffentliche deine Astro-Website auf Heroku -description: Wie du deine Astro-Website auf Heroku im Internet veröffentlichst. -type: deploy -i18nReady: true ---- - -[Heroku](https://www.heroku.com/) ist eine Platform-as-a-Service für die Erstellung, den Betrieb und die Verwaltung moderner Apps in der Cloud. Mit dieser Anleitung kannst du eine Astro-Website auf Heroku veröffentlichen. - -## So funktioniert die Veröffentlichung - -1. Installiere die Kommandozeilen­schnittstelle [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). - -2. Erstelle ein Heroku-Konto, indem du dich [anmeldest](https://signup.heroku.com/). - -3. Führe `heroku login` aus und gib deine Heroku-Anmeldedaten ein: - - ```bash - $ heroku login - ``` - -4. Erstelle im Stammverzeichnis deines Projekts eine Datei namens `static.json` mit dem folgenden Inhalt: - - `static.json`: - - ```json - { - "root": "./dist" - } - ``` - - Dies ist die Konfiguration deiner Website; mehr dazu findest du unter [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static). - -5. Richte deine Heroku Git remote ein: - - ```bash - # Versionsnummer aktualisieren - $ git init - $ git add . - $ git commit -m "Meine Website ist bereit für die Veröffentlichung." - - # Eine neue App mit einem bestimmten Namen erstellen - $ heroku apps:create example - - # Buildpack für statische Websites einstellen - $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git - ``` - -6. Veröffentliche deine Website: - - ```bash - # Website veröffentlichen - $ git push heroku master - - # Browser öffnen, um die Dashboard-Version von Heroku CI anzuzeigen - $ heroku open - ``` diff --git a/src/content/docs/de/guides/deploy/index.mdx b/src/content/docs/de/guides/deploy/index.mdx deleted file mode 100644 index bda1b5fe0a8bf..0000000000000 --- a/src/content/docs/de/guides/deploy/index.mdx +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Veröffentliche deine Astro-Website -description: Wie du deine Astro-Website im Internet veröffentlichst. -i18nReady: true ---- -import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - -**Bist du bereit, deine Astro-Website zu erzeugen und zu veröffentlichen?** -Folge einer unserer Anleitungen zu den verschiedenen Hosting-Anbietern, oder scrolle weiter nach unten, um allgemeine Informationen zur Veröffentlichung einer Astro-Website zu erhalten. - - - -## Optionen zur schnellen Veröffentlichung - -Du kannst eine Astro-Website bei zahlreichen Hosting-Anbietern schnell erzeugen und veröffentlichen, indem du das Dashboard auf der Anbieter-Website oder dessen Kommandozeilenwerkzeuge nutzt. - -### Veröffentlichung via Anbieter-Website - -Ein schneller Weg zur Veröffentlichung deiner Website besteht darin, das Online-Git-Repository deines Astro-Projekts (z.B. auf GitHub, GitLab, Bitbucket) mit deinem Hosting-Anbieter zu verbinden und so von einer kontinuierlichen Veröffentlichung über Git zu profitieren. - -Die Plattformen der Hosting-Anbieter erkennen dann automatisch Änderungen am Quellcode deines Astro-Projekts, erzeugen deine Website und veröffentlichen sie im Internet auf einer benutzerdefinierten URL oder deiner persönlichen Domain. Die Schritte zum Aufsetzen der Veröffentlichung auf solchen Plattformen sehen oft wie folgt aus: - -1. Füge dein Repository einem Online-Git-Anbieter hinzu (z.B. GitHub, GitLab, Bitbucket). - -2. Wähle einen Hosting-Anbieter aus, der **Kontinuierliche Veröffentlichung** unterstützt (z.B. [Netlify](/de/guides/deploy/netlify/) oder [Vercel](/de/guides/deploy/vercel/)), und importiere dein Git-Repository dort als neue Website/Projekt. - - Viele gängigen Anbieter werden dein Projekt als Astro-Website erkennen und sollten die folgenden Konfigurationseinstellungen zum Erzeugen und Veröffentlichen deiner Astro-Website festlegen (falls nicht, können diese angepasst werden): - - :::note[Veröffentlichungseinstellungen] - - **Build-Befehl:** `astro build` oder `npm run build` - - **Zu veröffentlichendes Verzeichnis:** `dist` - ::: - -3. Klicke auf "Veröffentlichen", um deine neue Website auf einer einzigartigen URL des Hosting-Anbieters bereitzustellen (z.B. `new-astro-site.netlify.app`). - -Der Hosting-Anbieter wird standardmäßig so konfiguriert, dass er den Haupt-Branch deines Projekts bei deinem Git-Anbieter überwacht und nach jedem neuen Commit deine Website erneut erzeugt und veröffentlicht. Die Einstellungen können normalerweise im Online-Dashboard deines Anbieters geändert werden. - -### Veröffentlichung via CLI - -Manche Hosting-Anbieter stellen eine eigene Kommandozeilen­schnittstelle (CLI) zur Verfügung, die du mit npm global auf deiner Maschine installieren kannst. Die Schritte zur Veröffentlichung via CLI sehen oft wie folgt aus: - -1. Installiere die CLI deines Hosting-Anbieters global, zum Beispiel: - - - - ```shell - npm install --global netlify-cli - ``` - - - ```shell - pnpm add --global netlify-cli - ``` - - - ```shell - yarn global add netlify-cli - ``` - - - -2. Starte die CLI und folge den Anweisungen zur Authentifizierung, Einrichtung usw. - -3. Erzeuge deine Website und veröffentliche sie bei deinem Hosting-Anbieter. - - Viele gängige Anbieter bauen und veröffentlichen deine Website für dich. Im Normalfall werden sie dein Projekt als Astro-Website erkennen und sollten die folgenden Konfigurationseinstellungen zum Erzeugen und Veröffentlichen festlegen (falls nicht, können diese angepasst werden): - - :::note[Veröffentlichungseinstellungen] - - **Build-Befehl:** `astro build` oder `npm run build` - - **Zu veröffentlichendes Verzeichnis:** `dist` - ::: - - Andere Anbieter setzen voraus, dass du [deine Website lokal erzeugst](#erzeuge-deine-website-lokal) und über die Kommandozeile veröffentlichst. - -## Erzeuge deine Website lokal - -Viele Anbieter wie Netlify und Vercel erzeugen deine Website für dich und veröffentlichen das Ergebnis dann im Internet. Manche Anbieter setzen aber voraus, dass du deine Website lokal selbst erzeugst und dann entweder einen Veröffentlichungs-Befehl ausführst oder die Build-Ausgabe hochlädst. - -Vielleicht möchtest du deine Website auch lokal erzeugen, um sie dir als Vorschau anzusehen oder mögliche Fehler und Warnungen in deiner eigenen Umgebung zu entdecken. - -Nutze den Befehl `npm run build`, um deine Astro-Website zu erzeugen: - - - - ```shell - npm run build - ``` - - - ```shell - pnpm run build - ``` - - - ```shell - yarn run build - ``` - - - -Die Build-Ausgabe wird standardmäßig ins Verzeichnis `dist/` geschrieben. Dieses Ziel kann über die [`outDir`-Konfigurationsoption](/de/reference/configuration-reference/#outdir) geändert werden. - -## Einen Adapter für SSR hinzufügen - -:::note -Bevor du deine Website mit aktiviertem [SSR (serverseitigem Rendern)](/de/guides/on-demand-rendering/) veröffentlichst, stelle bitte Folgendes sicher: - - - Du hast den [geeigneten SSR-Adapter](/de/guides/on-demand-rendering/) als Projektabhängigkeit installiert. - - Du hast die [Konfiguration angepasst](/de/reference/configuration-reference/#integrations) und den Adapter zu den Imports sowie dem Standard-Export deiner `astro.config.mjs`-Datei hinzugefügt. -::: diff --git a/src/content/docs/de/guides/deploy/kinsta.mdx b/src/content/docs/de/guides/deploy/kinsta.mdx deleted file mode 100644 index f1fbfe16a086e..0000000000000 --- a/src/content/docs/de/guides/deploy/kinsta.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Veröffentliche deine Astro-Website auf Kinsta Application Hosting -description: So veröffentlichst du deine Astro-Website auf Kinsta Application Hosting im Internet. -type: deploy -i18nReady: true ---- - -Du kannst [Kinsta Application Hosting](https://kinsta.com/application-hosting/) nutzen, um eine Astro-Website auf deren Cloud-Hosting zu veröffentlichen. - -:::tip[Suchst du ein Beispiel?] -Schau dir [das offizielle Kinsta Application Hosting Starter-Projekt für Astro](https://github.com/kinsta/hello-world-astro) an! -::: - -## Konfigurieren deines Astro-Projekts -Um dein Projekt auf **Kinsta Application Hosting** zu hosten, musst du Folgendes tun: -- Füge ein Feld `name` in deine `package.json` ein. (Der Wert ist frei definierbar und hat keinen Einfluss auf deine Bereitstellung.) -- Füge ein `build`-Skript in deine `package.json` ein. (Dein Astro-Projekt sollte es bereits enthalten.) -- Installiere das [`serve`](https://www.npmjs.com/package/serve)-Paket und setze das `start`-Skript auf `serve dist/`. - -Hier sind die notwendigen Zeilen in deiner `package.json` Datei: -```json title="package.json" {2,6} ins={12} "serv dist/" -{ - "name": "anything", // Dies ist erforderlich, aber der Wert spielt keine Rolle. - "scripts": { - "dev": "astro dev", - "start": "serve dist/", - "build": "astro build", - "preview": "astro preview", - "astro": "astro" - }, - "dependencies": { - "astro": "^1.6.10", - "serve": "^14.0.1" - }, -} -``` - -## So funktioniert die Veröffentlichung -Sobald das GitHub-Repository deines Projekts verbunden ist, kannst du im **MyKinsta Admin Panel** manuelle Deployments zum Kinsta Application Hosting auslösen. Du kannst auch automatische Deployments in deinem Admin-Panel einrichten. - -### Konfiguration einer neuen Kinsta-Anwendung -1. Gehe zum [My Kinsta](https://my.kinsta.com/)-Verwaltungsbereich. -2. Gehe auf die Registerkarte **Anwendungen**. -3. Verbinde dein GitHub-Repository. -4. Drücke auf die Schaltfläche **Dienst hinzufügen** > **Anwendung**. -5. Folge den Schritten des Assistenten. -6. Deine Anwendung wird bereitgestellt. diff --git a/src/content/docs/de/guides/deploy/microsoft-azure.mdx b/src/content/docs/de/guides/deploy/microsoft-azure.mdx deleted file mode 100644 index a9dc310e68cd5..0000000000000 --- a/src/content/docs/de/guides/deploy/microsoft-azure.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Veröffentliche deine Astro-Site auf Microsoft Azure -description: Wie du deine Astro-Site mit Microsoft Azure im Internet veröffentlichst. -type: deploy -i18nReady: true ---- - -[Azure](https://azure.microsoft.com/) ist eine Cloud-Plattform von Microsoft. Du kannst deine Astro-Website mit dem Microsoft Azure-Dienst [Static Web Apps](https://aka.ms/staticwebapps) veröffentlichen. - -## Voraussetzungen - -Um dieser Anleitung zu folgen, brauchst du: - -- Ein Azure-Konto und einen Abonnementschlüssel. Du kannst ein [kostenloses Azure-Konto hier](https://azure.microsoft.com/free) erstellen. -- Dein App-Code wurde auf [GitHub](https://github.com/) veröffentlicht. -- Die [SWA-Erweiterung](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) in [Visual Studio Code](https://code.visualstudio.com/). - -## Wie man veröffentlicht - -1. Öffne dein Projekt in VS Code. - -2. Öffne die Erweiterung Static Web Apps, melde dich bei Azure an und klicke auf die Schaltfläche **+**, um eine neue Static Web App zu erstellen. Du wirst aufgefordert, den zu verwendenden Abonnementschlüssel festzulegen. - -3. Folge dem von der Erweiterung gestarteten Assistenten, um deiner App einen Namen zu geben, ein Framework-Preset auszuwählen und das Stammverzeichnis der App (normalerweise `/`) und den Speicherort der erstellten Datei `/dist` zu bestimmen. Der Assistent wird ausgeführt und erstellt eine [GitHub Action](https://github.com/features/actions) in deinem Repo in einem `.github` Ordner. - -Die GitHub-Aktion wird deine App bereitstellen (du kannst den Fortschritt in der Registerkarte "Aktionen" deines Repos auf GitHub sehen). Wenn die Action erfolgreich abgeschlossen ist, kannst du deine App unter der im Fortschrittsfenster der SWA-Erweiterung angezeigten Adresse ansehen, indem du auf die Schaltfläche **Website durchsuchen** klickst (diese erscheint, nachdem die GitHub-Aktion ausgeführt wurde). diff --git a/src/content/docs/de/guides/deploy/netlify.mdx b/src/content/docs/de/guides/deploy/netlify.mdx deleted file mode 100644 index 6d2ab41b77cb8..0000000000000 --- a/src/content/docs/de/guides/deploy/netlify.mdx +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Veröffentliche deine Astro-Site auf Netlify -description: Wie du deine Astro-Website auf Netlify im Internet veröffentlichst. -type: deploy -i18nReady: true ---- -[Netlify](https://netlify.com) bietet Hosting und serverlose Backend-Dienste für Webanwendungen und statische Websites. Jede Astro-Website kann auf Netlify gehostet werden! - -Diese Anleitung enthält Anweisungen für die Veröffentlichung auf Netlify über die Benutzeroberfläche der Website oder das Netlify CLI. - -## Projektkonfiguration - -Dein Astro-Projekt kann auf drei verschiedene Arten auf Netlify bereitgestellt werden: als statische Website, als Server-gerenderte Website oder als (experimentelle) Edge-gerenderte Website. - -### Statische Website - -Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site bei Netlify zu veröffentlichen. - -### Adapter für SSR/Edge - -Um SSR in deinem Astro-Projekt zu aktivieren und auf Netlify einzusetzen: - -Füge [den Netlify-Adapter](/de/guides/integrations-guide/netlify/) hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor. - -```bash -npx astro add netlify -``` - -Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus: - -1. Installiere [den `@astrojs/netlify` Adapter](https://github.com/withastro/astro/tree/main/packages/integrations/netlify) mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus: - - ```bash - npm install @astrojs/netlify - ``` - -1. Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei `astro.config.mjs` hinzu. - - ```js title="astro.config.mjs" ins={2, 5-6} - import { defineConfig } from 'astro/config'; - import netlify from '@astrojs/netlify/functions'; - - export default defineConfig({ - output: 'server', - adapter: netlify(), - }); - ``` - - Um dein Projekt stattdessen mit [Netlify's experimentellen Edge-Funktionen](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app) zu rendern, ändere den Import von `netlify/functions` in der Astro-Konfigurationsdatei in `netlify/edge-functions`. - ```js title="astro.config.mjs" ins={3} del={2} - import { defineConfig } from 'astro/config'; - import netlify from '@astrojs/netlify/functions'; - import netlify from '@astrojs/netlify/edge-functions'; - - export default defineConfig({ - output: 'server', - adapter: netlify(), - }); - ``` - -## Wie man veröffentlicht - -Du kannst Netlify über die Benutzeroberfläche der Website oder über das Netlify CLI (Command Line Interface) einrichten. Das Verfahren ist für statische und SSR-Astro-Websites identisch. - -### Website UI Veröffentlichung - -Wenn dein Projekt in GitHub, GitLab, BitBucket oder Azure DevOps gespeichert ist, kannst du die Netlify-Website-UI verwenden, um deine Astro-Site bereitzustellen. - -1. Klicke auf Neue Website hinzufügen in deinem [Netlify Dashboard](https://app.netlify.com/) - -2. Wähle Importiere ein bestehendes Projekt - - Wenn du dein Astro-Repository von deinem Git-Anbieter importierst, sollte Netlify automatisch die richtigen Konfigurationseinstellungen für dich erkennen und vorausfüllen. - -3. Vergewissere dich, dass die folgenden Einstellungen eingegeben wurden, und drücke dann auf die Schaltfläche Deploy: - - - **Build Command:** `astro build` oder `npm run build` - - **Publish directory:** `dist` - - Nach der Veröffentlichung wirst du zur Website-Übersichtsseite weitergeleitet. Dort kannst du die Details deiner Website bearbeiten. - -Alle zukünftigen Änderungen an deinem Quellcode-Repository lösen je nach deiner Bereitstellungskonfiguration Vorschau- und Produktionsveröffentlichungen aus. - -#### `netlify.toml`-Datei - -Du kannst optional eine neue Datei `netlify.toml` auf der obersten Ebene deines Projekt-Repositorys erstellen, um deinen Build-Befehl und dein Veröffentlichungsverzeichnis sowie andere Projekteinstellungen wie Umgebungsvariablen und Weiterleitungen zu konfigurieren. Netlify liest diese Datei und konfiguriert dein Deployment automatisch. - -Um die Standardeinstellungen zu konfigurieren, erstelle eine Datei `netlify.toml` mit dem folgenden Inhalt: - -```toml -[build] - command = "npm run build" - publish = "dist" -``` - -📚 Mehr Infos unter ["Deploying an existing Astro Git repository"](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) auf Netlify's blog - - -### CLI-Veröffentlichung - -Du kannst auch eine neue Website auf Netlify erstellen und dein Git-Repository einbinden, indem du das [Netlify CLI](https://cli.netlify.com/) installierst und verwendest. - - -1. Installiere Netlify's CLI global - - ```bash - npm install --global netlify-cli - ``` - -2. Starte das CLI und folge den Anweisungen, um dich anzumelden und Netlify zu autorisieren -3. Starte `netlify init` und folge den Anweisungen -4. Bestätige deinen Build-Befehl (`astro build`) - - Das CLI erkennt automatisch die Build-Einstellungen (`astro build`) und das Veröffentlichungsverzeichnis (`dist`) und bietet an, automatisch [eine `netlify.toml`-Datei](#netlifytoml-datei) mit diesen Einstellungen zu erzeugen. - -5. Erstellen und Veröffentlichung durch Pushing zu Git - - Das CLI fügt dem Repository einen Veröffentlichungs-Schlüssel hinzu. Das bedeutet, dass deine Website jedes Mal, wenn du `git push` machst, automatisch auf Netlify neu aufgebaut wird. - -📚 Mehr Details von Netlify unter [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli) - -### Node.js-Version festlegen - -Wenn du ein Legacy [Build Image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) auf Netlify verwendest, stelle sicher, dass deine Node.js-Version eingestellt ist. Astro benötigt Version 16.12.0 oder höher. - -Du kannst [deine Node.js-Version in Netlify angeben](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) mit: -- eine [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) Datei in deinem Basisverzeichnis. -- eine Umgebungsvariable `NODE_VERSION` in den Einstellungen deiner Website über das Netlify-Projekt-Dashboard. - -## Netlify-Funktionen verwenden - -Für die Verwendung von Netlify-Functions mit Astro ist keine besondere Konfiguration erforderlich. Füge ein `netlify/functions`-Verzeichnis zu deinem Projektstamm hinzu und folge [der Netlify-Functions-Dokumentation](https://docs.netlify.com/functions/overview/), um loszulegen! - -## Beispiele - -- [Wie man eine Astro-Site einrichtet](https://www.netlify.com/blog/how-to-deploy-astro/) - Netlify Blog -- [Bereitstellung einer Astro-Site mit Formularen, serverlosen Funktionen und Weiterleitungen](https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) - Netlify Blog -- [Bereitstellungs-Walkthrough-Video](https://youtu.be/GrSLYq6ZTes) - Netlify YouTube-Kanal diff --git a/src/content/docs/de/guides/deploy/render.mdx b/src/content/docs/de/guides/deploy/render.mdx deleted file mode 100644 index b376f16770cb3..0000000000000 --- a/src/content/docs/de/guides/deploy/render.mdx +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Veröffentliche deine Astro-Site mit Render -description: Wie du deine Astro-Website mit Render im Internet veröffenlichst. -type: deploy -i18nReady: true ---- - -Du kannst dein Astro-Projekt bei [Render](https://render.com/) veröffentlichen, einem Dienst zum Erstellen von Websites mit kostenlosen TLS-Zertifikaten, einem globalen CDN, DDoS-Schutz, privaten Netzwerken und automatischen Deployments aus Git. - -## Wie man veröffentlichg - -1. Erstelle ein [render.com Konto](https://dashboard.render.com/) und melde dich an -2. Klicke auf die Schaltfläche **Neu +** in deinem Dashboard und wähle **Statische Website** -3. Verbinde dein [GitHub](https://github.com/) oder [GitLab](https://about.gitlab.com/)-Repository oder gib alternativ die öffentliche URL eines öffentlichen Repositories ein -4. Gib deiner Website einen Namen, wähle den Branch aus und gib den Build-Befehl und das Veröffentlichungsverzeichnis an - - **Build-Befehl:** `npm run build` - - **Veröffentlichungs-Verzeichnis:** `dist` - - **Umgebungsvariablen (erweitert)**: Standardmäßig verwendet Render Node.js 14.17.0, aber Astro [erfordert eine höhere Version](/de/install-and-setup/#prerequisites). Füge eine Umgebungsvariable mit einem **Variablenschlüssel** von `NODE_VERSION` und einem **Wert** von `16.12.0` oder höher hinzu, um Render anzuweisen, eine kompatible Node.js-Version zu verwenden. Alternativ kannst du auch eine [`.node-version`](https://render.com/docs/node-version) oder [`.nvmrc`](https://render.com/docs/node-version) Datei zu deinem Projekt hinzufügen, um eine Node.js-Version anzugeben. -5. Klicke auf die Schaltfläche **Statische Website erstellen** diff --git a/src/content/docs/de/guides/deploy/sst.mdx b/src/content/docs/de/guides/deploy/sst.mdx deleted file mode 100644 index 8d83a30ae4bf4..0000000000000 --- a/src/content/docs/de/guides/deploy/sst.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Veröffentliche deine Astro-Site mit SST auf AWS -description: Wie du deine Astro-Website mit SST auf AWS veröffentlichst. -type: deploy -i18nReady: true ---- - -Du kannst eine Astro-Site mit [SST](https://sst.dev) veröffentlichen, einem Open-Source-Framework für die Veröffentlichung von vollständig serverlosen Anwendungen in AWS mit SSG- und SSR-Unterstützung. - -Du kannst auch zusätzliche SST-Konstrukte wie Cron Jobs, Buckets, Queues usw. verwenden und dabei die Typensicherheit beibehalten. - -## Schnellstart - -1. Ein Astroprojekt erstellen -1. Führe `npx create-sst` aus -1. Es sollte erkennen, dass du Astro verwendest und dich um eine Bestätigung bitten. -1. Sobald du für die Veröffentlichung bereit bist, kannst du `npx sst deploy --stage=production` ausführen - -Du kannst dir auch [einen Video-Walkthrough dieses Prozesses](https://www.youtube.com/watch?v=AFP3ZHxO7Gg) ansehen, der dich durch die Schritte führt. - -### SST-Konstrukte -Um [zusätzliche SST-Konstrukte](https://docs.sst.dev/) zu verwenden, füge sie der Datei `sst.config.ts` hinzu. - -```ts {2} {4} title="sst.config.ts" -app.stack(function Site(ctx) { - const bucket = new Bucket(ctx.stack, "public"); - const site = new AstroSite(ctx.stack, "site", { - bind: [bucket], - }); - - ctx.stack.addOutputs({ - url: site.url, - }); -}); -``` - -Und dann greifst du auf sie in deiner `.astro`-Datei zu. - -```astro ---- -import { Bucket } from "sst/node/bucket" -console.log(Bucket.public.bucketName) ---- -``` - -In der [SST-Dokumentation zu Resource Binding](https://docs.sst.dev/resource-binding) findest du weitere Informationen. - -Wenn du Fragen hast, kannst du [im SST-Diskord](https://discord.gg/sst) fragen. diff --git a/src/content/docs/de/guides/deploy/surge.mdx b/src/content/docs/de/guides/deploy/surge.mdx deleted file mode 100644 index e3652c386b2e8..0000000000000 --- a/src/content/docs/de/guides/deploy/surge.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Veröffentliche deine Astro-Site mit Surge -description: Wie du deine Astro-Website mit surge.sh im Internet veröffentlichst. -type: deploy -i18nReady: true ---- - -Du kannst dein Astro-Projekt auf [Surge](https://surge.sh/) veröffentlichen, einer Ein-Befehl-Web-Publishing-Plattform für Front-End-Entwickler. - -## Wie man veröffentlichen - -1. Installiere [die Surge CLI](https://www.npmjs.com/package/surge) global über das Terminal, falls du das noch nicht getan hast. - - ```shell - npm install -g surge - ``` - -2. Erstelle deine Astro-Site aus dem Stammverzeichnis deines Projekts. - - ```shell - npm run build - ``` - -3. Veröffentliche Surge mit der CLI. - - ```shell - surge dist - ``` - - Du kannst eine [benutzerdefinierte Domäne](http://surge.sh/help/adding-a-custom-domain) verwenden, indem du `surge dist yourdomain.com` ausführst. diff --git a/src/content/docs/de/guides/deploy/vercel.mdx b/src/content/docs/de/guides/deploy/vercel.mdx deleted file mode 100644 index 43e0c5e165140..0000000000000 --- a/src/content/docs/de/guides/deploy/vercel.mdx +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Veröffentliche deine Astro-Website in Vercel -description: Wie du deine Astro-Website mit Vercel im Internet veröffentlichst. -sidebar: - label: Vercel -type: deploy -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; -import ReadMore from '~/components/ReadMore.astro'; -import { Steps } from '@astrojs/starlight/components'; - -Du kannst [Vercel](http://vercel.com/) verwenden, um eine Astro-Website ohne Konfiguration in dessen globales Edge-Netzwerk einzubinden. - -Diese Anleitung enthält Anweisungen für die Veröffentlichung mit Vercel über die Website-UI oder die CLI von Vercel. - -## Projektkonfiguration - -Dein Astro-Projekt kann in Vercel als statische Website oder als serverseitig gerenderte Website (SSR) veröffenlicht werden. - -### Statische Website - -Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Website auf Vercel zu veröffentlichen. - -### Adapter für SSR - -Um SSR in deinem Astro-Projekt zu aktivieren und auf Vercel zu veröffentlichen: - -Füge [den Vercel-Adapter](/de/guides/integrations-guide/vercel/) hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor. - - - - ```shell - npx astro add vercel - ``` - - - ```shell - pnpm astro add vercel - ``` - - - ```shell - yarn astro add vercel - ``` - - - -Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus: - - -1. Installiere [den `@astrojs/vercel` Adapter](/de/guides/integrations-guide/vercel/) mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts. - - - - ```shell - npm install @astrojs/vercel - ``` - - - ```shell - pnpm add @astrojs/vercel - ``` - - - ```shell - yarn add @astrojs/vercel - ``` - - - -2. Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei `astro.config.mjs` hinzu. - - ```js title="astro.config.mjs" ins={2, 5-6} - import { defineConfig } from 'astro/config'; - import vercel from '@astrojs/vercel/serverless'; - - export default defineConfig({ - output: 'server', - adapter: vercel(), - }); - ``` - - -## Wie man veröffenlicht - -Du kannst Vercel über die Benutzeroberfläche der Website oder über die Befehlszeilenschnittstelle (CLI) von Vercel veröffentlichen. Das Verfahren ist für statische und SSR-Astro-Sites gleich. - -### Website-UI-Veröffentlichung - - -1. Pushe deinen Code in dein Online-Git-Repository (GitHub, GitLab, BitBucket). - -2. [Importiere dein Projekt](https://vercel.com/new) in Vercel. - -3. Vercel wird Astro automatisch erkennen und die richtigen Einstellungen vornehmen. - -4. Deine Anwendung wird veröffentlicht! (z.B. [astro.vercel.app](https://astro.vercel.app/)) - - -Nachdem dein Projekt importiert und veröffenlicht wurde, erzeugen alle nachfolgenden Pushes zu Branches eine [Veröffentlichungsvorschau](https://vercel.com/docs/concepts/deployments/preview-deployments), und alle Änderungen am Produktionsbranch (meistens "main") führen zu einer [Produktionsveröffentlichung](https://vercel.com/docs/concepts/deployments/environments#production). - -Erfahre mehr über die [Git Integration](https://vercel.com/docs/concepts/git) von Vercel. - -### CLI-Veröffentlichung - - -1. Installiere das [Vercel CLI](https://vercel.com/cli) und führe `vercel` aus, um es zu veröffentlichen. - - - - ```shell - npm install -g vercel - vercel - ``` - - - ```shell - pnpm add -g vercel - vercel - ``` - - - ```shell - yarn global add vercel - vercel - ``` - - - -2. Vercel wird Astro automatisch erkennen und die richtigen Einstellungen vornehmen. - -3. Wenn du gefragt wirst: `Want to override the settings? [y/N]`, wähle `N`. - -4. Deine Anwendung wird veröffenlicht! (z.B. [astro.vercel.app](https://astro.vercel.app/)) - - -### Projektkonfiguration mit vercel.json - -Du kannst `vercel.json` verwenden, um das Standardverhalten von Vercel außer Kraft zu setzen und zusätzliche Einstellungen zu konfigurieren. Du kannst zum Beispiel Header an die HTTP-Antworten deiner Veröffentlichungen anhängen. - -Erfahre mehr über [Vercel's Projektkonfiguration](https://vercel.com/docs/project-configuration). diff --git a/src/content/docs/de/guides/endpoints.mdx b/src/content/docs/de/guides/endpoints.mdx deleted file mode 100644 index b46db2ae91521..0000000000000 --- a/src/content/docs/de/guides/endpoints.mdx +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Endpunkte -description: Erfahre, wie du Endpunkte erstellen kannst, die jegliche Form von Daten bereitstellen. -i18nReady: true ---- -import RecipeLinks from "~/components/RecipeLinks.astro"; - -Mit Astro kannst du eigene projektspezifische Endpunkte erstellen, die jegliche Form von Daten bereitstellen können. Du kannst damit Bilder generieren, ein RSS-Dokument bereitstellen oder sie als API-Route verwenden, um eine komplette API für deine Website zu erstellen. - -Auf statisch generierten Websites werden projektspezifische Endpunkte zum Erstellungszeitpunkt ausgeführt, um statische Dateien zu erzeugen. Wenn du hingegen den optionalen [SSR](/de/guides/on-demand-rendering/)-Modus aktivierst, werden benutzerdefinierte Endpunkte zu Live-Server-Endpunkten, die bei Anfragen aufgerufen werden. Statische und SSR-Endpunkte werden auf ähnliche Weise definiert, aber SSR-Endpunkte bieten zusätzliche Funktionen. - -## Endpunkte für statische Dateien - -Um einen Endpunkt zu erstellen, füge eine Datei mit der Endung `.js` oder `.ts` dem `/pages`-Verzeichnis hinzu. Da die Erweiterung `.js` oder `.ts` während des Erstellungsprozesses entfernt wird, sollte der Dateiname zusätzlich eine Dateiendung enthalten, die zum Format der ausgegebenen Daten passt. So erzeugt z.B. die Datei `src/pages/data.json.ts` den Endpunkt `/data.json`. - -Endpunkte exportieren eine `GET`-Funktion (optional `async`), welche ein [Context-Objekt](/de/reference/api-reference/#endpunkt-kontext) mit Parametern ähnlich dem `Astro`-Global erhält. In diesem Fall wird ein Response-Objekt mit einem `name` und einer `url` zurückgegeben. Astro wird dies zur Erstellungszeitpunkt aufrufen und den Inhalt des Bodys verwenden, um die Ausgabedatei zu erzeugen. - -```ts -// Example: src/pages/builtwith.json.ts -// Outputs: /builtwith.json -export async function GET({params, request}) { - return new Response( - JSON.stringify({ - name: 'Astro', - url: 'https://astro.build/' - }) - ) -} -``` - -Seit Astro v3.0 muss das zurückgegebene `Response`-Objekt die Eigenschaft `encoding` nicht mehr enthalten. Zum Beispiel, um ein binäres PNG-Bild zu erzeugen: - -```ts title="src/pages/astro-logo.png.ts" {3} -export async function GET({ params, request }) { - const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); - return new Response(await response.arrayBuffer()); -} -``` - -Du kannst deine Endpunkt-Funktion auch mit dem `APIRoute`-Type typisieren: - -```ts -import type { APIRoute } from 'astro'; - -export const GET: APIRoute = async ({ params, request }) => {...} -``` - -### `params` und dynamisches Routing - -Endpunkte unterstützen das gleiche [dynamische Routing](/de/guides/routing/#dynamische-routen) wie Seiten. Benenne dazu deine Datei mit einem Parameternamen, der in eckige Klammern eingeschlossen ist, und exportiere eine Funktion mit dem Namen [`getStaticPaths()`](/de/reference/api-reference/#getstaticpaths). Dann kannst du auf den Parameter mittels der `params`-Eigenschaft zugreifen, die die Funktion des Endpunkts entgegennimmt: - -```ts title="src/pages/api/[id].json.ts" -import type { APIRoute } from 'astro'; - -const usernames = ["Sarah", "Chris", "Yan", "Elian"] - -export const GET: APIRoute = ({ params, request }) => { - const id = params.id; - return new Response( - JSON.stringify({ - name: usernames[id] - }) - ) -} - -export function getStaticPaths() { - return [ - { params: { id: "0"} }, - { params: { id: "1"} }, - { params: { id: "2"} }, - { params: { id: "3"} } - ] -} -``` - -Dies generiert vier JSON-Endpunkte zum Erstellungszeitpunkt: `/api/0.json`, `/api/1.json`, `/api/2.json` und `/api/3.json`. Dynamisches Routing funktioniert bei Endpunkten genauso wie mit Seiten, aber da der Endpunkt eine Funktion statt einer Komponente ist, werden [props](/de/reference/api-reference/#datenübergabe-mit-props) nicht unterstützt. - -### `request` - -Alle Endpunkte nehmen eine `request`-Eigenschaft entgegen, allerdings hast du im statischen Modus nur Zugriff auf `request.url`. Diese enthält die komplette URL des aktuellen Endpunkts und funktioniert genauso wie [Astro.request.url](/de/reference/api-reference/#astrorequest) bei Seiten. - -```ts title="src/pages/request-path.json.ts" -import type { APIRoute } from 'astro'; - -export const GET: APIRoute = ({ params, request }) => { - return new Response(JSON.stringify({ - path: new URL(request.url).pathname - }) - ) -} -``` - -## Server-Endpunkte (API-Routen) - -Alles, was bei den Endpunkten für statische Dateien beschrieben wurde, kann auch im SSR-Modus verwendet werden: Dateien können eine `GET`-Funktion exportieren, die ein [Context-Objekt](/de/reference/api-reference/#endpunkt-kontext) mit ähnlichen Eigenschaften wie die globale `Astro`-Variable entgegennimmt. - -Im Gegensatz zum `static`-Modus werden die Endpunkte bei der Konfiguration des `server`-Modus jedoch erst erzeugt, wenn eine Anfrage für sie empfangen wird. Dies ermöglicht den Zugriff auf neue Funktionen, die zum Erstellungszeitpunkt nicht verfügbar sind, und erlaubt es dir, API-Routen zu erstellen, die auf Anfragen warten und ihren Code zur Laufzeit in einer sicheren Server-Umgebung ausführen. - - - -:::note -Stelle sicher, dass du [SSR aktivierst](/de/guides/on-demand-rendering/), bevor du diese Beispiele ausprobierst. -::: - -Server-Endpunkte können auf `params` zugreifen, ohne `getStaticPaths` zu exportieren, und sie können ein [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)-Objekt zurückgeben, welches dir ermöglicht, Statuscodes und Header zu setzen: - -```js title="src/pages/[id].json.js" -import { getProduct } from '../db'; - -export async function GET({ params }) { - const id = params.id; - const product = await getProduct(id); - - if (!product) { - return new Response(null, { - status: 404, - statusText: 'Not found' - }); - } - - return new Response( - JSON.stringify(product), { - status: 200, - headers: { - "Content-Type": "application/json" - } - } - ); -} -``` - -Diese Funktion wird jede Anfrage beantworten, deren Adresse zur dynamischen Route passt. Wenn wir zum Beispiel zu `/helmet.json` navigieren, wird `params.id` den Wert `helmet` haben. Wenn in der Produktdatenbank `helmet` existiert, wird der Endpunkt ein `Response`-Objekt erzeugen, um mit JSON und einem erfolgreichen [HTTP-Statuscode](https://developer.mozilla.org/en-US/docs/Web/API/Response/status) zu antworten. Ansonsten wird ein anderes `Response`-Objekt erzeugt, um mit einem `404`-Fehler zu antworten. - -Im SSR-Modus benötigen bestimmte Anbieter die Kopfzeile `Content-Type`, um ein Bild zurückzugeben. In diesem Fall verwende ein `Response`-Objekt, um eine `headers`-Eigenschaft anzugeben. Zum Beispiel, um ein binäres `.png` Bild zu erzeugen: - -```ts title="src/pages/astro-logo.png.ts" -export async function GET({ params, request }) { - const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); - const buffer = Buffer.from(await response.arrayBuffer()); - return new Response(buffer, { - headers: { "Content-Type": "image/png" }, - }); -} -``` - -### HTTP-Methoden - -Zusätzlich zur Funktion `GET` kannst du Funktionen mit den Namen aller möglichen [HTTP-Methoden](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) exportieren. Wenn eine Anfrage eingeht, prüft Astro die Methoden und ruft die entsprechende Funktion auf. - -Du kannst auch eine Funktion `all` exportieren, die alle Methoden abdeckt, die keine eigene Funktion haben. Falls eine Anfrage eintrifft, die zu keiner exportierten Methode passt, wird diese mit einer Weiterleitung zur [404-Seite](/de/basics/astro-pages/#benutzerdefinierte-404-fehlerseite) beantwortet. - -```ts title="src/pages/methods.json.ts" -export const GET: APIRoute = ({ params, request }) => { - return new Response(JSON.stringify({ - message: "Das war ein GET!" - }) - ) -} - -export const POST: APIRoute = ({ request }) => { - return new Response(JSON.stringify({ - message: "Das war ein POST!" - }) - ) -} - -export const DELETE: APIRoute = ({ request }) => { - return new Response(JSON.stringify({ - message: "Das war ein DELETE!" - }) - ) -} - -export const ALL: APIRoute = ({ request }) => { - return new Response(JSON.stringify({ - message: `Das war ein ${request.method}!` - }) - ) -} -``` - - - -### `request` - -Im `SSR`-Modus gibt die `request`-Eigenschaft ein vollwertiges [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)-Objekt zurück, welches die aktuelle Anfrage enthält. Das erlaubt dir, Daten entgegenzunehmen und Header zu überprüfen. - -```ts title="src/pages/test-post.json.ts" -export const POST: APIRoute = async ({ request }) => { - if (request.headers.get("Content-Type") === "application/json") { - const body = await request.json(); - const name = body.name; - return new Response(JSON.stringify({ - message: "Dein Name war: " + name - }), { - status: 200 - }) - } - return new Response(null, { status: 400 }); -} -``` - -### Umleitungen - -Der Endpunkt-Kontext exportiert eine `redirect()`-Hilfsfunktion ähnlich wie `Astro.redirect`: - -```js title="src/pages/links/[id].js" {14} -import { getLinkUrl } from '../db'; - -export async function GET({ params, redirect }) { - const { id } = params; - const link = await getLinkUrl(id); - - if (!link) { - return new Response(null, { - status: 404, - statusText: 'Not found' - }); - } - - return redirect(link, 307); -} -``` diff --git a/src/content/docs/de/guides/environment-variables.mdx b/src/content/docs/de/guides/environment-variables.mdx deleted file mode 100644 index 9fc6c4dba501e..0000000000000 --- a/src/content/docs/de/guides/environment-variables.mdx +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Umgebungsvariablen verwenden -description: Lerne, wie du Umgebungsvariablen in einem Astro-Projekt verwenden kannst. -sidebar: - label: Umgebungsvariablen -i18nReady: true ---- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';import ReadMore from '~/components/ReadMore.astro'; - -Astro bietet dir Zugang zu [Vites eingebauter Unterstützung für Umgebungsvariablen](#vites-integrierte-unterstützung) und enthält einige [Standard-Umgebungsvariablen für dein Projekt](#standard-umgebungsvariablen), mit denen du auf Konfigurationswerte für dein aktuelles Projekt zugreifen kannst (z.B. `site`, `base`), ob dein Projekt in Entwicklung oder Produktion läuft und mehr. - -Astro bietet auch eine Möglichkeit, [Ihre Umgebungsvariablen mit Typsicherheit zu verwenden und zu organisieren](#typsichere-umgebungsvariablen). Sie ist für die Verwendung innerhalb des Astro-Kontexts verfügbar (z. B. Astro-Komponenten, Routen und Endpunkte, UI-Framework-Komponenten, Middleware) und wird mit [einem Schema in deiner Astro-Konfiguration](/de/reference/configuration-reference/#env) verwaltet. - -## Vite's integrierte Unterstützung - -Astro nutzt die in Vite eingebaute Unterstützung für Umgebungsvariablen, die zum Zeitpunkt des Builds statisch ersetzt werden, und lässt dich [mit einer seiner Methoden](https://vite.dev/guide/env-and-mode.html) mit ihnen arbeiten. - -Beachte, dass zwar _alle_ Umgebungsvariablen im serverseitigen Code verfügbar sind, aber aus Sicherheitsgründen nur Umgebungsvariablen mit dem Präfix `PUBLIC_` im clientseitigen Code verfügbar sind. - -```ini title=".env" -SECRET_PASSWORD=password123 -PUBLIC_ANYBODY=there -``` - -In diesem Beispiel ist `PUBLIC_ANYBODY` (zugänglich über `import.meta.env.PUBLIC_ANYBODY`) sowohl im Server- als auch im Client-Code verfügbar, während `SECRET_PASSWORD` (zugänglich über `import.meta.env.SECRET_PASSWORD`) nur serverseitig verfügbar ist. - -:::caution -`.env`-Dateien werden nicht innerhalb von [Konfigurations­dateien](#in-der-astro-konfigurationsdatei) geladen. -::: - -### IntelliSense für TypeScript - -Standardmäßig bietet Astro eine Typdefinition für `import.meta.env` in `astro/client.d.ts`. - -Du kannst zwar weitere benutzerdefinierte Umgebungsvariablen in `.env.[mode]`-Dateien definieren, aber du möchtest vielleicht TypeScript IntelliSense für benutzerdefinierte Umgebungsvariablen nutzen, denen das Präfix `PUBLIC_` vorangestellt ist. - -Um das zu erreichen, kannst du eine `env.d.ts` in `src/` erstellen und `ImportMetaEnv` wie folgt konfigurieren: - -```ts title="src/env.d.ts" -interface ImportMetaEnv { - readonly DB_PASSWORD: string; - readonly PUBLIC_POKEAPI: string; - // mehr Umgebungsvariablen... -} - -interface ImportMeta { - readonly env: ImportMetaEnv; -} -``` - -## Standard-Umgebungsvariablen - -Astro enthält ein paar Umgebungsvariablen, die sofort einsatzbereit sind: - -- `import.meta.env.MODE`: Der Modus, in dem deine Website läuft. Das ist `development`, wenn du `astro dev` benutzt und `production`, wenn du `astro build` benutzt. -- `import.meta.env.PROD`: `true`, wenn deine Website im Produktionsmodus läuft; andernfalls `false`. -- `import.meta.env.DEV`: `true`, wenn deine Website im Entwicklungsmodus läuft; sonst `false`. Immer das Gegenteil von `import.meta.env.PROD`. -- `import.meta.env.BASE_URL`: Die Basis-URL, von der aus deine Seite geladen wird. Sie wird durch die [Konfigurations­option `base`](/de/reference/configuration-reference/#base) bestimmt. -- `import.meta.env.SITE`: Diese wird auf [die Option `site`](/de/reference/configuration-reference/#site) gesetzt, die in der `astro.config` deines Projekts angegeben ist. -{/* TODO: update anchor link (#buildassetsprefix) when the linked file has been updated */} -- `import.meta.env.ASSETS_PREFIX`: Das Präfix für die von Astro erzeugten Asset-Links, wenn die [Konfigurations­option `build.assetsPrefix`](/de/reference/configuration-reference/) gesetzt ist. Damit können Asset-Links erstellt werden, die nicht von Astro verarbeitet werden. - -Verwende sie wie jede andere Umgebungsvariable. - -```ts utils.ts -const isProd = import.meta.env.PROD; -const isDev = import.meta.env.DEV; -``` - -## Umgebungsvariablen definieren - -### `.env`-Dateien - -Umgebungsvariablen können aus `.env`-Dateien in deinem Projektverzeichnis geladen werden. - -Erstelle einfach eine `.env` Datei im Projektverzeichnis und füge ihr einige Variablen hinzu. - -```ini title=".env" -# Diese Funktion ist nur verfügbar, wenn sie auf dem Server ausgeführt wird! -DB_PASSWORD="foobar" -# Das wird überall verfügbar sein! -PUBLIC_POKEAPI="https://pokeapi.co/api/v2" -``` - -Du kannst auch `.production`, `.development` oder einen benutzerdefinierten Modusnamen an den Dateinamen selbst anhängen (z.B. `env.testing`, `.env.staging`). So kannst du verschiedene Umgebungsvariablen zu verschiedenen Zeiten verwenden. - -Die Befehle `astro dev` und `astro build` sind standardmäßig auf die Modi `"development"` bzw. `"production"` eingestellt. Du kannst diese Befehle mit dem [`--mode` flag](/de/reference/cli-reference/#--mode-string) ausführen, um einen anderen Wert für `mode` zu übergeben und die passende `.env` Datei zu laden. - -So kannst du den Entwicklungsserver betreiben oder deine Website mit verschiedenen APIs verbinden: - -```bash -# Betreibe den Entwicklungsserver, der mit einer „Staging“-API verbunden ist -astro dev --mode staging - -# Baue eine Website, die sich mit einer „Produktions“-API mit zusätzlichen Debug-Informationen verbindet -astro build --devOutput - -# Erstelle eine Website, die sich mit einer „Test“-API verbindet -astro build --mode testing -``` - -Mehr über `.env`-Dateien findest du in der [Vite-Dokumentation](https://vite.dev/guide/env-and-mode.html#env-files). - -### In der Astro-Konfigurationsdatei - -Astro wertet die Konfigurations­dateien aus, bevor es deine anderen Dateien lädt. Das bedeutet, dass du mit `import.meta.env` in `astro.config.mjs` nicht auf Umgebungsvariablen zugreifen kannst, die in `.env`-Dateien gesetzt wurden. - -Du kannst `process.env` in einer Konfigurationsdatei verwenden, um auf andere Umgebungsvariablen zuzugreifen, wie z.B. die [von der CLI gesetzten](#verwendung-der-kommandozeilenschnittstelle-cli). - -Du kannst auch [Vite's `loadEnv` helper](https://main.vite.dev/config/#using-environment-variables-in-config) verwenden, um `.env` Dateien manuell zu laden. - -```js title="astro.config.mjs" -import { loadEnv } from "vite"; -const { SECRET_PASSWORD } = loadEnv(process.env.NODE_ENV, process.cwd(), ""); -``` - -:::note -Mit `pnpm` kannst du keine Module importieren, die nicht direkt in deinem Projekt installiert sind. Wenn du `pnpm` verwendest, musst du `vite` installieren, um den `loadEnv`-Helper zu benutzen. -```sh -pnpm add vite --save-dev -``` -::: - -### Verwendung der Kommandozeilen­schnittstelle (CLI) - -Du kannst auch Umgebungsvariablen hinzufügen, während du dein Projekt ausführst: - - - - ```shell - POKEAPI=https://pokeapi.co/api/v2 yarn run dev - ``` - - - ```shell - POKEAPI=https://pokeapi.co/api/v2 npm run dev - ``` - - - ```shell - POKEAPI=https://pokeapi.co/api/v2 pnpm run dev - ``` - - - -## Abrufen von Umgebungsvariablen - -Auf Umgebungsvariablen in Astro wird mit import.meta.env zugegriffen, wobei die [in ES2020 hinzugefügte Funktion import.meta](https://tc39.es/ecma262/2020/#prod-ImportMeta) anstelle von process.env verwendet wird. - -Verwende zum Beispiel `import.meta.env.PUBLIC_POKEAPI`, um die Umgebungsvariable `PUBLIC_POKEAPI` zu erhalten. - -```js /(?Entwickelst du einen Adapter? Siehe, wie man [einen Adapter mit `astro:env` kompatibel macht](/de/reference/adapter-reference/#envgetsecret). - -### Grundlegende Verwendung - -#### Definiere dein Schema - -Um ein Schema zu konfigurieren, füge die Option `env.schema` zu deiner Astro-Konfiguration hinzu: - -```js title="astro.config.mjs" ins={4-8} -import { defineConfig } from 'astro/config' - -export default defineConfig({ - env: { - schema: { - // ... - } - } -}) -``` - -Du kannst dann [Variablen als String, Zahl, Enum oder Boolean](#datentypen) mit dem `envField`-Helper registrieren. Definiere die [Art der Umgebungsvariable](#variablentypen), indem du einen `context` (Client oder Server) und einen `access` (geheim oder öffentlich) für jede Variable angibst, und übergebe alle zusätzlichen Eigenschaften wie `optional` oder `default` in einem Objekt: - -```js title="astro.config.mjs" ins="envField" -import { defineConfig, envField } from 'astro/config' - -export default defineConfig({ - env: { - schema: { - API_URL: envField.string({ context: "client", access: "public", optional: true }), - PORT: envField.number({ context: "server", access: "public", default: 4321 }), - API_SECRET: envField.string({ context: "server", access: "secret" }), - } - } -}) -``` - -Die Typen werden für dich generiert, wenn du `astro dev` oder `astro build` ausführst. Du kannst aber auch `astro sync` ausführen, um nur Typen zu generieren. - -#### Verwende Variablen aus deinem Schema - -Importiere und verwende deine definierten Variablen aus dem entsprechenden `/client` oder `/server` Modul: - -```astro ---- -import { API_URL } from "astro:env/client" -import { API_SECRET_TOKEN } from "astro:env/server" - -const data = await fetch(`${API_URL}/users`, { - method: "GET", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${API_SECRET_TOKEN}` - }, -}) ---- - - -``` - -### Variablentypen - -Es gibt drei Arten von Umgebungsvariablen, die durch die Kombination von `context` (Client oder Server) und `access` (geheim oder öffentlich) in deinem Schema bestimmt werden: - -- **Öffentliche Client-Variablen**: Diese Variablen landen sowohl in deinem endgültigen Client- als auch in deinem Server-Bundle und können sowohl vom Client als auch vom Server über das Modul `astro:env/client` aufgerufen werden: - - ```js - import { API_URL } from "astro:env/client" - ``` - -- **Öffentliche Servervariablen**: Diese Variablen landen in deinem endgültigen Server-Bundle und können auf dem Server über das Modul `astro:env/server` aufgerufen werden: - - ```js - import { PORT } from "astro:env/server" - ``` - -- **Geheime Servervariablen**: Diese Variablen sind nicht Teil deines endgültigen Pakets und können auf dem Server über das Modul `astro:env/server` abgerufen werden: - - ```js - import { API_SECRET } from "astro:env/server" - ``` - - Standardmäßig werden Secrets nur zur Laufzeit überprüft. Du kannst die Validierung privater Variablen beim Start aktivieren, indem du [`validateSecrets: true`](/de/reference/configuration-reference/#envvalidatesecrets) konfigurierst. - -:::note -**Geheime Client-Variablen** werden nicht unterstützt, da es keine sichere Möglichkeit gibt, diese Daten an den Client zu senden. Daher ist es nicht möglich, sowohl `context: "client"` und `access: "secret"` in deinem Schema zu konfigurieren. -::: - -### Datentypen - -Derzeit werden vier Datentypen unterstützt: Strings, Zahlen, Enums und Booleans: - -```js -import { envField } from "astro/config" - -envField.string({ - // Kontext & Zugang - optional: true, - default: "foo", -}) - -envField.number({ - // Kontext & Zugang - optional: true, - default: 15, -}) - -envField.boolean({ - // Kontext & Zugang - optional: true, - default: true, -}) - -envField.enum({ - // Kontext & Zugang - values: ['foo', 'bar', 'baz'], - optional: true, - default: 'baz', -}) -``` - -Eine vollständige Liste der Validierungsfelder findest du in der [`envField` API-Referenz](/de/reference/configuration-reference/#envschema). - -### Dynamisches Abrufen von Secrets - -Obwohl du dein Schema definiert hast, möchtest du vielleicht den Rohwert eines bestimmten Secrets abrufen oder Secrets abrufen, die nicht in deinem Schema definiert sind. In diesem Fall kannst du `getSecret()` verwenden, das von `astro:env/server` exportiert wird. - -```js -import { - FOO, // boolean - getSecret -} from 'astro:env/server' - -getSecret('FOO') // string | undefined -``` - -Erfahre mehr in [der API-Referenz](/de/reference/modules/astro-env/#getsecret). - -### Einschränkungen - -1. `astro:env` ist ein virtuelles Modul, das heißt, es kann nur innerhalb des Astro-Kontexts verwendet werden. Zum Beispiel kannst du es in - - - Middlewares - - Astro-Routen und Endpunkte - - Astro-Komponenten - - Framework-Komponenten - - Modules - - verwenden. - - Du kannst sie im Folgenden nicht verwenden und musst auf `process.env` zurückgreifen: - - - `astro.config.mjs` - - Skripte - -2. [`@astrojs/cloudflare`](/de/guides/integrations-guide/cloudflare/) unterscheidet sich ein wenig von anderen Adaptern. Die Umgebungsvariablen sind auf die Anfrage beschränkt, im Gegensatz zu Node.js, wo sie global sind. - - Das bedeutet, dass du Geheimnisse immer innerhalb des Anfragebereichs verwenden musst: - - ```js title="src/middleware.ts" - import { defineMiddleware } from "astro:middleware" - import { FOO, getSecret } from "astro:env" - - console.log(FOO) // undefined - console.log(getSecret("FOO")) // undefined - - export const onRequest = defineMiddleware((context, next) => { - console.log(FOO) // boolean - console.log(getSecret("FOO")) // string - - return next() - }) - ``` diff --git a/src/content/docs/de/guides/fonts.mdx b/src/content/docs/de/guides/fonts.mdx deleted file mode 100644 index 83a27b71a27ca..0000000000000 --- a/src/content/docs/de/guides/fonts.mdx +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Eigene Schriftarten verwenden -description: >- - Möchtest du einem Astro-Projekt einige benutzerdefinierte Schriftarten - hinzufügen? Verwende dafür Google Fonts mit Fontsource oder füge eine - Schriftart deiner Wahl hinzu. -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; - - -Astro unterstützt alle gängigen Möglichkeiten zum Hinzufügen benutzerdefinierter Schriftarten zu deinem Website-Design. Diese Anleitung zeigt zwei verschiedene Möglichkeiten, Webfonts in dein Projekt einzubinden. - -## Verwenden einer lokalen Schriftdatei - -Nehmen wir an, du hast eine Schriftdatei namens `DistantGalaxy.woff`. - -1. Platziere die Schriftdatei im `public/fonts/`-Verzeichnis. - -2. Füge deinem CSS-Code eine `@font-face`-Regel hinzu. Du kannst dazu entweder eine global importierte `.css`-Datei verwenden, oder sie in einem ` - ``` - -## Verwenden von Fontsource - -Das [Fontsource](https://fontsource.org/)-Projekt ermöglicht die Verwendung von Google Fonts und anderen Open Source-Schriftarten. Es stellt npm-Pakete bereit, um die gewünschten Schriftarten zu installieren. - -1. Finde die Schriftart, die du benutzen möchtest, im [Fontsource-Katalog](https://fontsource.org/fonts). Für dieses Beispiel werden wir [Twinkle Star](https://fontsource.org/fonts/twinkle-star) nutzen. - -2. Installiere das Paket deiner gewählten Schriftart. - - - - ```shell - npm install @fontsource/twinkle-star - ``` - - - ```shell - pnpm add @fontsource/twinkle-star - ``` - - - ```shell - yarn add @fontsource/twinkle-star - ``` - - - - :::tip - Du findest den korrekten Paketnamen im Abschnitt "Quick Installation" jeder Schriftarten-Seite auf der Fontsource-Website. Er beginnt immer mit `@fontsource/`, gefolgt vom Namen der Schriftart. - ::: - -3. Importiere das Schriftarten-Paket in dein Layout oder die Komponente, in der du es benutzen möchtest. Normalerweise solltest du dies in einer gemeinsamen Layoutkomponente tun, um sicherzustellen, dass die Schriftart überall auf deiner Website verfügbar ist. - - Der Import fügt automatisch die erforderliche `@font-face`-Regel hinzu, die zum Einrichten der Schriftart benötigt wird. - - ```astro - --- - // src/layouts/BaseLayout.astro - import '@fontsource/twinkle-star'; - --- - ``` - -4. Benutze die `font-family`-Eigenschaft so, wie es auf der jeweiligen Schriftarten-Seite der Fontsource-Website beschrieben ist. Du kannst sie überall dort verwenden, wo du CSS-Code in deinem Astro-Projekt schreiben kannst. - - ```css - h1 { - font-family: "Twinkle Star", cursive; - } - ``` - -## Schriftarten mit Tailwind hinzufügen - -Falls du die [Tailwind-Integration](/de/guides/integrations-guide/tailwind/) verwendest, kannst du entweder eine [`@font-face`-Regel für eine lokale Schriftart](#verwenden-einer-lokalen-schriftdatei) hinzufügen oder die [`Import`-Strategie von Fontsource](#verwenden-von-fontsource) verwenden, um die Schriftart zu registrieren. - -Um deine Schriftart in Tailwind zu registrieren: - -1. Folge einer der Anleitungen oben, lasse aber den Schritt, die `font-family` in deinem CSS-Code hinzuzufügen, aus. -2. Füge den Schriftartnamen in der `tailwind.config.mjs` Datei hinzu. - - Dieses Beispiel ergänzt die Serifenlose-Schriftfamilie um `Inter`, mit Standard-Ersatzschriftarten von Tailwind CSS. - - ```js title="tailwind.config.mjs" ins={1,8-10} - import defaultTheme from 'tailwindcss/defaultTheme' - - /** @type {import('tailwindcss').Config} */ - export default { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: { - fontFamily: { - sans: ['Inter', ...defaultTheme.fontFamily.sans], - }, - }, - }, - plugins: [], - } - ``` - - Durch diese Änderung wird der gesamte serifenlose Text (der Standard mit Tailwind) deines Projekts die von dir ausgewählte Schriftart verwenden. Die `font-sans` Klasse verwendet auch die Inter Schriftart. - -Für mehr Informationen, folge [Tailwinds Dokumentation zum Hinzufügen benutzerdefinierter Schriftfamilien](https://tailwindcss.com/docs/font-family#using-custom-values). - -## Weitere Ressourcen - -- Erfahre, wie Web-Schriftarten funktionieren: Die [Web Fonts-Anleitung von MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) bietet eine Einführung in das Thema. - -- Generiere CSS für deine Schriftart mit dem [Font Squirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator). diff --git a/src/content/docs/de/guides/framework-components.mdx b/src/content/docs/de/guides/framework-components.mdx deleted file mode 100644 index f84997cae2fd1..0000000000000 --- a/src/content/docs/de/guides/framework-components.mdx +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Framework-Komponenten -description: 'Lerne, wie du React, Svelte, etc. nutzen kannst.' -i18nReady: true ---- -Erstelle deine Astro-Website, ohne dein favorisiertes Komponenten-Framework aufzugeben. - -Astro unterstützt eine Vielzahl von beliebten Frameworks wie [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) und [Lit](https://lit.dev/). - -## Integrationen installieren - -Astro kommt mit optionalen Integrationen für React, Preact, Svelte, Vue, SolidJS, AlpineJS und Lit. Beliebig viele dieser Astro-Integrationen können in deinem Projekt installiert und konfiguriert werden. - -Um Astro für die Verwendung dieser Frameworks zu konfigurieren, installiere zunächst die Integration mit ihren Abhängigkeiten: - -```bash -npm install --save-dev @astrojs/react react react-dom -``` - -Importiere anschließend ihre Funktion und füge sie deiner Liste von Integrationen in `astro.config.mjs` hinzu: - -```js title="astro.config.mjs" ins={3} ins=/(? - -

Nutze React-Komponenten direkt in Astro!

- - - -``` - -Standardmäßig werden die Framework-Komponenten als statisches HTML gerendert. Dies ist hilfreich für Template-Komponenten, die nicht interaktiv sind. Dadurch wird verhindert, dass unnötiges JavaScript an den Client gesendet wird. - -## Interaktive Komponenten hydratisieren - -Eine Framework-Komponente kann interaktiv gemacht (hydratisiert) werden, indem eine der [`client:*`-Direktiven](/de/reference/directives-reference/#client-directives) verwendet wird. Es handelt sich dabei um Komponenten-Attribute, die festlegen, wann der JavaScript-Code der Komponente an den Browser gesendet werden soll. - -Bei allen Client-Direktiven außer `client:only` wird deine Komponente zuerst auf dem Server gerendert, um statisches HTML zu erzeugen. Der JavaScript-Code der Komponente wird entsprechend der Direktive deiner Wahl an den Browser gesendet. Die Komponente wird dann hydratisiert und wird interaktiv. - -```astro title="src/pages/interactive-components.astro" /client:\S+/ ---- -// Beispiel: Framework-Komponenten im Browser hydratisieren. -import InteractiveButton from '../components/InteractiveButton.jsx'; -import InteractiveCounter from '../components/InteractiveCounter.jsx'; -import InteractiveModal from "../components/InteractiveModal.svelte" ---- - - - - - - - - -``` - -Das zum Rendern der Komponente benötigte JavaScript-Framework (React, Svelte etc.) wird gemeinsam mit dem Komponenten-JavaScript an den Browser gesendet. Falls zwei oder mehr Komponenten auf einer Seite dasselbe Framework nutzen, wird das Framework nur einmal gesendet. - -:::note[Barrierefreiheit] -Die meisten Framework-spezifischen Patterns für Barrierefreiheit sollten genauso funktionieren, wenn sie in Astro verwendet werden. Vergewissere dich, dass du eine client-Direktive verwendest, die sicherstellt, dass das JavaScript für die Barrierefreiheit korrekt geladen und zur richtigen Zeit ausgeführt wird! -::: - -### Verfügbare Hydratisierungs-Direktiven - -Es sind einige Hydratisierungs-Direktiven für UI-Framework-Komponenten verfügbar: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` und `client:only={FRAMEWORK}`. - -📚 Sieh dir unsere [Direktiven-Referenz](/de/reference/directives-reference/#client-directives) für eine vollständige Beschreibung der Direktiven und deren Nutzung an. - -## Frameworks mischen - -Du kannst Komponenten aus verschiedenen Frameworks in dieselbe Astro-Komponente importieren und dort rendern. - -```astro title="src/pages/mixing-frameworks.astro" ---- -// Beispiel: Mehrere Framework-Komponenten auf der gleichen Seite verwenden. -import MyReactComponent from '../components/MyReactComponent.jsx'; -import MySvelteComponent from '../components/MySvelteComponent.svelte'; -import MyVueComponent from '../components/MyVueComponent.vue'; ---- -
- - - -
-``` - -:::caution -Nur **Astro**-Komponenten (`.astro`) können Komponenten von verschiedenen Frameworks enthalten. -::: - -## Props an Framework-Komponenten durchreichen - -Du kannst Props von Astro-Komponenten an Framework-Komponenten durchreichen: - -```astro title="src/pages/frameworks-props.astro" ---- -import TodoList from '../components/TodoList.jsx'; -import Counter from '../components/Counter.svelte'; ---- -
- - -
-``` - -:::caution[Funktionen als Props durchreichen] -Du kannst eine Funktion als Prop an eine Framework-Komponente durchreichen, jedoch funktioniert dies nur mit serverseitigen Rendering. Versuchst du eine Funktion in einer hydratisierten Komponente zu nutzen (z.B. als Event-Handler), wird ein Fehler auftreten. - -Das liegt daran, dass Funktionen von Astro nicht _serialisiert_ (vom Server zum Client übertragen) werden können. -::: - -## Kinder an Framework-Komponenten durchreichen - -Innerhalb einer Astro-Komponente **kannst** du Kinder an die Framework-Komponenten durchreichen. Jedes Framework hat dabei seine eigene Vorgehensweise, wie die Kinder referenziert werden sollen: React, Preact und Solid nutzen eine spezielle `children`-Prop, wohingegen Svelte und Vue ein ``-Element nutzen. - -```astro title="src/pages/component-children.astro" {5} ---- -import MyReactSidebar from '../components/MyReactSidebar.jsx'; ---- - -

Hier ist eine Sidebar mit etwas Text und einem Button

- -``` - -Zusätzlich kannst du [Benannte Slots](/de/basics/astro-components/#benannte-slots) verwenden, um spezifische Kinder zu gruppieren. - -Für React, Preact und Solid werden die Slots in Eigenschaften auf oberster Ebene konvertiert. Slot-Namen in `kebab-case` werden in `camelCase` konvertiert. - -```astro title="src/pages/named-slots.astro" /slot="(.*)"/ ---- -import MySidebar from '../components/MySidebar.jsx'; ---- - -

Menü

-

Hier ist eine Sidebar mit etwas Text und einem Button

- - -``` - -```jsx /{props.(title|socialLinks)}/ -// src/components/MySidebar.jsx -export default function MySidebar(props) { - return ( - - ) -} -``` - -In Svelte und Vue können diese Slots durch ein ``-Element mit `name`-Attribut referenziert werden. Slot-Namen in `kebab-case` bleiben erhalten. - -```jsx /slot name="(.*)"/ -// src/components/MySidebar.svelte - -``` - -## Framework-Komponenten verschachteln - -Innerhalb einer Astro-Datei können Framework-Komponenten ebenfalls hydratisierte Komponenten sein. Das bedeutet, dass du rekursiv Komponenten von beliebigen dieser Frameworks ineinander verschachteln kannst. - -```astro title="src/pages/nested-components.astro" {10-11} ---- -import MyReactSidebar from '../components/MyReactSidebar.jsx'; -import MyReactButton from '../components/MyReactButton.jsx'; -import MySvelteButton from '../components/MySvelteButton.svelte'; ---- - - -

Hier ist eine Sidebar mit etwas Text und einem Button

-
- - -
- -``` - -:::caution -Beachte: Innerhalb von Framework-Komponenten-Dateien selbst (z.B. `.jsx`, `.svelte`) kannst du keine Frameworks mischen. -::: - -Dies erlaubt es dir, gesamte "Anwendungen" mit deinem bevorzugten JavaScript-Framework zu bauen und sie durch eine Eltern-Komponente zu einer Astro-Seite zu rendern. - -:::note -Astro-Komponenten werden immer als statisches HTML gerendet, sogar wenn sie hydratisierte Framework-Komponenten enthalten. Das bedeutet, dass du nur Props übergeben kannst, die kein HTML-Rendering verursachen. Es ist z.B. nicht möglich, Reacts "Render Props" aus einer Astro-Komponente heraus an Framework-Komponenten zu übergeben, da Astro-Komponenten nicht das clientseitige Laufzeitverhalten zur Verfügung stellen, welches dafür benötigt wird. Nutze stattdessen Benannte Slots. -::: - -## Kann ich Astro-Komponenten innerhalb meiner Framework-Komponenten verwenden? - -Jede UI-Framework-Komponente wird zu einer "Astro-Insel" dieses Frameworks. Solche Komponenten müssen komplett in Code geschrieben werden, der für das jeweilige Framework gültig ist, und können nur ihre eigenen Importe und Pakete verwenden. Du kannst keine `.astro`-Komponenten in eine UI-Framework-Komponente (z.B. `.jsx` oder `.svelte`) importieren. - -Du kannst allerdings das [Astro-``-Muster](/de/basics/astro-components/#slots) **innerhalb einer `.astro`-Komponente** verwenden, um statische Inhalte, die von Astro-Komponenten erzeugt wurden, als Kinder an deine Framework-Komponenten zu übergeben. - -```astro title="src/pages/astro-children.astro" {6} ---- -import MyReactComponent from '../components/MyReactComponent.jsx'; -import MyAstroComponent from '../components/MyAstroComponent.astro'; ---- - - - -``` - -## Kann ich Astro-Komponenten hydratisieren? - -Wenn du versuchst, eine Astro-Komponente mit einer `client:`-Direktive zu hydratisieren, wirst du einen Fehler erhalten. - -[Astro-Komponenten](/de/basics/astro-components/) sind reine HTML-Komponenten ohne clientseitigen Laufzeit-Code. Jedoch kannst du ein ` - - - -
- - -

- Lorem ipsum -

-
- - -``` -` -## Intellisense für TypeScript - -Die `@astrojs/alpine`-Integration fügt `Alpine` zum globalen `window`-Objekt hinzu. Für die IDE-Autovervollständigung, füge das Folgende zu `src/env.d.ts` hinzu: - -```ts title="src/env.d.ts" -interface Window { - Alpine: import('alpinejs').Alpine; -} -``` - -## Beispiele - -* Das [Astro-Alpine.js-Beispiel](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) zeigt, wie man Alpine.js in einem Astro-Projekt verwendet. - -[astro-integration]: /de/guides/integrations-guide/ - -[astro-ui-frameworks]: /de/guides/framework-components/#using-framework-components diff --git a/src/content/docs/de/guides/integrations-guide/index.mdx b/src/content/docs/de/guides/integrations-guide/index.mdx deleted file mode 100644 index 0f6d58807b734..0000000000000 --- a/src/content/docs/de/guides/integrations-guide/index.mdx +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Integrationen nutzen -i18nReady: true ---- -import IntegrationsNav from '~/components/IntegrationsNav.astro'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - - - -**Astro-Integrationen** ermöglichen es dir, mit nur wenigen Zeilen Code neue Funktionen und Verhaltensweisen zu deinem Projekt hinzuzufügen. Du kannst eine Integration selbst schreiben, eine offizielle Integration verwenden oder Integrationen aus der Community nutzen. - -Integrationen können… - -- React, Vue, Svelte, Solid und andere beliebte UI-Frameworks nutzbar machen. -- Tools wie Tailwind und Partytown mit wenigen Zeilen Code integrieren. -- Neue Features zu deinem Projekt hinzufügen, wie z.B. automatische Sitemap-Generierung. -- Eigenen Code schreiben, der sich in den Erzeugungsprozess, den Entwicklungs-Server und mehr einhängen lässt. - -## Offizielle Integrationen - - - -## Automatische Einrichtung von Integrationen - -Astro stellt ein `astro add`-Kommando zur Verfügung, um die Einrichtung von Integrationen zu automatisieren. - -:::caution -Wir werden immer um Bestätigung bitten, bevor wir deine Dateien aktualisieren. Jedoch ist es empfehlenswert, ein Versionskontroll-Backup zu haben. -::: - -Führe das `astro add`-Kommando mit dem Paketmanager deiner Wahl aus, und unser automatischer Integrations-Wizard wird deine Konfigurationsdatei aktualisieren und alle notwendigen Abhängigkeiten installieren. - - - - ```shell - npx astro add react - ``` - - - ```shell - pnpm astro add react - ``` - - - ```shell - yarn astro add react - ``` - - - -Es ist sogar möglich, mehrere Integrationen gleichzeitig zu konfigurieren! - - - - ```shell - npx astro add react tailwind partytown - ``` - - - ```shell - pnpm astro add react tailwind partytown - ``` - - - ```shell - yarn astro add react tailwind partytown - ``` - - - -:::note[Behandlung von Abhängigkeiten deiner Integrationen] -Solltest du eine Warnung wie `Cannot find package '[package-name]'` nach dem Hinzufügen einer Integration erhalten, hat dein Paketmanager vermutlich nicht die zugehörigen [Peer Dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) installiert. Um diese fehlenden Abhängigkeiten zu installieren, führe einfach `npm install [package-name]` aus. -::: - -## Integrationen nutzen - -Astro-Integrationen werden immer über die `integrations`-Option in deiner `astro.config.mjs`-Datei konfiguriert. - -Es gibt drei übliche Wege, um eine Integration in dein Astro-Projekt zu importieren: -1. Eine Integration über ein npm-Paket installieren. -2. Deine eigene Integration über eine lokale Datei innerhalb deines Projekts importieren. -3. Deine eigene Integration direkt in der Konfigurationsdatei schreiben. - -```js -// astro.config.mjs -import {defineConfig} from 'astro/config'; -import installedIntegration from '@astrojs/vue'; -import localIntegration from './my-integration.js'; - -export default defineConfig({ - integrations: [ - // 1. Aus einem installiertem npm-Paket importieren - installedIntegration(), - // 2. Aus einer lokalen JS-Datei importieren - localIntegration(), - // 3. Ein Inline-Objekt - {name: 'namespace:id', hooks: { /* ... */ }}, - ] -}) -``` - -Sieh dir die [Integrations-API](/de/reference/integrations-reference/) an, um mehr darüber zu erfahren, wie du deine eigenen Integrationen erstellen kannst. - -### Benutzerdefinierte Optionen - -Integrationen werden in der Regel als Factory-Funktionen entwickelt, die das Integrations-Objekt zurückliefern. Dadurch kannst du Argumente und Optionen an die Funktion übergeben, um die Integration zu konfigurieren. - -```js -integrations: [ - // Beispiel: Argumente an eine Integration übergeben - sitemap({filter: true}) -] -``` - -### Integrationen aktivieren und deaktivieren - -Integrationen mit `falsy`-Werten werden ignoriert. Dadurch können sie aktiviert oder deaktiviert werden, und man muss sich keine Gedanken über hinterlassene `undefined`- und Boolean-Werte machen. - -```js -integrations: [ - // Beispiel: Keine Sitemap unter Windows erstellen - process.platform !== 'win32' && sitemap() -] -``` - -## Weitere Integrationen entdecken - -Eine Vielzahl von Integrationen, die durch die Community entwickelt werden, können in [Astros Integrations-Verzeichnis](https://astro.build/integrations/) gefunden werden. Folge den dortigen Links, um detaillierte Anleitungen zu ihrer Benutzung und Konfiguration zu erhalten. - -## Eine eigene Integration erstellen - -Astros Integrations-API ist durch Rollup und Vite inspiriert und wurde so gestaltet, dass sie sich für alle vertraut anfühlen sollte, die jemals ein Rollup- oder Vite-Plugin geschrieben haben. - -Sieh dir die [Integrations-API](/de/reference/integrations-reference/) an, um mehr darüber zu erfahren, was Integrationen leisten können und wie du deine eigenen Integrationen erstellen kannst. diff --git a/src/content/docs/de/guides/integrations-guide/preact.mdx b/src/content/docs/de/guides/integrations-guide/preact.mdx deleted file mode 100644 index 8800ae94167fd..0000000000000 --- a/src/content/docs/de/guides/integrations-guide/preact.mdx +++ /dev/null @@ -1,208 +0,0 @@ ---- -type: integration -title: '@astrojs/preact' -description: Lerne wie du die @astrojs/preact Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen. -githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/' -category: renderer -i18nReady: true ---- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Since from '~/components/Since.astro' - -Diese **[Astro-Integration][astro-integration]** ermöglicht serverseitiges Rendering und clientseitige Hydratation deiner [Preact](https://preactjs.com/)-Komponenten. - -## Warum Preact? - -Preact ist eine Bibliothek, mit der du interaktive UI-Komponenten für das Web erstellen kannst. Wenn du interaktive Funktionen auf deiner Website mithilfe von JavaScript erstellen möchtest, bevorzugst du möglicherweise die Verwendung des Komponentenformats anstelle der direkten Verwendung von Browser-APIs. - -Preact ist auch eine gute Wahl, wenn du React bereits verwendet hast. Preact bietet dieselbe API wie React, jedoch in einem viel kleineren 3kB-Paket. Es unterstützt sogar das Rendern vieler React-Komponenten mithilfe der Konfigurationsoption `compat` (siehe unten). - -**Willst du mehr über Preact erfahren, bevor du diese Integration verwendest?**\ -Du findest ein interaktives Tutorial, ["Learn Preact"](https://preactjs.com/tutorial), auf der Preact-Webseite. - -## Installation - -Astro verfügt über einen `astro add`-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die [Integrationen auch manuell installieren](#manuelle-installation). - -Um `@astrojs/preact` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus. - - - - ```sh - npx astro add preact - ``` - - - ```sh - pnpm astro add preact - ``` - - - ```sh - yarn astro add preact - ``` - - - -Sollten dir dabei Probleme begegnen, [melde sie gerne bei uns auf GitHub](https://github.com/withastro/astro/issues) und versuche stattdessen die manuelle Installation. - -### Manuelle Installation - -Installiere zuerst das `@astrojs/preact`-Paket: - - - - ```sh - npm install @astrojs/preact - ``` - - - ```sh - pnpm add @astrojs/preact - ``` - - - ```sh - yarn add @astrojs/preact - ``` - - - -Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'preact'" (oder eine ähnliche Meldung) erhältst, musst du Preact manuell installieren: - - - - ```sh - npm install preact - ``` - - - ```sh - pnpm add preact - ``` - - - ```sh - yarn add preact - ``` - - - -Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest: - -```js title="astro.config.mjs" ins={2} ins="preact()" -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; - -export default defineConfig({ - // ... - integrations: [preact()], -}); -``` - -## Anwendung - -Um deine ersten Preact-Komponenten in Astro zu verwenden, gehe zu unserer [UI-Framework Dokumentation][astro-ui-frameworks]. Dort lernst du: - -* 📦 wie Framework-Komponenten geladen werden, -* 💧 clientseitige Hydratationsoptionen, und -* 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen - -## Konfiguration - -Die Astro-Preact-Integration verwaltet die Darstellung von Preact-Komponenten und verfügt über eigene Optionen. Ändere diese in der `astro.config.mjs`-Datei, wo die Einstellungen aller Integration deines Projekts zu finden sind. - -Für die einfache Nutzung der Preact-Integration musst du sie nicht konfigurieren. - -### compat - -Du kannst `preact/compat`, die Kompatibilitätsebene von Preact zum Rendern von React-Komponenten, aktivieren, ohne größere Pakete von React installieren oder an die Webbrowser deiner Benutzer senden zu müssen. - -Setze dafür in einem Optionsobjekt in deiner Preact-Integration `compat` auf `true`: - -```js title="astro.config.mjs" "compat: true" -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; - -export default defineConfig({ - integrations: [preact({ compat: true })], -}); -``` - -Mit der Aktivierung der `compat`-Option kann die Preact-Integration sowohl React- als auch Preact-Komponenten in deinem Projekt rendern und erlaubt dir auch, React-Komponenten in deinen Preact-Komponenten zu importieren. Du kannst mehr dazu in [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) auf der Preact-Webseite lesen. - -Wenn du React Komponenten-Bibliotheken verwendest, musst du die `react` und `react-dom`-Abhängigkeiten als `preact/compat` überschreiben. Nutze hierzu die [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides)-Option in deinem `package.json`: - -```json title="package.json" -{ - "overrides": { - "react": "npm:@preact/compat@latest", - "react-dom": "npm:@preact/compat@latest" - } -} -``` - -In der Dokumentation zu [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) und [`yarn` resolutions](https://yarnpkg.com/configuration/manifest#resolutions) kannst du herausfinden, wie dieses Feature im jeweiligen Package-Manager funktioniert. - -:::note -Derzeit funktioniert die `compat`-Option nur für React-Bibliotheken, die ESM-Code exportieren. Wenn im Erstellungsprozess ein Fehler auftritt, versuche die Bibliothek in `vite.ssr.noExternal: ['the-react-library']` in deiner `astro.config.mjs`-Datei hinzuzufügen. -::: - -### devtools - -

- -Du kannst die [Preact devtools](https://preactjs.github.io/preact-devtools/) während des Programmierens verwenden, indem du ein Objekt mit `devtools: true` in die Konfiguration der `preact()`-Integration hinzufügst: - -```js title="astro.config.mjs" -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; - -export default defineConfig({ - // ... - integrations: [preact({ devtools: true })], -}); -``` - -## Optionen - -### Kombination mehrerer JSX-Frameworks - -Wenn du verschiedene JSX-Frameworks (React, Preact, Solid) im gleichen Projekt verwendest, muss Astro bestimmen, welche JSX-Framework-spezifischen Transformationen für jede deiner Komponenten verwendet werden sollen. Wenn du nur eine JSX-Framework-Integration zu deinem Projekt hinzugefügt hast, ist keine weitere Konfiguration nötig. - -Verwende dazu die `include` (erforderlich) und `exclude` (optional) Konfigurationsoption, um zu spezifizieren, welche Dateien zu welchem Framework gehören. Stelle dazu ein Array aus Dateien und/oder Verzeichnissen in der `include`-Option für jedes Framework, das du nutzt, bereit. Zudem können auch Wildcards verwendet werden, um mehrere Dateipfade anzugeben. - -```js title="astro.config.mjs" -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; -import react from '@astrojs/react'; -import svelte from '@astrojs/svelte'; -import vue from '@astrojs/vue'; -import solid from '@astrojs/solid-js'; - -export default defineConfig({ - // Aktiviere viele Frameworks, um alle Arten von Komponenten zu unterstützen. - // Wenn du nur ein JSX-Framework verwendest, ist `include` nicht notwendig. - integrations: [ - preact({ - include: ['**/preact/*'], - }), - react({ - include: ['**/react/*'], - }), - solid({ - include: ['**/solid/*'], - }), - ], -}); -``` - -## Beispiele - -* Das [Astro-Preact-Beispiel](https://github.com/withastro/astro/tree/latest/examples/framework-preact) zeigt dir, wie man interaktive Preact-Komponenten in einem Astro-Projekt verwendet. -* Das [Astro-Nanostores-Beispiel](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) zeigt dir, wie man Zustände zwischen verschiedenen Komponenten — und sogar verschiedenen Frameworks! — in einem Astro-Projekt teilen kann. - -[astro-integration]: /de/guides/integrations-guide/ - -[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen \ No newline at end of file diff --git a/src/content/docs/de/guides/integrations-guide/solid-js.mdx b/src/content/docs/de/guides/integrations-guide/solid-js.mdx deleted file mode 100644 index 1c3c4795defa7..0000000000000 --- a/src/content/docs/de/guides/integrations-guide/solid-js.mdx +++ /dev/null @@ -1,216 +0,0 @@ ---- -type: integration -title: '@astrojs/solid-js' -description: Lerne wie du die @astrojs/solid-js Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen. -githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/solid/' -category: renderer -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Since from '~/components/Since.astro'; - -Diese **[Astro-Integration][astro-integration]** erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen [SolidJS](https://www.solidjs.com/)-Komponenten. - -## Installation - -Astro verfügt über einen `astro add`-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die [Integrationen auch manuell installieren](#manuelle-installation). - -Um `@astrojs/solid-js` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus. - - - - ```sh - npx astro add solid - ``` - - - ```sh - pnpm astro add solid - ``` - - - ```sh - yarn astro add solid - ``` - - - -Sollten dir dabei Probleme begegnen, [melde sie gerne bei uns auf GitHub](https://github.com/withastro/astro/issues) und versuche stattdessen die manuelle Installation. - -### Manuelle Installation - -Installiere zuerst das `@astrojs/solid-js`-Paket: - - - - ```sh - npm install @astrojs/solid-js - ``` - - - ```sh - pnpm add @astrojs/solid-js - ``` - - - ```sh - yarn add @astrojs/solid-js - ``` - - - -Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'solid-js'" (oder eine ähnliche Meldung) erhältst, musst du SolidJS manuell installieren: - - - - ```sh - npm install solid-js - ``` - - - ```sh - pnpm add solid-js - ``` - - - ```sh - yarn add solid-js - ``` - - - -Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest: - -```js title="astro.config.mjs" ins={2} ins="solid()" -import { defineConfig } from 'astro/config'; -import solid from '@astrojs/solid-js'; - -export default defineConfig({ - // ... - integrations: [solid()], -}); -``` - -## Erste Schritte - -Um deine ersten SolidJS-Komponenten in Astro zu verwenden, gehe zu unserer [UI-Framework Dokumentation][astro-ui-frameworks]. Dort lernst du: - -* 📦 wie Framework-Komponenten geladen werden, -* 💧 clientseitige Hydratationsoptionen, und -* 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen - -## Optionen - -### Kombination mehrerer JSX-Frameworks - -Wenn du verschiedene JSX-Frameworks (React, Preact, Solid) im gleichen Projekt verwendest, muss Astro bestimmen, welche JSX-Framework-spezifischen Transformationen für jede deiner Komponenten verwendet werden sollen. Wenn du nur eine JSX-Framework-Integration zu deinem Projekt hinzugefügt hast, ist keine weitere Konfiguration nötig. - -Verwende dazu die `include` (erforderlich) und `exclude` (optional) Konfigurationsoption, um zu spezifizieren, welche Dateien zu welchem Framework gehören. Stelle dazu ein Array aus Dateien und/oder Verzeichnissen in der `include`-Option für jedes Framework, das du nutzt, bereit. Zudem können auch Wildcards verwendet werden, um mehrere Dateipfade anzugeben. - -```js title="astro.config.mjs" -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; -import react from '@astrojs/react'; -import svelte from '@astrojs/svelte'; -import vue from '@astrojs/vue'; -import solid from '@astrojs/solid-js'; - -export default defineConfig({ - // Aktiviere viele Frameworks, um alle Arten von Komponenten zu unterstützen. - // Wenn du nur ein JSX-Framework verwendest, ist `include` nicht notwendig. - integrations: [ - preact({ - include: ['**/preact/*'], - }), - react({ - include: ['**/react/*'], - }), - solid({ - include: ['**/solid/*'], - }), - ], -}); -``` - -## Konfiguration - -### devtools - -

- -Du kannst die [Solid-DevTools](https://github.com/thetarnav/solid-devtools) während des Programmierens verwenden, indem du ein Objekt mit `devtools: true` in die Konfiguration der `solid()`-Integration hinzufügst und das `solid-devtools`-Paket zu deinem Projekt hinzufügst: - - - - ```sh - npm install solid-devtools - ``` - - - ```sh - pnpm add solid-devtools - ``` - - - ```sh - yarn add solid-devtools - ``` - - - -```js title="astro.config.mjs" -import { defineConfig } from 'astro/config'; -import solid from '@astrojs/solid-js'; - -export default defineConfig({ - // ... - integrations: [solid({ devtools: true })], -}); -``` - -## Anwendung - -Du kannst SolidJS-Komponenten wie jede andere [UI-Framework-Komponenten](/de/guides/framework-components/) verwenden. - -### Suspense-Grenzen - -Um Solid Resources und Lazy-Komponenten ohne übermäßige Konfiguration zu unterstützen, werden reine Server- und Hydratation-Komponenten automatisch in Suspense-Grenzen auf der höchsten Ebene eingeschlossen und auf dem Server mithilfe von [`renderToStringAsync`][solid-render-to-string-async ]-Funktion dargestellt. Daher musst du asynchrone Komponenten nicht in Suspense-Grenzen umwickeln. - -Zum Beispiel kannst du Solids [`createResource`][solid-create-resource] verwenden, um asnychron Daten von einem Server zu holen. Diese Daten werden im initialen, server-gerenderten HTML von Astro inkludiert sein: - -```tsx -// CharacterName.tsx -function CharacterName() { - const [name] = createResource(() => - fetch('https://swapi.dev/api/people/1') - .then((result) => result.json()) - .then((data) => data.name) - ); - - return ( - <> -

Name:

- {/* Luke Skywalker */} -
{name()}
- - ); -} -``` - -Ebenso werden Solids [Lazy-Komponenten][solid-lazy-components] aufgelöst und deren HTML wird in der ursprünglichen server-gerenderten Seite enthalten sein. - -Nicht-hydratisierende [client:only Komponenten][astro-client-only] werden nicht automatisch in Suspense-Grenzen umwickelt. - -Du kannst gerne weitere Suspense-Grenzen nach Belieben hinzufügen. - -[astro-integration]: /de/guides/integrations-guide/ - -[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen - -[astro-client-only]: /de/reference/directives-reference/#clientonly - -[solid-render-to-string-async]: https://www.solidjs.com/docs/latest/api#rendertostringasync - -[solid-create-resource]: https://www.solidjs.com/docs/latest/api#createresource - -[solid-lazy-components]: https://www.solidjs.com/docs/latest/api#lazy diff --git a/src/content/docs/de/guides/integrations-guide/svelte.mdx b/src/content/docs/de/guides/integrations-guide/svelte.mdx deleted file mode 100644 index bda30b26a79c3..0000000000000 --- a/src/content/docs/de/guides/integrations-guide/svelte.mdx +++ /dev/null @@ -1,158 +0,0 @@ ---- -type: integration -title: '@astrojs/svelte' -description: Lerne wie du die @astrojs/svelte Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen. -githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/' -category: renderer -i18nReady: true ---- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; -import Since from '~/components/Since.astro'; - -Diese **[Astro-Integration][astro-integration]** erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen [Svelte-Komponenten](https://svelte.dev). Sie unterstützt Svelte 3, 4 und 5 (experimentell). - -## Installation - -Astro verfügt über einen `astro add`-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die [Integrationen auch manuell installieren](#manuelle-installation). - -Um `@astrojs/svelte` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus. - - - - ```sh - npx astro add svelte - ``` - - - ```sh - pnpm astro add svelte - ``` - - - ```sh - yarn astro add svelte - ``` - - - -Sollten dir dabei Probleme begegnen, [melde sie gerne bei uns auf GitHub](https://github.com/withastro/astro/issues) und versuche stattdessen die manuelle Installation. - -### Manuelle Installation - -Installiere zuerst das `@astrojs/svelte`-Paket: - - - - ```sh - npm install @astrojs/svelte - ``` - - - ```sh - pnpm add @astrojs/svelte - ``` - - - ```sh - yarn add @astrojs/svelte - ``` - - - -Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'svelte'" (oder eine ähnliche Meldung) erhältst, musst du Svelte manuell installieren: - - - - ```sh - npm install svelte - ``` - - - ```sh - pnpm add svelte - ``` - - - ```sh - yarn add svelte - ``` - - - -Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest: - -```js title="astro.config.mjs" ins={2} ins="svelte()" -import { defineConfig } from 'astro/config'; -import svelte from '@astrojs/svelte'; - -export default defineConfig({ - // ... - integrations: [svelte()], -}); -``` - -## Erste Schritte - -Um deine ersten Svelte-Komponenten in Astro zu verwenden, gehe zu unserer [UI-Framework Dokumentation][astro-ui-frameworks]. Dort lernst du: - -* 📦 wie Framework-Komponenten geladen werden, -* 💧 clientseitige Hydratationsoptionen, und -* 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen - -## Optionen - -Diese Integration wird durch `@sveltejs/vite-plugin-svelte` ermöglicht. Um den Svelte-Compiler anzupassen, können Optionen für die Integration genutzt werden. Weitere Informationen findest du in der [`@sveltejs/vite-plugin-svelte`-Dokumentation](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md). - -### Standardoptionen - -Diese Integration nutzt die folgenden Standardoptionen für den Svelte-Compiler: - -```js -const defaultOptions = { - emitCss: true, - compilerOptions: { dev: isDev, hydratable: true }, - preprocess: vitePreprocess(), -}; -``` - -Die Einstellungen für `emitCss`, `compilerOptions.dev` und `compilerOptions.hydratable` sind notwendig, um Astro korrekt zu erzeugen, und dürfen nicht überschrieben werden. - -Wenn du eine eigene `preprocess`-Option verwendest, **wird** diese den Standard von [`vitePreprocess()`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) überschreiben. Stelle sicher, dass du die notwendigen Preprocessor-Flags für dein Projekt aktivierst. - -Du kannst die Einstellungen der `svelte`-Integration entweder in der `astro.config.mjs`-Datei oder in der `svelte.config.js`-Datei ändern. Beides überschreibt die Standardeinstellung von `preprocess`: - -```js title="astro.config.mjs" "preprocess: []" -import { defineConfig } from 'astro/config'; -import svelte from '@astrojs/svelte'; - -export default defineConfig({ - integrations: [svelte({ preprocess: [] })], -}); -``` - -```js title="svelte.config.js" -export default { - preprocess: [], -}; -``` - -## Intellisense für TypeScript - - - -Wenn du einen Preprocessor wie TypeScript oder SCSS für deine Svelte-Dateien benötigst, kannst du eine `svelte.config.js`-Datei erstellen, damit die Svelte-IDE-Erweiterung die Svelte-Dateien korrekt analysieren kann. - -```js title="svelte.config.js" -import { vitePreprocess } from '@astrojs/svelte'; - -export default { - preprocess: vitePreprocess(), -}; -``` - -Diese Konfigurationsdatei wird automatisch hinzugefügt, wenn du `astro add svelte` ausführst. - -[astro-integration]: /de/guides/integrations-guide/ - -[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen \ No newline at end of file diff --git a/src/content/docs/de/guides/integrations-guide/tailwind.mdx b/src/content/docs/de/guides/integrations-guide/tailwind.mdx deleted file mode 100644 index 127fa3dec02e3..0000000000000 --- a/src/content/docs/de/guides/integrations-guide/tailwind.mdx +++ /dev/null @@ -1,269 +0,0 @@ ---- -type: integration -title: '@astrojs/tailwind' -description: Lerne wie du die @astrojs/tailwind Integration in deinem Astro Projekt verwendest. -githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/' -category: other -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; - -Diese **[Astro-Integration][astro-integration]** erlaubt dir, [Tailwinds](https://tailwindcss.com) CSS-Hilfsklassen in jeder `.astro`-Datei und [UI-Framework-Komponente](/de/guides/framework-components/) deines Projekts zu verwenden. - -## Warum Tailwind? - -Tailwind ermöglicht es dir, Hilfsklassen anstelle von CSS zu verwenden. Diese Hilfsklassen entsprechen größtenteils einer bestimmten CSS-Eigenschaftseinstellung: Zum Beispiel entspricht das Hinzufügen von `text-lg` zu einem Element dem Setzen von `font-size: 1.125rem` in CSS. Du findest es möglicherweise einfacher, deine Styles mithilfe dieser vordefinierten Hilfsklassen zu schreiben und zu pflegen! - -Wenn dir diese vordefinierten Einstellungen nicht gefallen, kannst du die [Tailwind-Konfigurationsdatei](https://tailwindcss.com/docs/configuration) den Designanforderungen deines Projekts anpassen. Wenn zum Beispiel der "große Text" in deinem Design tatsächlich `2rem` beträgt, kannst du [die `lg` fontSize-Einstellung](https://tailwindcss.com/docs/font-size#customizing-your-theme) auf `2rem` ändern. - -Tailwind ist auch eine großartige Wahl, um Styles zu React-, Preact- oder Solid-Komponenten hinzuzufügen, die keinen ` - ``` - - - -### JSX-Dateien in `.astro`-Dateien umwandeln - -Hier sind ein paar Tipps für das Umwandeln von CRA-`.js`-Komponenten in `.astro`-Komponenten: - -1. Verwende das zurückgegebene JSX deiner vorhandenen CRA-Komponentenfunktion als Basis für deine HTML-Vorlage. - -2. Tausche jeden [CRA oder JSX Syntax gegen Astro](#referenz-wandle-cra-syntax-in-astro-um) oder gegen HTML-Web-Standards. Damit ist zum Beispiel `{children}` oder `className` gemeint. - -3. Verschiebe sämtliches JavaScript, inklusive `import`-Statements, in einen ["Code-Zaun" (`---`)](/de/basics/astro-components/#das-komponentenskript). Beachte: JavaScript, welches für das [bedingte Rendern von Inhalten](/de/reference/astro-syntax/#dynamisches-html) benötigt wird, wird oftmals in der HTML-Vorlage direkt in Astro geschrieben. - -4. Verwende [`Astro.props`](/de/reference/api-reference/#astroprops), um auf die Komponenten­attribute, die zuvor deiner CRA-Komponenten­funktionen weitergegeben worden sind, zuzugreifen. - -5. Entscheide, ob deine importierten Komponenten auch in Astro umgewandelt werden müssen. Du kannst sie als React-Komponenten behalten, egal ob kurzfristig oder für immer. Aber vielleicht willst du sie ja doch in `.astro`-Komponenten umwandeln, vor allem, wenn sie nicht interaktiv sind. - -6. Ersetze `useEffect()` mit `import`-Statements oder [`Astro.glob()`](/de/reference/api-reference/#astroglob) für das Laden von lokalen Dateien. Verwende `fetch()` für das laden von externen Daten. - -### Tests migrieren - -Da Astro reines HTML ausgibt, kannst du deine End-zu-End Tests für die Ausgabe des Erzeugungsvorgangs schreiben. Bereits bestehende Tests funktionieren vielleicht auch sofort, wenn du die Markupstruktur deiner CRA-Webseite übernehmen konntest. Testbibliotheken wie Jest oder React Testing Library können importiert und für das Testen deiner React-Komponenten in Astro verwendet werden. - -Lies Astros [Testanleitung](/de/guides/testing/) für mehr. - -## Referenz: Wandle CRA Syntax in Astro um - -### CRA Imports in Astro - -Aktualisiere alle [Dateiimporte](/de/guides/imports/), um die relativen Dateipfade exakt zu referenzieren. Das kannst du mit einem [Importalias](/de/guides/typescript/#import-aliase) erreichen oder indem du den relativen Pfad komplett ausschreibst. - -Beachte, dass `.astro` und andere Dateitypen nur mit deren Dateiendung importiert werden können. - -```astro title="src/pages/authors/Fred.astro" ---- -import Card from '../../components/Card.astro'; ---- - -``` - -### CRA Children in Astro - -Schreibe jede `{children}`-Instanz in einen Astro ``. Astro benötigt keine `{children}` als Komponentenattribut und kann automatisch verschaltelte Inhalte in einem `` rendern. - -```astro title="src/components/MyComponent.astro" del={3-9} ins={11-13} ---- ---- -export default function MyComponent(props) { - return ( -
- {props.children} -
- ); -} - -
- -
-``` - -React-Komponenten, die mehrere `{children}` rendern, können durch [benannte Slots](/de/basics/astro-components/#benannte-slots) in Astro-Komponenten umgewandelt werden. - -Lies mehr über [spezifische ``-Verwendungen in Astro](/de/basics/astro-components/#slots). - -### CRA Datenabruf in Astro - -Daten abzurufen ist in Astro-Komponenten im Vergleich zu React-Komponenten recht ähnlich, wenn auch mit kleinen Unterschieden. - -Um Daten von anderen Dateien in deinem Projekt zu importieren, kannst du alle Instanzen von `useEffect` entweder gegen `Astro.glob()` oder `getCollection()`/`getEntryBySlug()` austauschen. - -Um [externe Daten abzurufen](/de/guides/data-fetching/), verwende `fetch()`. - -Diese Datenabrufe werden im Frontmatter der Astro-Komponente gemacht und verwenden ein top-level await. - -```astro title="src/pages/index.astro" ---- -import { getCollection } from 'astro:content'; - -// Hole alle `src/content/blog/` Einträge -const allBlogPosts = await getCollection('blog'); - -// Hole alle `src/content/posts/` Einträge -const allPosts = await Astro.glob('../pages/posts/*.md'); - -// Rufe externe Daten ab -const response = await fetch('https://randomuser.me/api/'); -const data = await response.json(); -const randomUser = data.results[0]; ---- -``` - -Lies mehr über [das Importieren von lokalen Dateien mit `Astro.glob()`](/de/guides/imports/#astroglob), [die Collections API](/de/guides/content-collections/#querying-collections) oder [das Abrufen von externen Daten](/de/guides/data-fetching/). - -### CRA Styling in Astro - -Eventuell musst du [CSS-in-JS-Bibliotheken](https://github.com/withastro/astro/issues/4432) (z.B. gestylte Komponenten) gegen andere, in Astro verfügbaren CSS-Optionen austauschen. - -Falls nötig, ändere etwaige Inline-Stilobjekte (`style={{ fontWeight: "bold" }}`) zu inline HTML-Stilattributen(`style="font-weight:bold;"`). Oder verwenden [Astros ` -``` - -### Scoped Styles (auf Komponenten begrenzte lokale CSS-Stile) - -Astro ` -``` - -Kompiliert dazu: -```astro - -``` - -Styles mit Scopes wirken sich nicht außerhalb der definierenden Komponente aus und haben keinen Effekt auf den Rest deiner Website. In Astro ist es in Ordnung, Selektoren mit geringer Spezifität wie `h1 {}` oder `p {}` zu verwenden, da sie in der endgültigen Ausgabe mit Scopes kompiliert werden. - -Scoped Styles gelten auch nicht für andere Astro-Komponenten, die in deiner Vorlage enthalten sind. Wenn du eine untergeordnete Komponente stylen musst, solltest du diese Komponente in ein `
` (oder ein anderes Element) einpacken, das du dann gestalten kannst. - -Die Spezifität von Scoped Styles wird beibehalten, sodass sie konsistent mit anderen CSS-Dateien oder CSS-Bibliotheken arbeiten können, während die exklusiven Grenzen erhalten bleiben, die verhindern, dass Styles außerhalb der Komponente angewendet werden. - -### Globale Styles - -Obwohl wir für die meisten Komponenten Scoped Styles empfehlen, kann es vorkommen, dass du einen triftigen Grund hast, globales, unscoped CSS zu schreiben. Mit dem Attribut ` -``` - -Du kannst auch globale und scoped CSS-Regeln im selben ` -

Titel

-
-``` - -Das ist eine gute Möglichkeit, um beispielsweise Blog-Posts oder Dokumente mit CMS-gestützten Inhalten zu gestalten, deren Inhalte außerhalb von Astro liegen. Aber Vorsicht: Komponenten, deren Aussehen davon abhängt, ob sie eine bestimmte übergeordnete Komponente haben oder nicht, können bei der Fehlersuche Probleme bereiten. - -Scoped Styles sollten so oft wie möglich genutzt werden. Globale Styles sollten nur bei Bedarf verwendet werden. - -### Kombinieren von Klassen mit `class:list` - -Wenn du Klassen in einem Element dynamisch kombinieren musst, kannst du das Attribut `class:list` in `.astro`-Dateien verwenden. - -```astro title="src/components/ClassList.astro" /class:list={.*}/ ---- -const { istRot } = Astro.props; ---- - - -
- - -``` - -📚 Auf unserer Seite [Vorlagen-Direktiven](/de/reference/directives-reference/#classlist) erfährst du mehr über `class:list`. - -### CSS-Variablen - - - -Der Astro-` -

Hallo

-``` - -📚 Siehe unsere [Vorlagen-Direktiven](/de/reference/directives-reference/#definevars) Seite, um mehr über `define:vars` zu erfahren. - -### Übergabe einer `class` an eine untergeordnete Komponente - -In Astro werden HTML-Attribute wie `class` nicht automatisch an untergeordnete Komponenten weitergegeben. - -Stattdessen nimmst du eine `class`-Eigenschaft in der untergeordneten Komponente an und wendest sie auf das Wurzelelement an. Bei der Destrukturierung musst du sie umbenennen, denn `class` ist ein [reserviertes Wort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words) in JavaScript. - -```astro title="src/components/MeineKomponente.astro" {2,4} ---- -const { class: className } = Astro.props; ---- -
- -
-``` - -```astro title="src/pages/index.astro" ---- -import MeineKomponente from "../components/MeineKomponente.astro" ---- - -Dies wird rot sein! -``` - -Mit diesem Pattern kannst du untergeordnete Komponenten direkt gestalten. Astro übergibt den Klassennamen der Elternkomponente (z.B. `astro-hhnqfkh6`) automatisch über den Parameter `class` und schließt die Kindkomponente in den Geltungsbereich der Elternkomponente ein. Beachte, dass dieses Pattern nur funktioniert, wenn deine [`scopedStyleStrategy`-Option](/de/reference/configuration-reference/#scopedstylestrategy) entweder `'where'` oder `'class'` ist. - -:::note[Scoped Klassen von Eltern-Komponenten] -Da die Eigenschaft `class` das Kind in den Geltungsbereich des Elternteils einbezieht, ist es möglich, dass Styles vom Elternteil auf das Kind übertragen werden. Um unbeabsichtigte Nebeneffekte zu vermeiden, solltest du sicherstellen, dass du eindeutige Klassennamen in der untergeordneten Komponente verwendest. -::: - -### Inline Styles - -Du kannst HTML-Elemente mit dem Attribut `style` inline stylen. Dies kann ein CSS-String oder ein Objekt mit CSS-Eigenschaften sein: - -```astro title="src/pages/index.astro" -// Diese sind gleichwertig: -

Mein Text

-

Mein Text

-``` - -## Externe Styles - -Es gibt zwei Möglichkeiten, externe globale Styles aufzulösen: ein ESM-Import für Dateien, die sich in deinem Projekt-Quellcode befinden, oder ein absoluter URL-Link für Dateien in deinem `public/`-Verzeichnis oder außerhalb deines Projekts. - -📚 Lies mehr über die Verwendung von [statischen Assets](/de/guides/imports/), die sich in `public/` oder `src/` befinden. - -### Importiere ein lokales Stylesheet - -:::caution[Verwendest du ein npm-Paket?] -Möglicherweise musst du deine `astro.config` aktualisieren, wenn du aus npm-Paketen importierst. Siehe den Abschnitt ["CSS aus einem npm-Paket importieren"](#importiere-css-aus-einem-npm-paket) unten. -::: - -Du kannst CSS mit der ESM-Import-Syntax in dein Astro-Komponenten-Frontmatter importieren. CSS-Importe funktionieren wie [jeder andere ESM-Import in einer Astro-Komponente](/de/basics/astro-components/#das-komponentenskript), der als **relativ zur Komponente** referenziert werden sollte und mit allen anderen Importen am **Beginn** deines Komponentenskripts geschrieben werden muss. - -```astro title="src/pages/index.astro" {4} ---- -// Astro bündelt und optimiert dieses CSS automatisch für dich -// Das funktioniert auch für Präprozessordateien wie .scss, .styl, etc. -import '../styles/utils.css'; ---- - -``` - -CSS `import` über ESM wird in jeder JavaScript-Datei unterstützt, auch in JSX-Komponenten wie React und Preact. Dies kann nützlich sein, um granulare, komponentenbezogene Styles für deine React-Komponenten zu schreiben. - -### Importiere CSS aus einem npm-Paket - -Möglicherweise musst du auch CSS aus einem externen npm-Paket laden. Das ist vor allem bei Dienstprogrammen wie [Open Props](https://open-props.style/) üblich. Wenn dein Paket **die Verwendung einer Dateierweiterung** empfiehlt (z. B. `paket-name/styles.css` statt `paket-name/styles`), sollte dies wie jedes lokale Stylesheet funktionieren: - -```astro {3} ---- -// src/pages/irgendeine-seite.astro -import 'paket-name/styles.css'; ---- - -``` - -Wenn dein Paket **_keine_ Dateierweiterung vorschlägt** (z.B. `paket-name/styles`), musst du zuerst deine Astro-Konfiguration aktualisieren! - -Angenommen, du importierst eine CSS-Datei mit dem Namen `normalize` (ohne die Dateierweiterung) aus `paket-name`. Um sicherzustellen, dass wir deine Seite korrekt darstellen können, füge `paket-name` zum [Array `vite.ssr.noExternal`](https://vite.dev/config/ssr-options.html#ssr-noexternal) hinzu: - -```js ins={7} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - vite: { - ssr: { - noExternal: ['paket-name'], - } - } -}) -``` - -:::note -Dies ist eine [Vite-spezifische Einstellung](https://vite.dev/config/ssr-options.html#ssr-noexternal), die sich _nicht_ auf [Astro SSR](/de/guides/on-demand-rendering/) bezieht (oder diese benötigt). -::: - -Jetzt kannst du `paket-name/normalize` importieren. Dieses wird von Astro wie jedes andere lokale Stylesheet gebündelt und optimiert. - -```astro {3} ---- -// src/pages/irgendeine-seite.astro -import 'paket-name/normalize'; ---- - -``` - -### Laden eines statischen Stylesheets über "Link"-Tags - -Du kannst auch das Element `` verwenden, um CSS auf der Seite zu laden. Dies sollte ein absoluter URL-Pfad zu einer CSS-Datei sein, die sich in deinem `/public` Verzeichnis befindet, oder eine URL zu einer externen Website. Relative `` href-Werte werden nicht unterstützt. - -```astro title="src/pages/index.astro" {3,5} - - - - - - -``` - -Da diese Methode das Verzeichnis `public/` verwendet, überspringt sie die normale CSS-Verarbeitung, Bündelung und Optimierung, die Astro bietet. Wenn du diese Umwandlungen benötigst, verwende die oben beschriebene Methode [Importiere CSS](#importiere-ein-lokales-stylesheet). - -## Kaskadierungs-Reihenfolge - -Astro-Komponenten müssen manchmal mehrere CSS-Quellen auswerten. Deine Komponente könnte zum Beispiel CSS importieren, ein eigenes ` -
-

- Diese Überschrift wird lila sein! -

-
-``` - -Wenn zwei Regeln die gleiche Spezifität haben, wird die _Reihenfolge des Auftretens_ ausgewertet, und der Wert der letzten Regel hat Vorrang: - -```astro title="MeineKomponente.astro" - -
-

- Diese Überschrift wird rot sein! -

-
-``` - -Astro-CSS-Regeln werden in der Reihenfolge ihres Erscheinens ausgewertet: - -- **``-Tags im `head`** (niedrigster Vorrang) -- **Importiere Styles** -- **Scoped Styles** (höchster Vorrang) - -### Scoped Styles - -Die Verwendung von [Scoped Styles](#scoped-styles) erhöht nicht die _Spezifität_ deines CSS, aber sie stehen immer an letzter Stelle in der _Reihenfolge des Auftretens_. Sie haben daher Vorrang vor anderen Styles mit der gleichen Spezifität. Wenn du zum Beispiel CSS importierst, das mit einem Scoped Style in Konflikt steht, gilt der Wert des Scoped Styles: - -```css title="mache-es-lila.css" -h1 { - color: purple; -} -``` -```astro title="MeineKomponente.astro" ---- -import "./mache-es-lila.css" ---- - -
-

- Diese Überschrift wird rot sein! -

-
-``` - -Wenn du den importierten Stil _spezifischer_ gestaltest, hat er einen höheren Vorrang als der Scoped Style: - -```css title="mache-es-lila.css" -div > h1 { - color: purple; -} -``` -```astro title="MeineKomponente.astro" ---- -import "./mache-es-lila.css.css" ---- - -
-

- Diese Überschrift wird lila sein! -

-
-``` - -### Import-Reihenfolge - -Wenn du mehrere CSS-Stylesheets in eine Astro-Komponente importierst, werden die CSS-Regeln in der Reihenfolge ausgewertet, in der sie importiert werden. Eine höhere Spezifität bestimmt immer, welche Styles angezeigt werden, unabhängig davon, wann das CSS ausgewertet wird. Wenn jedoch widersprüchliche Stile die gleiche Spezifität haben, gewinnt der _letzte importierte_ Stil: - -```css title="mache-es-lila.css" -div > h1 { - color: purple; -} -``` -```css title="mache-es-grün.css" -div > h1 { - color: green; -} -``` -```astro title="MeineKomponente.astro" ---- -import "./mache-es-grün.css" -import "./mache-es-lila.css" ---- - -
-

- Diese Überschrift wird lila sein! -

-
-``` - -Während ` -
-

- Diese Überschrift wird lila sein! -

-
-``` - -:::tip -Ein gängiges Pattern in Astro ist der Import von globalem CSS innerhalb einer [Layout-Komponente](/de/basics/layouts/). Achte darauf, dass du die Layout-Komponente vor anderen Importen importierst, damit sie den niedrigsten Vorrang hat. -::: - -### Link-Tags -Styles, die über [Link-Tags](#laden-eines-statischen-stylesheets-über-link-tags) geladen werden, werden in der Reihenfolge vor allen anderen Styles in einer Astro-Datei ausgewertet. Daher haben diese Styles einen geringeren Vorrang als importierte Stylesheets und Scoped Styles: - -```astro title="index.astro" ---- -import "../components/mache-es-lila.css" ---- - - - - - - - - Astro - - - -
-

Dies wird lila sein

-
- - -``` - -## CSS-Integrationen - -Astro unterstützt das Hinzufügen beliebter CSS-Bibliotheken, -Tools und -Frameworks zu deinem Projekt, wie z.B. [Tailwind](https://tailwindcss.com) und mehr! - -### Tailwind - -Um Tailwind in deinem Projekt zu verwenden, installiere die offizielle [Astro Tailwind-Integration][tailwind] mit dem Befehl `astro add` für deinen Paketmanager: - - - - ```shell - npx astro add tailwind - ``` - - - ```shell - pnpm astro add tailwind - ``` - - - ```shell - yarn astro add tailwind - ``` - - - -📚 Im [Integrationsleitfaden](/de/guides/integrations-guide/) findest du Anweisungen zum Installieren, Importieren und Konfigurieren dieser Integrationen. - -## CSS-Präprozessoren - -Astro unterstützt CSS-Präprozessoren wie [Sass][sass], [Stylus][stylus] und [Less][less] durch [Vite][vite-preprocessors]. - -### Sass und SCSS - - ```shell - npm install sass - ``` - -Verwende ` -``` - -Siehe [Vite's docs](https://vite.dev/guide/assets.html#importing-asset-as-string) für alle Details. - -### `?url` CSS-Importe - -Für fortgeschrittene Anwendungsfälle kannst du eine direkte URL-Referenz für eine CSS-Datei innerhalb des Verzeichnisses `src/` deines Projekts importieren. Das kann nützlich sein, wenn du die volle Kontrolle darüber haben willst, wie eine CSS-Datei auf der Seite geladen wird. Allerdings wird dadurch die Optimierung dieser CSS-Datei mit dem Rest deiner Seite verhindert. - -Dies wird für die meisten Benutzer nicht empfohlen. Platziere deine CSS-Dateien stattdessen innerhalb von `public/`, um eine einheitliche URL-Referenz zu erhalten. - -:::caution -Wenn du eine kleinere CSS-Datei mit `?url` importierst, kann es sein, dass der base64-kodierte Inhalt der CSS-Datei als Daten-URL in deinem endgültigen Build zurückgegeben wird. Entweder schreibst du deinen Code so, dass er kodierte Daten-URLs unterstützt (`data:text/css;base64,...`) oder du setzt die Konfigurationsoption [`vite.build.assetsInlineLimit`](https://vite.dev/config/#build-assetsinlinelimit) auf `0`, um diese Funktion zu deaktivieren. -::: - -```astro title="src/components/RawStylesUrl.astro" "?url" ---- -// Beispiel für Fortgeschrittene! Für die meisten Benutzer nicht empfohlen. -import stylesUrl from '../styles/main.css?url'; ---- - - -``` - -Siehe [Vite's docs](https://vite.dev/guide/assets.html#importing-asset-as-url) für alle Details. - -[less]: https://lesscss.org/ -[sass]: https://sass-lang.com/ -[stylus]: https://stylus-lang.com/ -[svelte-style]: https://svelte.dev/docs#component-format-style -[tailwind]: /de/guides/integrations-guide/tailwind/ -[vite-preprocessors]: https://vite.dev/guide/features.html#css-pre-processors -[vue-css-modules]: https://vue-loader.vuejs.org/guide/css-modules.html -[vue-scoped]: https://vue-loader.vuejs.org/guide/scoped-css.html diff --git a/src/content/docs/de/guides/testing.mdx b/src/content/docs/de/guides/testing.mdx deleted file mode 100644 index 70c9b824e948f..0000000000000 --- a/src/content/docs/de/guides/testing.mdx +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Testen -description: Eine Einführung in das Testen in Astro -i18nReady: false ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - -Testen hilft dir, funktionierenden Astro-Code zu schreiben und zu warten. Astro unterstützt viele beliebte Tools für Unit-Tests, Komponenten-Tests und End-to-End-Tests, darunter Jest, Mocha, Jasmine, Cypress und Playwright. Du kannst sogar Framework-spezifische Testbibliotheken wie React Testing Library installieren, um deine UI-Framework-Komponenten zu testen. - -Test-Frameworks ermöglichen es dir, **Aussagen** oder **Erwartungen** über das Verhalten deines Codes in bestimmten Situationen zu formulieren und diese mit dem tatsächlichen Verhalten deines aktuellen Codes zu vergleichen. - -## Playwright - -Playwright ist ein End-to-End Test-Framework für moderne Web-Apps. Verwende die Playwright-API in JavaScript oder TypeScript, um deinen Astro-Code auf allen modernen Rendering-Engines, darunter Chromium, WebKit und Firefox, zu testen. - -### Installation - -Du kannst mit der [VS Code-Erweiterung](https://playwright.dev/docs/getting-started-vscode) beginnen und deine Tests ausführen. - -Alternativ kannst du Playwright in deinem Astro-Projekt mit dem von dir gewählten Paketmanager installieren. Folge den CLI-Schritten, um JavaScript/TypeScript, den Namen deines Test-Ordners und einen optionalen GitHub Actions-Workflow auszuwählen. - - - - ```shell - npm init playwright@latest - ``` - - - ```shell - pnpm dlx create-playwright - ``` - - - ```shell - yarn create playwright - ``` - - - -### Erstelle deinen ersten Playwright-Test - -1. Wähle eine Seite zum Testen aus. Wir verwenden die unten stehende `index.astro`-Seite als Beispiel. - -```html title="src/pages/index.astro" ---- ---- - - - Astro ist fantastisch! - - - - -``` - -2. Erstelle einen neuen Ordner und füge nachstehende Testdatei in `src/test` hinzu. Kopiere und füge den nachfolgenden Test in deine Datei ein, um zu verifizieren, dass die Metainformationen der Seite korrekt sind. Aktualisiere den ``-Wert entsprechend der Seite, die du testest. - -```jsx title="src/test/index.spec.ts" "Astro ist fantastisch!" -test('Metadaten sind korrekt', async ({ page }) => { - await page.goto("http://localhost:4321/"); - - await expect(page).toHaveTitle('Astro ist fantastisch!'); -}); -``` - -:::tip[Eine Basis-URL setzen] -Du kannst [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in der `playwright.config.ts`-Konfigurationsdatei setzen, um `page.goto("/")` anstatt `page.goto("http://localhost:4321/")` als komfortablere URL zu nutzen. -::: - -### Deine Playwright-Tests ausführen - -Du kannst einen einzelnen oder mehrere Tests auf einmal ausführen und dabei einen oder mehrere Browser testen. Standardmäßig werden deine Testergebnisse im Terminal angezeigt. Optional kannst du den HTML-Test-Reporter öffnen, um einen vollständigen Bericht anzuzeigen und die Testergebnisse zu filtern. - -1. Um unseren Test aus dem vorherigen Beispiel mit der Kommandozeile auszuführen, nutze das `test`-Kommando. Optional kannst du den Dateinamen angeben, um nur den einzelnen Test auszuführen. - -```sh -npx playwright test index.spec.ts -``` - -2. Um den vollständigen HTML-Testbericht anzusehen, öffne ihn mit folgendem Befehl: -```sh -npx playwright show-report -``` - -:::tip -Führe deine Tests gegen deinen Produktions-Code aus, um näher an deine live gehostete Seite heranzukommen. -::: - -#### Fortgeschritten: Einen Entwicklungs-Webserver während deiner Tests starten - -Du kannst Playwright auch deinen Server starten lassen, wenn du dein Test-Skript mit der [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests)-Option in der Playwright-Konfigurationsdatei ausführst. - -Hier ist ein Beispiel der Konfiguration und Kommandos, wenn du Yarn verwendest: - -1. Füge ein Test-Skript wie: `"test:e2e": "yarn playwright"` in deine `package.json`-Datei im Projekt­stamm­verzeichnis ein. - -2. Füge in der `playwright.config.ts` das `webServer`-Objekt hinzu und aktualisiere den `command`-Wert zu `yarn preview`. -```js title="playwright.config.ts" ins={3-8} "yarn preview" -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { - webServer: { - command: 'yarn preview', - url: 'http://localhost:4321/app/', - timeout: 120 * 1000, - reuseExistingServer: !process.env.CI, - }, - use: { - baseURL: 'http://localhost:4321/app/', - }, -}; -export default config; -``` - -3. Führe `yarn build` und anschließend `yarn test:e2e` aus, um deine Playwright-Tests auszuführen. - -Weiterführende Informationen über Playwright können mit den folgenden Links gefunden werden: - -- [Erste Schritte mit Playwright](https://playwright.dev/docs/intro) -- [Einen Entwicklungs-Server verwenden](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) diff --git a/src/content/docs/de/guides/troubleshooting.mdx b/src/content/docs/de/guides/troubleshooting.mdx deleted file mode 100644 index 66deb663fdf67..0000000000000 --- a/src/content/docs/de/guides/troubleshooting.mdx +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Fehlerbehebung -description: Brauchst du Hilfe? Hängst du bei etwas fest? Wir haben das Richtige für dich. -i18nReady: true ---- - -Astro bietet verschiedene Tools, die dir bei der Fehlersuche und beim Debuggen deines Codes helfen. - -## Allgemeine Fehlermeldungen - -Hier eine Auswahl häufiger Fehlermeldungen, die im Terminal erscheinen können, was sie bedeuten können und was du dagegen tun kannst. - -### Cannot use import statement outside a module - -In Astro-Komponenten werden `<script>`-Tags standardmäßig als [JS-Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) gehoistet und geladen. Wenn du die Direktive [`is:inline`](/de/reference/directives-reference/#isinline) oder ein anderes Attribut in deinen Tag eingebaut hast, wird dieses Standardverhalten aufgehoben. - -**Lösung**: Wenn du deinem `<script>`-Tag Attribute hinzugefügt hast, musst du auch das Attribut `type="module"` hinzufügen, um Import-Anweisungen verwenden zu können. - -**Status**: Erwartetes Astro-Verhalten, wie vorgesehen. - -**Nicht sicher, ob das dein Problem ist?** -Überprüfe, ob jemand anderes [dieses Problem](https://github.com/withastro/astro/issues?q=is%3Aissue+ist%3Aopen+Cannot+use+import+statement) gemeldet hat! - -### `document` (or `window`) is not defined - -Dieser Fehler tritt auf, wenn du versuchst, serverseitig auf `document` oder `window` zuzugreifen. - -Astro-Komponenten werden auf dem Server ausgeführt, daher kannst du innerhalb des Frontmatter nicht auf diese browserspezifischen Objekte zugreifen. - -Framework-Komponenten werden standardmäßig auf dem Server ausgeführt, daher kann dieser Fehler beim Zugriff auf `document` oder `window` während des Renderings auftreten. - -**Lösung**: Überprüfe den Code, der `document` oder `window` aufruft. Wenn du `document` oder `window` nicht direkt verwendest und trotzdem diesen Fehler bekommst, überprüfe, ob die Pakete, die du importierst, auf dem Client laufen sollen. - -- Wenn sich der Code in einer Astro-Komponente befindet, verschiebe ihn in ein `<script>`-Tag außerhalb des Frontmatter. Dadurch wird Astro angewiesen, den Code auf dem Client auszuführen, wo `document` und `window` verfügbar sind. - -- Wenn sich der Code in einer Framework-Komponente befindet, versuche, nach dem Rendering mit Lifecycle-Methoden auf diese Objekte zuzugreifen (z. B. [`useEffect()`](https://react.dev/reference/react/useEffect) in React, [`onMounted()`](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) in Vue und [`onMount()`](https://svelte.dev/docs#run-time-svelte-onmount) in Svelte). Du kannst auch verhindern, dass die Komponente überhaupt auf dem Server gerendert wird, indem du die Direktive [`client:only`](/de/reference/directives-reference/#clientonly) hinzufügst. - -**Status**: Erwartetes Astro-Verhalten, wie vorgesehen. - -### Expected a default export - -Dieser Fehler kann auftreten, wenn du versuchst, eine ungültige Komponente zu importieren oder zu rendern, oder wenn eine Komponente nicht richtig funktioniert. (Diese spezielle Meldung tritt aufgrund der Funktionsweise des Importierens einer UI-Komponente auf.) - -**Lösung**: Suche nach Fehlern in jeder Komponente, die du importierst und renderst, und stelle sicher, dass sie richtig funktioniert. Erwäge, eine Astro-Startvorlage aus [astro.new](https://astro.new) zu öffnen und nur deine Komponente in einem minimalen Astro-Projekt zu testen. - -**Status**: Erwartetes Astro-Verhalten, wie vorgesehen. - -### Refused to execute inline script - -Möglicherweise wird in der Browserkonsole der folgende Fehler protokolliert: - -> Refused to execute inline script because it violates the following Content Security Policy directive: … - -Das bedeutet, dass die [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) deiner Website die Ausführung von Inline-`<script>`-Tags verbietet, die Astro standardmäßig ausgibt. - -**Lösung:** Aktualisiere deine CSP und füge ein `script-src: 'unsafe-inline'` ein, damit Inline-Skripte ausgeführt werden können. - -## Generelle Probleme - -### Meine Komponente wird nicht gerendert - -Überprüfe zuerst, ob du die Komponente in deinem [`.astro`-Komponentenskript](/de/basics/astro-components/#das-komponentenskript) oder deiner [`.mdx`-Datei](/de/guides/integrations-guide/mdx/#using-components-in-mdx) **importiert** hast. - -Dann überprüfe deine Importanweisung: - -- Verweist dein Import auf den falschen Ort? (Überprüfe deinen Importpfad.) - -- Hat dein Import den gleichen Namen wie die importierte Komponente? (Überprüfe deinen Komponentennamen und dass er der [`.astro`-Syntax folgt](/de/reference/astro-syntax/#unterschiede-zwischen-astro-und-jsx).) - -- Hast du die Erweiterung in den Import aufgenommen? (Überprüfe, ob deine importierte Datei eine Erweiterung enthält, z.B. `.astro`, `.md`, `.vue`, `.svelte`. Hinweis: Dateierweiterungen sind nur für `.js(x)` und `.ts(x)` Dateien **nicht** erforderlich.) - -### Meine Komponente ist nicht interaktiv - -Wenn deine Komponente zwar gerendert wird (siehe oben), aber nicht auf Benutzerinteraktionen reagiert, fehlt dir vielleicht eine [`client:*`-Direktive](/de/reference/directives-reference/#client-directives), um deine Komponente zu hydratisieren. - -Standardmäßig wird eine [UI-Framework-Komponente im Client nicht hydratisiert](/de/guides/framework-components/#interaktive-komponenten-hydratisieren). Wenn keine `client:*`-Direktive angegeben wird, wird ihr HTML-Code ohne JavaScript auf der Seite gerendert. - -:::tip -[Astro-Komponenten](/de/basics/astro-components/) sind reine HTML-Vorlagenkomponenten ohne clientseitige Laufzeit. Du kannst jedoch ein `<script>`-Tag in deiner Astro-Komponentenvorlage verwenden, um JavaScript an den Browser zu senden, das im globalen Bereich ausgeführt wird. -::: - -### Cannot find package 'X' - -Wenn du beim Starten von Astro die Warnung `"Cannot find package 'react'"` (oder eine ähnliche Warnung) siehst, bedeutet das, dass du das Paket in deinem Projekt installieren musst. Nicht alle Paketmanager installieren Peer-Abhängigkeiten automatisch für dich. Wenn du mit Node v16+ arbeitest und npm verwendest, solltest du dir um diesen Abschnitt keine Sorgen machen müssen. - -React zum Beispiel ist eine Peer-Abhängigkeit der Integration `@astrojs/react`. Das bedeutet, dass du die offiziellen Pakete `react` und `react-dom` zusammen mit deiner Integration installieren solltest. Die Integration wird dann automatisch von diesen Paketen abhängen. - -```shell ins="react react-dom" -# Beispiel: Integrationen und Frameworks gemeinsam installieren -npm install @astrojs/react react react-dom -``` -Im [Astro-Integrationsleitfaden](/de/guides/integrations-guide/) findest du Anweisungen zum Hinzufügen von Framework-Renderern, CSS-Tools und anderen Paketen für Astro. - -### `Astro.glob()` - no matches found - -Wenn du `Astro.glob()` verwendest, um Dateien zu importieren, achte darauf, dass du die richtige Glob-Syntax verwendest, die alle benötigten Dateien abdeckt. - -#### Dateipfade - -Verwende zum Beispiel `../components/**/*.js` in `src/pages/index.astro`, um die beiden folgenden Dateien zu importieren: -- `src/components/MyComponent.js` -- `src/components/includes/MyOtherComponent.js` - -#### Unterstützte Werte - - `astro.glob()` unterstützt keine dynamischen Variablen und keine Zeichenketten-Interpolation. - -Dies ist kein Fehler in Astro. Das liegt an einer Einschränkung der [Vite-Funktion `import.meta.glob()`](https://vite.dev/guide/features.html#glob-import), die nur statische Zeichenketten-Literale unterstützt. - -Eine gängige Lösung ist es, stattdessen eine größere Gruppe von Dateien zu importieren, die alle benötigten Dateien enthält, und diese dann mit `Astro.glob()` zu filtern: - -```astro {6-7} ---- -// src/components/featured.astro -const { postSlug } = Astro.props; -const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`; - -const posts = await Astro.glob('../pages/blog/*.md'); -const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost)); ---- - -<p> - Wirf einen Blick auf meinen Lieblingspost, <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>! -</p> -``` - -### Astro mit Yarn 2+ (Berry) verwenden - -Yarn 2+, auch bekannt als Berry, verwendet eine Technik namens [Plug'n'Play (PnP)](https://yarnpkg.com/features/pnp), um Node-Module zu speichern und zu verwalten, die [Probleme](https://github.com/withastro/astro/issues/3450) beim Initialisieren eines neuen Astro-Projekts mit `create astro` oder bei der Arbeit mit Astro verursachen kann. Dies kann man umgehen, indem man die [Eigenschaft `nodeLinker`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) in `.yarnrc.yml` auf `node-modules` setzt: - -```yaml title=".yarnrc.yml" -nodeLinker: "node-modules" -``` - -### Verwendung von `<head>` in einer Komponente - -In Astro funktioniert der `<head>`-Tag wie jeder andere HTML-Tag: Er wird nicht an den Anfang der Seite verschoben oder mit dem vorhandenen `<head>` zusammengeführt. Deshalb solltest du in der Regel nur ein einziges `<head>`-Tag auf einer Seite verwenden. Wir empfehlen, diesen einzelnen `<head>` und seinen Inhalt in eine [Layout-Komponente](/de/basics/layouts/) zu schreiben. - -### Ein unerwartetes `<script>`- oder `<style>`-Tag ist enthalten - -Es kann vorkommen, dass die `<script>`- oder `<style>`-Tags einer importierten Komponente in deinem HTML-Quelltext enthalten sind, auch wenn die Komponente in der endgültigen Ausgabe nicht erscheint. Dies ist zum Beispiel der Fall bei [bedingt gerenderten](/de/reference/astro-syntax/#dynamisches-html) Komponenten, die nicht angezeigt werden. - -Der Build-Prozess von Astro arbeitet mit dem Modul-Graph: Sobald eine Komponente in der Vorlage enthalten ist, werden ihre `<script>`- und `<style>`-Tags verarbeitet, optimiert und gebündelt, unabhängig davon, ob sie in der endgültigen Ausgabe erscheint oder nicht. Dies gilt nicht für Skripte, wenn die Direktive "is:inline" angewendet wird. - -## Tipps und Tricks - -### Debugging mit `console.log()` - -`console.log()` ist eine einfache, aber beliebte Methode, um deinen Astro-Code zu debuggen. Wo du deine `console.log`-Anweisung schreibst, bestimmt, wo deine Debugging-Ausgaben ausgegeben werden. - -#### Frontmatter - -Eine `console.log()`-Anweisung im Astro-Frontmatter wird immer in dem **Terminal** ausgegeben, auf dem die Astro-CLI läuft. Das liegt daran, dass Astro auf dem Server läuft und nie im Browser. - -```astro {5} ---- -const sum = (a, b) => a + b; - -// Beispiel: Gibt "4" im CLI-Terminal aus -console.log(sum(2, 2)); ---- -``` - -#### JS-Skripte - -Code, der innerhalb eines Astro-`<script>`-Tags geschrieben oder importiert wird, wird im Browser ausgeführt. Alle `console.log()`-Anweisungen oder andere Debug-Ausgaben werden auf der Konsole deines Browsers ausgegeben. - -### Debugging von Framework-Komponenten - -[Framework-Komponenten](/de/guides/framework-components/) (wie React und Svelte) sind einzigartig: sie werden standardmäßig serverseitig gerendert, was bedeutet, dass die `console.log()` debug-Ausgaben im Terminal sichtbar sind. Sie können aber auch für den Browser hydratisiert werden, so dass deine debug-Logs auch im Browser erscheinen können. - -Dies kann nützlich sein, um Unterschiede zwischen der SSR-Ausgabe und den hydratisierten Komponenten im Browser zu debuggen. - -### Astro `<Debug />` Komponente - -Um dir das Debuggen deiner Astro-Komponenten zu erleichtern, bietet Astro eine eingebaute `<Debug />` Komponente, die jeden Wert direkt in die HTML-Vorlage deiner Komponente überträgt. Das ist nützlich für das schnelle Debugging im Browser, ohne dass du zwischen deinem Terminal und deinem Browser hin- und herwechseln musst. - -```astro {2,7} ---- -import { Debug } from 'astro/components'; -const sum = (a, b) => a + b; ---- - -<!-- Beispiel: Gibt {Antwort: 6} im Browser aus--> -<Debug answer={sum(2, 4)} /> -``` - -Die Debug-Komponente unterstützt eine Vielzahl von Syntaxoptionen für noch flexibleres und übersichtlicheres Debugging: - -```astro {2,7-9} ---- -import { Debug } from 'astro/components'; -const sum = (a, b) => a + b; -const answer = sum(2, 4); ---- -<!-- Beispiel: Alle drei Beispiele sind gleichwertig. --> -<Debug answer={sum(2, 4)} /> -<Debug {{answer: sum(2, 4)}} /> -<Debug {answer} /> -``` - -## Brauchst du mehr? - -Komm und chatte mit uns auf [Discord](https://astro.build/chat) und erkläre dein Problem im Channel "#support". Wir helfen dir immer gerne! - -Besuche die aktuellen [offenen Tickets in Astro](https://github.com/withastro/astro/issues/), um zu sehen, ob dein Problem bereits bekannt ist. Andernfalls kannst du einen Fehlerbericht einreichen. - -Du kannst auch unsere [RFC Diskussionen](https://github.com/withastro/rfcs/discussions/) besuchen, um zu sehen, ob du eine bekannte Einschränkung von Astro gefunden hast, und um zu prüfen, ob es aktuelle Vorschläge gibt, die sich auf deinen Anwendungsfall beziehen. diff --git a/src/content/docs/de/guides/typescript.mdx b/src/content/docs/de/guides/typescript.mdx deleted file mode 100644 index e34feb54ea600..0000000000000 --- a/src/content/docs/de/guides/typescript.mdx +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: TypeScript -description: Lerne, wie du die integrierte TypeScript-Unterstützung von Astro nutzen kannst. -i18nReady: true ---- -import Since from '~/components/Since.astro' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import { Tabs, TabItem } from '@astrojs/starlight/components' - - -Astro wird mit integrierter Unterstützung für [TypeScript](https://www.typescriptlang.org/) ausgeliefert. Du kannst `.ts`- und `.tsx`-Dateien in dein Astro-Projekt importieren, TypeScript-Code direkt in deiner [Astro-Komponente](/de/basics/astro-components/#das-komponentenskript) schreiben und sogar eine [`astro.config.ts`](/de/guides/configuring-astro/#die-astro-konfigurationsdatei)-Datei verwenden, wenn du möchtest. - -Mit TypeScript kannst du Fehler zur Laufzeit verhindern, indem du die Struktur von Objekten und Komponenten in deinem Code definierst. Wenn du zum Beispiel TypeScript verwendest, um [die Eigenschaften deiner Komponente](#komponenten-eigenschaften) einzugeben, bekommst du in deinem Editor eine Fehlermeldung, wenn du eine Eigenschaft setzt, die deine Komponente nicht akzeptiert. - -Du musst keinen TypeScript-Code in deinen Astro-Projekten verwenden, um davon zu profitieren. Astro behandelt deinen Komponentencode immer als TypeScript, und die [Astro VSCode Extension](/de/editor-setup/) leitet so viel wie möglich ab, um Autovervollständigung, Hinweise und Fehler in deinem Editor bereitzustellen. - -Der Astro-Dev-Server führt keine Typüberprüfung durch, aber du kannst ein [separates Skript](#typenprüfung) verwenden, um auf der Kommandozeile auf Typfehler zu prüfen. - -## Einrichtung -Astro-Starterprojekte enthalten eine `tsconfig.json`-Datei in deinem Projekt. Auch wenn du keinen TypeScript-Code schreibst, ist diese Datei wichtig, damit Tools wie Astro und VS Code dein Projekt verstehen können. Einige Funktionen (wie npm-Paketimporte) werden ohne die Datei `tsconfig.json` im Editor nicht vollständig unterstützt. Wenn du Astro manuell installierst, solltest du diese Datei selbst erstellen. - -Astro enthält drei erweiterbare `tsconfig.json`-Vorlagen: `base`, `strict` und `strictest`. Die `base`-Vorlage ermöglicht die Unterstützung moderner JavaScript-Funktionen und wird auch als Grundlage für die anderen Vorlagen verwendet. Wir empfehlen, `strict` oder `strictest` zu verwenden, wenn du vorhast, in deinem Projekt TypeScript zu schreiben. Du kannst die drei Vorlagenkonfigurationen unter [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/) ansehen und vergleichen. - -Um von einer der Vorlagen zu erben, verwende [die Einstellung `extends`] (https://www.typescriptlang.org/tsconfig#extends): - -```json title="tsconfig.json" -{ - "extends": "astro/tsconfigs/base" -} -``` - -Außerdem enthalten unsere Vorlagen eine Datei `env.d.ts` im Ordner `src`, um die [Client-Typen](https://vite.dev/guide/features.html#client-types) von Vite für dein Projekt bereitzustellen: - -```typescript title="env.d.ts" -/// <reference types="astro/client" /> -``` - -Wenn du nicht VSCode verwendest, kannst du das [Astro TypeScript Plugin](https://www.npmjs.com/package/@astrojs/ts-plugin) installieren, um den Import von `.astro`-Dateien aus `.ts`-Dateien zu unterstützen (was für den Re-Export nützlich sein kann). - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install @astrojs/ts-plugin - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add @astrojs/ts-plugin - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add @astrojs/ts-plugin - ``` - </Fragment> -</PackageManagerTabs> - -Füge dann Folgendes zu deiner `tsconfig.json` hinzu: - -```json title="tsconfig.json" - "compilerOptions": { - "plugins": [ - { - "name": "@astrojs/ts-plugin" - }, - ], - } -``` - -Um zu überprüfen, ob das Plugin funktioniert, erstelle eine `.ts`-Datei und importiere eine Astro-Komponente darin. Du solltest in deinem Editor keine Warnmeldungen erhalten. - - -### UI-Frameworks - -Wenn dein Projekt ein [UI-Framework](/de/guides/framework-components/) verwendet, können je nach Framework zusätzliche Einstellungen erforderlich sein. Weitere Informationen findest du in der TypeScript-Dokumentation deines Frameworks. ([Vue](https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript), [React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript)) - -## Typ-Importe - -Verwende, wann immer möglich, explizite Typ-Importe und -Exporte. - -```js del={1} ins={2} ins="type" -import { SomeType } from './script'; -import type { SomeType } from './script'; -``` - -Auf diese Weise vermeidest du Fälle, in denen der Astro-Bundler versucht, deine importierten Typen fälschlicherweise so zu bündeln, als ob sie JavaScript wären. - -Du kannst TypeScript so konfigurieren, dass Typ-Importe in deiner `.tsconfig`-Datei erzwungen werden. - -<Tabs syncKey="typescript-version"> - <TabItem label="TypeScript ≤4.9"> - Setze [`importsNotUsedAsValues`](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) auf `"error"`. TypeScript prüft dann deine Importe und sagt dir, wann `import type` verwendet werden sollte. Diese Einstellung ist standardmäßig in unseren Vorlagen `strict` und `strictest` enthalten. - - ```json title="tsconfig.json" ins={3} - { - "compilerOptions": { - "importsNotUsedAsValues": "error" - } - } - ``` - </TabItem> - <TabItem label="TypeScript ≥5.0"> - Setze [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) auf `true`. TypeScript prüft deine Importe und sagt dir, wann `import type` verwendet werden sollte. - - ```json title="tsconfig.json" ins={3} - { - "compilerOptions": { - "verbatimModuleSyntax": true - } - } - ``` - </TabItem> -</Tabs> - -## Import-Aliase - -Astro unterstützt [Import-Aliase](/de/guides/imports/#import-aliasnamen), die du in deiner `tsconfig.json` & `jsconfig.json` `paths` Konfiguration definierst. - - -```astro title="src/pages/about/nate.astro" "@components" "@layouts" ---- -import HelloWorld from '@components/HelloWorld.astro'; -import Layout from '@layouts/Layout.astro'; ---- -``` - -```json title="tsconfig.json" {5-6} -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@components/*": ["src/components/*"], - "@layouts/*": ["src/layouts/*"] - } - } -} -``` - -## Erweiterung von `window` und `globalThis` - -Du möchtest dem globalen Objekt vielleicht eine Eigenschaft hinzufügen. Das kannst du tun, indem du eine globale Deklaration in deine Datei "env.d.ts" einfügst: - -```ts title="env.d.ts" -declare global { - var myString: string; - function myFunction(): boolean; -} - -export {}; -``` - -Dies ermöglicht die Eingabe von `globalThis.myString` und `globalThis.myFunction`, sowie `window.myString` und `window.myFunction`. - -Beachte, dass `window` nur im clientseitigen Code verfügbar ist. `globalThis` ist sowohl serverseitig als auch clientseitig verfügbar, aber sein serverseitiger Wert wird nicht an den Client weitergegeben. - -Wenn du nur eine Eigenschaft des `window`-Objekts angeben willst, stelle stattdessen eine `Window`-Schnittstelle bereit: - -```ts title="env.d.ts" -interface Window { - myFunction(): boolean; -} -``` - -## Komponenten-Eigenschaften - -Astro unterstützt die Eingabe von Komponenteneigenschaften über TypeScript. Um dies zu aktivieren, füge eine TypeScript `Props`-Schnittstelle zu deinem Komponenten-Frontmatter hinzu. Eine `Export`-Anweisung kann verwendet werden, ist aber nicht notwendig. Die [Astro VSCode Extension](/de/editor-setup/) sucht automatisch nach der `Props`-Schnittstelle und bietet dir die richtige TypeScript-Unterstützung, wenn du die Komponente in einer anderen Vorlage verwendest. -```astro title="src/components/HelloProps.astro" ins={2-5} ---- -interface Props { - name: string; - greeting?: string; -} -const { greeting = 'Hallo', name } = Astro.props; ---- -<h2>{greeting}, {name}!</h2> -``` - -### Gemeinsame Prop-Type-Pattern - -- Wenn deine Komponente keine Eigenschaften oder Slot-Inhalte annimmt, kannst du `type Props = Record<string, never>` verwenden. - -- Wenn deine Komponente Kind-Elemente an ihren Standard-Slot übergeben werden muss, kannst du dies mit `type Props = { children: any; };` erzwingen. - -## Typ-Helfer - -<Since v="1.6.0" /> - -Astro verfügt über einige eingebaute Hilfstypen für gängige Prop-Type-Pattern. Diese sind unter dem Einstiegspunkt `astro/types` verfügbar. - -### Eingebaute HTML-Attribute - -Astro bietet den Typ `HTMLAttributes`, um zu prüfen, ob dein Markup gültige HTML-Attribute verwendet. Du kannst diese Typen verwenden, um Komponenteneigenschaften zu erstellen. - -Wenn du zum Beispiel eine `Link`-Komponente baust, kannst du die Standard-HTML-Attribute für `a`-Tags in den Prop-Typen deiner Komponente wie folgt wiedergeben. - -```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>" ---- -import type { HTMLAttributes } from 'astro/types' -// einen `type` verwenden -type Props = HTMLAttributes<'a'>; -// or extend with an `interface` -interface Props extends HTMLAttributes<'a'> { - myProp?: boolean; -} -const { href, ...attrs } = Astro.props; ---- -<a href={href} {...attrs}> - <slot /> -</a> -``` - -Es ist auch möglich, die Standard-JSX-Definitionen um nicht-standardmäßige Attribute zu erweitern, indem du den `astroHTML.JSX`-Namensraum in einer `.d.ts`-Datei neu deklarierst. - -```ts -// src/custom-attributes.d.ts - -declare namespace astroHTML.JSX { - interface HTMLAttributes { - 'data-count'?: number; - 'data-label'?: string; - } -} -``` - -:::note -`astroHTML` wird global innerhalb von `astro`-Komponenten injiziert. Um es in TypeScript-Dateien zu verwenden, benutze eine [triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html): - -```ts -/// <reference types="astro/astro-jsx" /> - -type MyAttributes = astroHTML.JSX.ImgHTMLAttributes; -``` -::: - -### Ableiten von `getStaticPaths()`-Typen - -<Since v="2.1.0" /> - -Astro enthält Hilfsprogramme für die Arbeit mit Typen, die von deiner Funktion [`getStaticPaths()`](/de/reference/api-reference/#getstaticpaths) für dynamische Routen zurückgegeben werden. - -Du kannst den Typ von [`Astro.params`](/de/reference/api-reference/#astroparams) mit `InferGetStaticParamsType` und den Typ von [`Astro.props`](/de/reference/api-reference/#astroprops) mit `InferGetStaticPropsType` ermitteln: - -```astro title="src/pages/posts/[...slug].astro" {2,14-15} ---- -import { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro'; - -export const getStaticPaths = (async () => { - const posts = await getCollection('blog'); - return posts.map((post) => { - return { - params: { slug: post.slug }, - props: { draft: post.data.draft, title: post.data.title }, - }; - }); -}) satisfies GetStaticPaths; - -type Params = InferGetStaticParamsType<typeof getStaticPaths>; -type Props = InferGetStaticPropsType<typeof getStaticPaths>; - -const { slug } = Astro.params as Params; -// ^? { slug: string; } -const { title } = Astro.props; -// ^? { draft: boolean; title: string; } ---- -``` - -## Typenprüfung - -Um Typfehler in deinem Editor zu sehen, stelle bitte sicher, dass du die [Astro-VS-Code-Erweiterung](/de/editor-setup/) installiert hast. Bitte beachte, dass die Befehle `astro start` und `astro build` den Code mit esbuild übersetzen, aber keine Typprüfung durchführen. Um zu verhindern, dass dein Code gebaut wird, wenn er TypeScript-Fehler enthält, ändere dein "build"-Skript in der Datei `package.json` wie folgt: - -```json title="package.json" del={2} ins={3} ins="astro check && tsc --noEmit && " - "scripts": { - "build": "astro build", - "build": "astro check && tsc --noEmit && astro build", - }, -``` - -:::note -`astro check` prüft nur Typen innerhalb von astro-Dateien und `tsc --noEmit` prüft nur Typen innerhalb von ts-Dateien und tsx-Dateien. Um Typen innerhalb von Svelte- und Vue-Dateien zu prüfen, kannst du die Pakete [`svelte-check`](https://www.npmjs.com/package/svelte-check) bzw. [`vue-tsc`](https://www.npmjs.com/package/vue-tsc) verwenden. -::: - -📚 Lies mehr über [`.ts`-Dateiimporte](/de/guides/imports/#typescript) in Astro. -📚 Lies mehr über [TypeScript-Konfiguration](https://www.typescriptlang.org/tsconfig/). - -## Fehlersuche - -### Fehler bei der gleichzeitigen Typisierung mehrerer JSX-Frameworks - -Wenn du mehrere JSX-Frameworks im selben Projekt verwendest, kann es zu Problemen kommen, da jedes Framework unterschiedliche, manchmal widersprüchliche Einstellungen in der Datei `tsconfig.json` benötigt. - -**Lösung**: Setze die [Einstellung `jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) auf `react` (Standard), `preact` oder `solid-js`, je nachdem, welches Framework du am häufigsten verwendest. Verwende dann einen [pragma-Kommentar](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx) in jeder kollidierenden Datei eines anderen Frameworks. - -Für die Standardeinstellung von `jsxImportSource: react` würdest du folgendes verwenden: - -```jsx -// For Preact -/** @jsxImportSource preact */ - -// For Solid -/** @jsxImportSource solid-js */ -``` diff --git a/src/content/docs/de/guides/upgrade-to/v2.mdx b/src/content/docs/de/guides/upgrade-to/v2.mdx deleted file mode 100644 index 35b3e2f9fef99..0000000000000 --- a/src/content/docs/de/guides/upgrade-to/v2.mdx +++ /dev/null @@ -1,423 +0,0 @@ ---- -title: Auf Astro v2 aktualisieren -description: So aktualisierst du dein Projekt auf die neueste Version von Astro. -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import { FileTree } from '@astrojs/starlight/components'; - - -Diese Anleitung hilft dir bei der Migration von Astro v1 zu Astro v2. - -Du musst ein älteres Projekt auf v1 aktualisieren? Siehe unsere [ältere Anleitung zur Migration](/de/guides/upgrade-to/v1/). - -## Astro-Aktualisierung - -Aktualisiere die Astro-Version deines Projekts mit deinem Paketmanager auf die neueste Version. Wenn du Astro-Integrationen verwendest, aktualisiere bitte auch diese auf die neueste Version. - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - # Upgrade auf Astro v2.x - npm install astro@latest - - # Beispiel: React- und Tailwind-Integrationen aktualisieren - npm install @astrojs/react@latest @astrojs/tailwind@latest - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - # Upgrade auf Astro v2.x - pnpm add astro@latest - - # Beispiel: React- und Tailwind-Integrationen aktualisieren - pnpm add @astrojs/react@latest @astrojs/tailwind@latest - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - # Upgrade auf Astro v2.x - yarn add astro@latest - - # Beispiel: React- und Tailwind-Integrationen aktualisieren - yarn add @astrojs/react@latest @astrojs/tailwind@latest - ``` - </Fragment> -</PackageManagerTabs> - -## Astro v2.0 Breaking Changes - -Astro v2.0 enthält einige wichtige Änderungen und einige veraltete Funktionen wurden entfernt. Wenn dein Projekt nach dem Upgrade auf v2.0 nicht mehr wie erwartet funktioniert, findest du in dieser Anleitung eine Übersicht über alle Änderungen und Anweisungen, wie du deine Codebasis aktualisieren kannst. - -Siehe [das Änderungsprotokoll](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) für die vollständigen Versionshinweise. - -### Entfernt: Unterstützung für Node 14 - -Der Node 14 wird voraussichtlich im April 2023 sein Lebensende erreichen. - -Astro v2.0 verzichtet komplett auf die Unterstützung von Node 14, damit alle Astro-Benutzer die Vorteile der moderneren Funktionen von Node nutzen können. - -#### Was soll ich tun? - - Vergewissere dich, dass sowohl deine Entwicklungs- als auch dein Veröffentlichungs-Umgebung **Node `16.12.0` oder höher** verwenden. - -1. Überprüfe deine lokale Version von Node mit: - - ```sh - node -v - - ``` - Wenn deine lokale Entwicklungsumgebung aktualisiert werden muss, installiere [Node](https://nodejs.org/en/download/). - - -2. Überprüfe die Dokumentation deiner [Aktualisierungsumgebung](/de/guides/deploy/), um sicherzustellen, dass sie Node 16 unterstützt. - - Du kannst Node `16.12.0` für dein Astro-Projekt entweder in einer Dashboard-Konfigurationseinstellung oder in einer `.nvmrc`-Datei angeben. - - -### Reserviert: `src/content/` - -Astro v2.0 enthält jetzt die Collections-API, mit der du deine Markdown- und MDX-Dateien in [content collections](/de/guides/content-collections/) organisieren kannst. Diese API reserviert `src/content/` als einen speziellen Ordner. - -#### Was soll ich tun? - -Benenne einen bestehenden `src/content/` Ordner um, um Konflikte zu vermeiden. Dieser Ordner kann, wenn er existiert, nur noch für [Content Collections](/de/guides/content-collections/) verwendet werden. - -### Geändert: `Astro.site` nachfolgender Schrägstrich - -In v1.x stellte Astro sicher, dass die URL, die du als `site` in `astro.config.mjs` einstellst, immer einen abschließenden Schrägstrich hat, wenn sie über `Astro.site` aufgerufen wird. - -Astro v2.0 no longer modifies the value of `site`. `Astro.site` will use the exact value defined, and a trailing slash must be specified if desired. - -#### Was soll ich tun? - - Füge in der Datei `astro.config.mjs` einen abschließenden Schrägstrich zu der in `site` festgelegten URL hinzu. - -```js del={5} ins={6} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - site: 'https://example.com', - site: 'https://example.com/', -}); -``` - -### Geändert: `_astro/` Ordner für Build-Assets - -In v1.x wurden die Assets an verschiedenen Orten gebaut, darunter `assets/`, `chunks/` und im Stammverzeichnis der Build-Ausgabe. - -Astro v2.0 verschiebt und vereinheitlicht den Speicherort aller Build-Output-Assets in einen neuen `_astro/` Ordner. - -<FileTree> -- dist/ - - _astro - - client.9218e799.js - - index.df3f880e0.css -</FileTree> - -Du kannst diesen Ort mit der [neuen Konfigurationsoption `build.assets`](/de/reference/configuration-reference/) konfigurieren. - -#### Was soll ich tun? - -Aktualisiere die Konfiguration deiner Veröffentlichungsplattform, wenn sie auf den Speicherort dieser Assets angewiesen ist. - -### Geändert: Markdown Plugin Konfiguration - -#### Entfernt: `extendDefaultPlugins` - -In v1.x verwendete Astro `markdown.extendDefaultPlugins`, um die Standard-Plugins von Astro wieder zu aktivieren, wenn du deine eigenen Markdown-Plugins hinzufügst. - -Mit Astro v2.0 wurde diese Konfigurationsoption komplett entfernt, da das Verhalten nun standardmäßig ist. - -Die Anwendung von Markdown-Plugins und Rehype-Plugins in deiner Markdown-Konfiguration **deaktiviert nicht mehr die Standard-Plugins von Astro**. GitHub-Flavored Markdown und Smartypants werden jetzt unabhängig davon angewendet, ob benutzerdefinierte `remarkPlugins` oder `rehypePlugins` konfiguriert sind oder nicht. - - -##### Was soll ich tun? - -Entferne `extendDefaultPlugins` in deiner Konfiguration. Das ist jetzt das Standardverhalten von Astro in v2.0, und du kannst diese Zeile ersatzlos löschen. - -```js del={6} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - markdown: { - extendDefaultPlugins, - } -}); -``` - -#### Hinzugefügt: `gfm` und `smartypants` - -In v1.x konntest du die beiden Standard-Markdown-Plugins von Astro (GitHub-Flavored Markdown und SmartyPants) deaktivieren, indem du `markdown.extendDefaultPlugins: false` setzt. - -Astro v2.0 ersetzt `markdown.extendDefaultPlugins: false` mit separaten boolschen Optionen, um jedes der in Astro eingebauten Standard-Markdown-Plugins einzeln zu steuern. Diese sind standardmäßig aktiviert und können unabhängig voneinander auf `false` gesetzt werden. - -##### Was soll ich tun? - -Entferne `extendDefaultPlugins: false` und füge stattdessen die Optionen hinzu, um jedes Plugin einzeln zu deaktivieren. - -- `markdown.gfm: false` deaktiviert GitHub-Flavored Markdown -- `markdown.smartypants: false` deaktiviert SmartyPants - -```js del={6} ins={7-8} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - markdown: { - extendDefaultPlugins: false, - smartypants: false, - gfm: false, - } -}); -``` - -### Geändert: MDX-Plugin-Konfiguration - -#### Ersetzt: `extendPlugins` geändert in `extendMarkdownConfig` - -In Version 1.x wurde mit der Option `extendPlugins` der MDX-Integration gesteuert, wie deine MDX-Dateien deine Markdown-Konfiguration erben sollten: die gesamte Markdown-Konfiguration (`markdown`) oder nur die Standard-Plugins von Astro (`default`). - -Astro v2.0 ersetzt das von `mdx.extendPlugins` gesteuerte Verhalten durch drei neue, unabhängig voneinander konfigurierbare Optionen, die standardmäßig `true` sind: - -- **[`mdx.extendMarkdownConfig`](/de/guides/integrations-guide/mdx/#extendmarkdownconfig)**, um alle oder keine deiner Markdown-Konfigurationen zu erben -- **`mdx.gfm`** zum Aktivieren oder Deaktivieren von GitHub-Flavored Markdown in MDX -- **`mdx.smartypants`** zum Aktivieren oder Deaktivieren von SmartyPants in MDX - -##### Was soll ich tun? - -Lösche `extendPlugins: 'markdown'` in deiner Konfiguration. Dies ist jetzt das Standardverhalten. - -```js del={8} -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; - -export default defineConfig({ - integrations: [ - mdx({ - extendPlugins: 'markdown', - }), - ], -}); -``` - -Ersetze `extendPlugins: 'defaults'` durch `extendMarkdownConfig: false` und füge die separaten Optionen für GitHub-Flavored Markdown und SmartyPants hinzu, um diese Standard-Plugins einzeln in MDX zu aktivieren. - -```js del={8} ins={9-11} -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; - -export default defineConfig({ - integrations: [ - mdx({ - extendPlugins: 'defaults', - extendMarkdownConfig: false, - smartypants: true, - gfm: true, - }), - ], -}); -``` - -#### Hinzugefügt: Mehr MDX-Konfigurationsoptionen zur Anpassung an Markdown - -Mit Astro v2.0 kannst du jetzt [jede verfügbare Markdown-Konfigurationsoption](/de/reference/configuration-reference/#markdown-options) (außer `drafts`) einzeln in deiner MDX-Integrationskonfiguration einstellen. - -```js -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import mdx from '@astrojs/mdx'; - -export default defineConfig({ - markdown: { - remarkPlugins: [remarkPlugin1], - gfm: true, - }, - integrations: [ - mdx({ - remarkPlugins: [remarkPlugin2], - gfm: false, - }) - ] -}); -``` - -##### Was soll ich tun? - -Überprüfe deine Markdown- und MDX-Konfiguration und vergleiche deine bestehende Konfiguration mit den neuen Optionen. - - -### Geändert: Plugin-Zugriff auf Frontmatter - -In v1.x hatten die Plugins remark und rehype keinen Zugriff auf das Frontmatter der Benutzer. Astro hat das Frontmatter der Plugins mit dem Frontmatter deiner Datei zusammengeführt, ohne das Frontmatter der Datei an deine Plugins weiterzugeben. - -Mit Astro v2.0 können remark- und rehype-Plugins per Frontmatter-Injection auf das Frontmatter des Nutzers zugreifen. So können Plugin-Autoren das bestehende Frontmatter eines Benutzers ändern oder neue Eigenschaften auf der Grundlage anderer Eigenschaften berechnen. - - -#### Was soll ich tun? - -Überprüfe alle remark und rehype Plugins, die du geschrieben hast, um zu sehen, ob sich ihr Verhalten geändert hat. Beachte, dass `data.astro.frontmatter` jetzt das Frontmatter des _kompletten_ Markdown- oder MDX-Dokuments ist und nicht mehr ein leeres Objekt. - -### Geändert: RSS-Konfiguration - -In v1.x erlaubte das RSS-Paket von Astro die Verwendung von `items: import.meta.glob(...)`, um eine Liste von RSS-Feed-Einträgen zu erstellen. Diese Funktion ist jetzt veraltet und wird in Zukunft abgeschafft. - -Astro v2.0 führt einen `pagesGlobToRssItems()`-Wrapper für die Eigenschaft `items` ein. - - -#### Was soll ich tun? - -Importiere und verpacke dann deine bestehende Funktion, die `import.meta.glob()` enthält, mit dem Helfer `pagesGlobToRssItems()`. - -```js ins={3, 8, 10} -// src/pages/rss.xml.js -import rss, { - pagesGlobToRssItems -} from '@astrojs/rss'; - -export async function get(context) { - return rss({ - items: await pagesGlobToRssItems( - import.meta.glob('./blog/*.{md,mdx}'), - ), - }); -} -``` - -### Geändert: Svelte-IDE-Unterstützung - -Astro v2.0 benötigt eine `svelte.config.js`-Datei in deinem Projekt, wenn du [die Integration `@astrojs/svelte`](/de/guides/integrations-guide/svelte/) verwendest. Diese Datei wird benötigt, um die IDE-Autovervollständigung zu ermöglichen. - -#### Was soll ich tun? - -Füge eine Datei `svelte.config.js` zum Stammverzeichnis deines Projekts hinzu: - -```js -// svelte.config.js -import { vitePreprocess } from '@astrojs/svelte'; - -export default { - preprocess: vitePreprocess(), -}; -``` - -Für neue Benutzer wird diese Datei automatisch hinzugefügt, wenn sie `astro add svelte` ausführen. - -### Entfernt: `legacy.astroFlavoredMarkdown` - -In v1.0 hat Astro das alte Astro-Flavored Markdown (auch bekannt als Komponenten in Markdown) zu einem Legacy-Feature gemacht. - -Astro v2.0 entfernt die Option `legacy.astroFlavoredMarkdown` vollständig. Das Importieren und Verwenden von Komponenten in `.md`-Dateien funktioniert nicht mehr. - -#### Was soll ich tun? - -Entferne dieses Legacy-Option. Sie ist in Astro nicht mehr verfügbar. - -```js del={3-5} -// astro.config.mjs -export default defineConfig({ - legacy: { - astroFlavoredMarkdown: true, - }, -}) - -``` - -Wenn du diese Funktion in v1.x verwendet hast, empfehlen wir [die MDX-Integration](/de/guides/integrations-guide/mdx/), mit der du Komponenten und JSX-Ausdrücke mit Markdown-Syntax kombinieren kannst. - -### Entfernt: `Astro.resolve()` - -In Version 0.24 hat Astro die Funktion `Astro.resolve()` veraltet, um aufgelöste URLs zu Assets zu erhalten, die du im Browser referenzieren möchtest. - -Mit Astro v2.0 wurde diese Option komplett entfernt. die Option `Astro.resolve()` in deinem Code führt zu einem Fehler. - -#### Was soll ich tun? - -Löse Asset-Pfade stattdessen mit `import` auf. Zum Beispiel: - -```astro ---- -// src/pages/index.astro -import 'style.css'; -import imageUrl from './image.png'; ---- - -<img src={imageUrl} /> -``` - -### Entfernt: `Astro.fetchContent()` - -In Version 0.26 hat Astro die Funktion `Astro.fetchContent()` zum Abrufen von Daten aus deinen lokalen Markdown-Dateien veraltet. - -Mit Astro v2.0 wurde diese Option komplett entfernt. `Astro.fetchContent()` in deinem Code wird einen Fehler verursachen. - -#### Was soll ich tun? - -Verwende [`Astro.glob()`](/de/guides/imports/#astroglob), um Markdown-Dateien zu laden, oder verwende stattdessen die Funktion [Content Collections](/de/guides/content-collections/). - -```astro ---- -// src/pages/index.astro -const allPosts = await Astro.glob('./posts/*.md'); ---- -``` - -### Entfernt: `Astro.canonicalURL` - -In v1.0 hat Astro die Funktion `Astro.canonicalURL` zur Erstellung einer kanonischen URL veraltet. - - -Mit Astro v2.0 wurde diese Option komplett entfernt. die Option `Astro.canonicalURL` in deinem Code führt zu einem Fehler. - -#### Was soll ich tun? - -Verwende `Astro.url`, um eine kanonische URL zu erstellen. - -```astro ---- -// src/pages/index.astro -const canonicalURL = new URL(Astro.url.pathname, Astro.site); ---- - -``` - -### Aktualisiert: Vite 4 - -Astro v2.0 führt ein Upgrade von Vite 3 auf [Vite 4](https://vite.dev/) durch, das im Dezember 2022 veröffentlicht wird. - -#### Was soll ich tun? - -Es sollten keine Änderungen an deinem Code nötig sein! Wir haben den Großteil des Upgrades innerhalb von Astro für dich erledigt, aber einige Verhaltensweisen von Vite können sich zwischen den Versionen noch ändern. - -Schau im offiziellen [Vite Migration Guide](https://vite.dev/guide/migration.html) nach, wenn du auf Probleme stößt. - -## Astro v2.0 Experimentelle Optionen wurden entfernt - -Entferne die folgenden experimentellen Option aus `astro.config.mjs`: - -```js del={5-9} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - contentCollections: true, - prerender: true, - errorOverlay: true, - }, -}) -``` - -Diese Funktionen sind jetzt standardmäßig verfügbar: - -- [Content Collections](/de/guides/content-collections/) als eine Möglichkeit, deine Markdown- und MDX-Dateien mit Typsicherheit zu verwalten. -- [Prerendering einzelner Seiten zu statischem HTML](/de/guides/on-demand-rendering/) bei der Verwendung von SSR, um die Geschwindigkeit und Cachefähigkeit zu verbessern. -- Ein neu gestaltetes Overlay für Fehlermeldungen. - -## Bekannte Probleme - -Es gibt derzeit keine bekannten Probleme. diff --git a/src/content/docs/de/guides/upgrade-to/v3.mdx b/src/content/docs/de/guides/upgrade-to/v3.mdx deleted file mode 100644 index 6425c35ce0e6d..0000000000000 --- a/src/content/docs/de/guides/upgrade-to/v3.mdx +++ /dev/null @@ -1,676 +0,0 @@ ---- -title: Auf Astro v3 aktualisieren -description: So aktualisierst du dein Projekt auf die neueste Version von Astro. -i18nReady: true ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - -Diese Anleitung hilft dir bei der Migration von Astro v2 zu Astro v3. - -Du musst ein älteres Projekt auf v2 aktualisieren? Siehe unsere [ältere Anleitung zur Migration](/de/guides/upgrade-to/v2/). - -## Astro-Aktualisierung - -Aktualisiere die Astro-Version deines Projekts mit deinem Paketmanager auf die neueste Version. Wenn du Astro-Integrationen verwendest, aktualisiere bitte auch diese auf die neueste Version. - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - # Upgrade auf Astro v3.x - npm install astro@latest - - # Beispiel: React- und Tailwind-Integrationen aktualisieren - npm install @astrojs/react@latest @astrojs/tailwind@latest - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - # Upgrade auf Astro v3.x - pnpm add astro@latest - - # Beispiel: React- und Tailwind-Integrationen aktualisieren - pnpm add @astrojs/react@latest @astrojs/tailwind@latest - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - # Upgrade auf Astro v3.x - yarn add astro@latest - - # Beispiel: React- und Tailwind-Integrationen aktualisieren - yarn add @astrojs/react@latest @astrojs/tailwind@latest - ``` - </Fragment> -</PackageManagerTabs> - -:::note[Du musst weitermachen?] -Nach dem Aktualisieren von Astro sollten keine Änderungen an deinem Projekt nötig sein! - -Falls jedoch Fehler oder unerwartetes Verhalten auftreten, schau bitte weiter unten nach, was sich geändert hat und möglicherweise in deinem Projekt aktualisiert werden muss. -::: - -## Experimentelle Optionen von Astro v3.0 wurden entfernt - -Entferne die folgenden experimentellen Optionen aus `astro.config.mjs`: - -```js del={5-8} -// astro.config.mjs -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - assets: true, - viewTransitions: true, - }, -}) -``` - -Diese Features sind jetzt standardmäßig verfügbar: - -- View Transitions für animierte Seitenübergänge und persistente Astro-Inseln. -- Eine neue Bildservices-API `astro:assets` für das Verwenden von Bildern in Astro, einschließlich einer neuen `<Image />`-Komponente und der `getImage()`-Funktion. - -Lies mehr über diese zwei interessanten Features und mehr im [Astro 3.0 Blogbeitrag](https://astro.build/blog/astro-3/)! - -## Astro v3.0 Breaking Changes - -Astro v3.0 enthält einige wichtige Änderungen und einige veraltete Features wurden entfernt. Wenn dein Projekt nach dem Upgrade auf v3.0 nicht mehr wie erwartet funktioniert, findest du in dieser Anleitung eine Übersicht über alle Änderungen und Anweisungen, wie du deine Codebasis aktualisieren kannst. - -Siehe [das Änderungsprotokoll](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) für die vollständigen Versionshinweise. - -### Entfernt: Unterstützung für Node 16 - -Node 16 wird voraussichtlich im September 2023 sein Lebensende erreichen. - -Astro v3.0 verzichtet komplett auf die Unterstützung von Node 16, damit alle Astro-Benutzer die Vorteile der moderneren Features von Node nutzen können. - -#### Was soll ich tun? - -Vergewissere dich, dass sowohl deine Entwicklungs- als auch deine Veröffentlichungs-Umgebung **Node `18.14.1` oder höher** verwenden. - -1. Überprüfe deine lokale Version von Node mit: - ```sh - node -v - ``` - - - -2. Überprüfe die Dokumentation deiner [Veröffentlichungs-Umgebung](/de/guides/deploy/), um sicherzustellen, dass sie Node 18 unterstützt. - -Du kannst Node `18.14.1` für dein Astro-Projekt entweder in einer Dashboard-Konfigurationseinstellung oder in einer `.nvmrc`-Datei angeben. - -```bash title=".nvmrc" -18.14.1 -``` -### Entfernt: Unterstützung für TypeScript 4 - -Die `tsconfig.json`-Voreinstellungen in Astro v2.x unterstützen TypeScript 4.x und 5.x. - -Astro v3.0 aktualisiert diese Voreinstellungen und geht jetzt davon aus, dass du TypeScript 5.0 (März 2023) verwendest, oder dass dein Editor diese Version einschließt (wie z.B. VS Code 1.77). - -#### Was soll ich tun? - -Falls du TypeScript lokal installiert hast, aktualisiere es mindestens auf v5.0. - -```bash -npm install typescript@latest --save-dev -``` - -### Entfernt: `@astrojs/image` - -In Astro v2.x stellte Astro eine offizielle Bildintegration zur Verfügung, die Astro `<Image />`- und `<Picture />`-Komponenten einschloss. - -Mit Astro v3.0 wurde diese Integration komplett entfernt. Die neue Lösung für den Umgang mit Bildern ist eine integrierte Bildservices-API: `astro:assets`. - -#### Was soll ich tun? - -Entferne die `@astrojs/image`-Integration aus deinem Projekt. Du musst nicht nur die Integration deinstallieren, sondern auch alle Import-Anweisungen sowie die vorhandenen `<Image />`- und `<Picture />`-Komponenten aktualisieren oder entfernen. Möglicherweise musst du auch einen bevorzugten Standardbildverarbeitungsdienst konfigurieren. - -Die Migration zu `astro:assets` bringt auch einige neue Bildoptionen und Features mit sich, die du vielleicht nutzen möchtest. - -```js del={3,7} -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import image from '@astrojs/image'; - -export default defineConfig({ - integrations: [ - image(), - ] -}) -``` - -### Entfernt: `<Markdown />`-Komponente - -In Astro v1.x wurde die `<Markdown />`-Komponente als veraltet deklariert und in ein externes Paket verschoben. - -In Astro v3.0 wurde das Paket `@astrojs/markdown-component` vollständig entfernt. Die `<Markdown />`-Komponente von Astro wird nicht mehr in deinem Projekt funktionieren. - -#### Was soll ich tun? - -Entferne alle Verwendungen von `@astrojs/markdown-component`. - -```astro del={2} title="src/components/MyAstroComponent.astro" ---- -import Markdown from '@astrojs/markdown-component'; ---- -``` - -Um eine ähnliche `<Markdown />`-Komponente in deinem Code weiter zu verwenden, erwäge die Verwendung von [Community-Integrationen](https://astro.build/integrations/) wie [`astro-remote`](https://github.com/natemoo-re/astro-remote). Stelle sicher, dass du alle nötigen Änderungen an den Importen und Attributen deiner `<Markdown />`-Komponenten vornimmst, die in der Dokumentation der Integration angegeben sind. - -Andernfalls entferne alle Importe der Astro-`<Markdown />`-Komponente sowie die Komponenten selbst aus deinen `.astro`-Dateien. Du musst deine Inhalte dann entweder in HTML umschreiben oder [Markdown importieren](/de/guides/markdown-content/#importing-markdown), indem du `.md`-Dateien verwendest. - -### Entfernt: Veraltete 1.x APIs - -Mit Astro v1.x wurden unsere ursprünglichen Konfigurationseinstellungen sowie die Unterstützung von `<style global>` und `<script hoist>` als veraltet deklariert. Sie wurden jedoch weiterhin zur Abwärtskompatibilität unterstützt. - -Astro v3.0 entfernt diese veralteten APIs vollständig. Stattdessen sollten die offiziell unterstützten [Konfigurationseinstellungen](/de/reference/configuration-reference/) und die moderne Syntax `<style is:global>` und `<script>` verwendet werden. - -#### Was soll ich tun? - -Wenn du weiterhin v1.x APIs verwendest, nutze stattdessen die neuen APIs für die jeweiligen Features: -- Veraltete Konfigurationsoptionen: Siehe [die 0.26 Migrations-Anleitung](/de/guides/upgrade-to/v1/#new-configuration-api) -- Veraltete Skript-/Style-Attributtypen: Siehe [die 0.26 Migrations-Anleitung](/de/guides/upgrade-to/v1/#new-default-script-behavior) - -### Entfernt: Partielle Shims für Web-APIs in Server Code - -In Astro v2.x hat Astro partielle Shims für Web-APIs wie `document` oder `localStorage` im serverseitig gerenderten Code bereitgestellt. Diese Shims waren oft unvollständig und unzuverlässig. - -Astro v3.0 entfernt diese partiellen Shims vollständig. Web-APIs stehen nicht mehr im serverseitig gerenderten Code zur Verfügung. - -#### Was soll ich tun? - -Wenn du Web-APIs in serverseitig gerenderten Komponenten verwendest, musst du entweder die Verwendung dieser APIs bedingt machen oder [`client:only`](/de/reference/directives-reference/#clientonly) verwenden. - -### Entfernt: `image` aus `astro:content` im Schema von Inhalts-Sammlungen - -In Astro v2.x wurde der `image`-Export aus `astro:content` als veraltet deklariert, der für Schemas im Rahmen von Inhalts-Sammlungen verwendet wurde. - -Astro v3.0 entfernt diesen Export vollständig. - -#### Was soll ich tun? - -Wenn du das veraltete `image()` aus `astro:content` verwendest, entferne es, da es nicht mehr existiert. Überprüfe Bilder stattdessen über den `image`-Helfer aus `schema`: - - ```ts title="src/content/config.ts" del={1} ins={2} "({ image })" -import { defineCollection, z, image } from "astro:content"; -import { defineCollection, z } from "astro:content"; - - defineCollection({ - schema: ({ image }) => - z.object({ - image: image(), - }), -}); -``` - -### Entfernt: Shiki-Theme-Namen vor Version 0.14 - -In Astro v2.x wurden einige Shiki-Theme-Namen umbenannt, aber die ursprünglichen Namen wurden wegen der Abwärtskompatibilität beibehalten. - -Astro v3.0 entfernt die ursprünglichen Namen zugunsten der umbenannten Theme-Namen. - -#### Was soll ich tun? - -Wenn dein Projekt eines der folgenden Themes verwendet, benenne es entsprechend seinem aktualisierten Namen um: - -- `material-darker` -> `material-theme-darker` -- `material-default` -> `material-theme` -- `material-lighter` -> `material-theme-lighter` -- `material-ocean` -> `material-theme-ocean` -- `material-palenight` -> `material-theme-palenight` - -### Entfernt: `class:list`-Features - -In Astro v2.x verwendete die [`class:list`-Direktive](/de/reference/directives-reference/#classlist) eine benutzerdefinierte Implementierung, die von [`clsx`](https://github.com/lukeed/clsx) inspiriert war und einige zusätzliche Features wie Deduplizierung und Unterstützung für `Set` enthielt. - -Astro v3.0 verwendet `clsx` jetzt direkt für `class:list`, was keine Deduplizierung oder Unterstützung für `Set`-Werte bietet. - -#### Was soll ich tun? - -Ersetze alle `Set`-Elemente, die der `class:list`-Direktive übergeben werden, durch ein normales `Array`. - -```astro title="src/components/MyAstroComponent.astro" del={4} ins={5} -<Component class:list={[ - 'a', - 'b', - new Set(['c', 'd']) - ['c', 'd'] -]} /> -``` - -### Entfernt: `class:list` als Prop übergeben - -In Astro v2.x wurden [`class:list`-Werte](/de/reference/directives-reference/#classlist) über [`Astro.props['class:list']`](/de/reference/api-reference/#astroprops) an Komponenten übermittelt. - -Astro v3.0 normalisiert `class:list`-Werte zuerst zu einem String, bevor sie über `Astro.props['class']` an Komponenten weitergegeben werden. - -#### Was soll ich tun? - -Entferne jeglichen Code, der den `class:list`-Prop erhält. - -```astro title="src/components/MyAstroComponent.astro" del={2,3,7} ins={4,8} "classList" "'class:list': classList" ---- -import { clsx } from 'clsx'; -const { class: className, 'class:list': classList } = Astro.props; -const { class: className } = Astro.props; ---- -<div - class:list={[className, classList]} - class:list={[className]} -/> -``` - -### Entfernt: kebab-case Umwandlung für camelCase CSS-Variablen - -In Astro v2.x wurden camelCase [CSS-Variablen](/de/guides/styling/#css-variablen), die dem `style`-Attribut übergeben wurden, sowohl in camelCase (wie geschrieben) als auch im kebab-case (für Abwärtskompatibilität beibehalten) gerendert. - -Astro v3.0 entfernt die kebab-case Umwandlung für diese camelCase CSS-Variablennamen, und nur die ursprüngliche camelCase CSS-Variable wird gerendert. - -```astro "my-value" ---- -// src/components/MyAstroComponent.astro -const myValue = "red" ---- -<!-- input --> -<div style={{ "--myValue": myValue }}></div> - -<!-- output (Astro 2.x) --> -<div style="--my-value:var(--myValue);--myValue:red"></div> -<!-- output (Astro 3.0) --> -<div style="--myValue:red"></div> -``` - -#### Was soll ich tun? - -Wenn du darauf vertraut hast, dass Astro kebab-case in deinen Styles umwandelt, aktualisiere deine bestehenden Styles zu camelCase, um fehlende Styles zu verhindern. Zum Beispiel: - -```astro del={3} ins={4} title="src/components/MyAstroComponent.astro" -<style> - div { - color: var(--my-value); - color: var(--myValue); - } -</style> -``` - -### Entfernt: Automatisches Abflachen des Rückgabewerts von `getStaticPaths()` - -In Astro v2.x wurde der Rückgabewert von [`getStaticPaths()`](/de/reference/api-reference/#getstaticpaths) automatisch abgeflacht, um es dir zu ermöglichen, ein Array aus Arrays ohne Fehler zurückzugeben. - -Astro v3.0 entfernt das automatische Abflachen des Rückgabewerts von `getStaticPaths()`. - -#### Was soll ich tun? - -Wenn du ein Array von Arrays statt eines Arrays von Objekten zurückgibst (wie erwartet), sollten jetzt `.flatMap` und `.flat` verwendet werden, um sicherzustellen, dass du ein flaches Array zurückgibst. - -Eine [Fehlermeldung, die darauf hinweist, dass der Rückgabewert von `getStaticPaths()` ein Array aus Objekten sein muss](/de/reference/errors/invalid-get-static-paths-entry/#what-went-wrong), wird bereitgestellt, wenn du deinen Code aktualisieren musst. - -### Verschoben: `astro check` erfordert jetzt ein externes Paket - -In Astro v2.x war [`astro check`](/de/reference/cli-reference/#astro-check) standardmäßig in Astro enthalten, und seine Abhängigkeiten waren in Astro gebündelt. Dies führte zu einem größeren Paket, unabhängig davon, ob du jemals `astro check` verwendet hast. Dies hat auch verhindert, dass du die Version von TypeScript und den Astro Language Server kontrollieren konntest. - -Astro v3.0 verschiebt den Befehl `astro check` aus Astro und erfordert jetzt ein externes Paket `@astrojs/check`. Zusätzlich musst du `typescript` in deinem Projekt installieren, um den Befehl `astro check` zu verwenden. - -#### Was soll ich tun? - -Führe nach dem Upgrade auf Astro v3.0 den Befehl `astro check` aus und befolge die Anweisungen, um die erforderlichen Abhängigkeiten zu installieren. Alternativ kannst du `@astrojs/check` und `typescript` manuell in dein Projekt installieren. - -### Veraltet: `build.excludeMiddleware` und `build.split` - -In Astro v2.x wurden `build.excludeMiddleware` und `build.split` verwendet, um zu ändern, wie bestimmte Dateien beim Verwenden eines Adapters im SSR-Modus ausgegeben wurden. - -Astro v3.0 ersetzt diese Erzeugungs-Konfigurationsoptionen durch neue [SSR-Adapter-Konfigurationsoptionen](/de/guides/integrations-guide/#offizielle-integrationen), um die gleichen Aufgaben zu erledigen: `edgeMiddleware` und `functionPerRoute`. - -#### Was soll ich tun? - -Aktualisiere die Astro-Konfigurationsdatei, um die neuen Optionen nun direkt **in der Adapter-Konfiguration** zu verwenden. - -```js title="astro.config.mjs" del={5-7} ins={9} -import { defineConfig } from "astro/config"; -import vercel from "@astrojs/vercel/serverless"; - -export default defineConfig({ - build: { - excludeMiddleware: true - }, - adapter: vercel({ - edgeMiddleware: true - }), -}); -``` - -```js title="astro.config.mjs" del={5-7} ins={9} -import { defineConfig } from "astro/config"; -import netlify from "@astrojs/netlify/functions"; - -export default defineConfig({ - build: { - split: true - }, - adapter: netlify({ - functionPerRoute: true - }), -}); -``` - -### Veraltet: `markdown.drafts` - -In Astro v2.x ermöglichte die Konfiguration `markdown.drafts` das Vorhandensein von Entwürfen für Seiten, die im Dev-Server verfügbar waren, aber nicht für die Produktion erzeugt wurden. - -Astro v3.0 deklariert dieses Feature als veraltet und bevorzugt die Verwendung von Inhalts-Sammlungen zum Umgang mit Entwurfsseiten durch manuelle Filterung, was mehr Kontrolle über das Feature ermöglicht. - -#### Was soll ich tun? - -Um weiterhin einige Seiten in deinem Projekt als Entwürfe zu kennzeichnen, [verwende stattdessen Inhalts-Sammlungen](/de/guides/content-collections/) und [filtere Seiten manuell aus](/de/guides/content-collections/#filtering-collection-queries), indem du die `draft: true`-Frontmatter-Eigenschaft verwendest. - -### Veraltet: Rückgabe eines einfachen Objekts an Endpunkten - -In Astro v2.x konnten Endpunkte ein einfaches Objekt zurückgeben, das in eine JSON-Antwort umgewandelt wurde. - -Astro v3.0 deklariert dieses Verhalten als veraltet und bevorzugt die direkte Rückgabe eines `Response`-Objekts. - -#### Was soll ich tun? - -Aktualisiere deine Endpunkte, um direkt ein `Response`-Objekt zurückzugeben. - -```ts title="endpoint.json.ts" del={2} ins={3} -export async function GET() { - return { body: { "title": "Bob's blog" }}; - return new Response(JSON.stringify({ "title": "Bob's blog" })); -} -``` - -Wenn du wirklich das vorherige Format beibehalten musst, kannst du das `ResponseWithEncoding`-Objekt verwenden, aber beachte, dass es in Zukunft veraltet sein wird. - -```ts title="endpoint.json.ts" del={2} ins={3} -export async function GET() { - return { body: { "title": "Bob's blog" } }; - return new ResponseWithEncoding({ body: { "title": "Bob's blog" }}); -} -``` - -### Standardwert geändert: `verbatimModuleSyntax` in tsconfig.json-Voreinstellungen - -In Astro v2.x war die Einstellung [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) standardmäßig deaktiviert, wobei ihr TypeScript 4.x-Äquivalent `importsNotUsedAsValues` in der `strict`-Voreinstellung aktiviert war. - -In Astro v3.0 ist `verbatimModuleSyntax` in jeder Voreinstellung aktiviert. - -#### Was soll ich tun? - -Diese Option erfordert, dass Typen mit der Syntax `import type` importiert werden. - -```astro title="src/components/MyAstroComponent.astro" "type" ---- -import { type CollectionEntry, getEntry } from "astro:content"; ---- -``` - -Wir empfehlen, diese Option aktiviert zu lassen und deine Typen ordnungsgemäß mit `type` zu importieren (wie oben gezeigt). Sollte es zu Problemen kommen, kannst du die Option deaktivieren, indem du `verbatimModuleSyntax: false` in deiner `tsconfig.json`-Datei setzt. - -```json title="tsconfig.json" "false" -{ - "compilerOptions": { - "verbatimModuleSyntax": false - } -} -``` - -### Standardwert geändert: Port `3000` - -In Astro v2.x lief Astro standardmäßig auf Port `3000`. - -Astro v3.0 ändert den [Standardport](/de/reference/cli-reference/#--port-number) zu `4321`. 🚀 - -#### Was soll ich tun? - -Aktualisiere alle vorhandenen Verweise auf `localhost:3000`, zum Beispiel in Tests oder in deiner `README`, um den neuen Port `localhost:4321` widerzuspiegeln. - -### Standardwert geändert: import.meta.env.BASE_URL `trailingSlash` - -In Astro v2.x hat `import.meta.env.BASE_URL` standardmäßig deine [`base`](/de/reference/configuration-reference/#base)-Einstellung in Kombination mit einem [trailingSlash](/de/reference/configuration-reference/#trailingslash) um ein Schrägstrichsuffix erweitert. `trailingSlash: "ignore"` hat ebenfalls ein Schrägstrichsuffix hinzugefügt. - -Astro v3.0 fügt `import.meta.env.BASE_URL` standardmäßig nicht mehr mit einem Schrägstrichsuffix hinzu, auch nicht wenn `trailingSlash: "ignore"` festgelegt ist. (Das bestehende Verhalten von `base` in Kombination mit `trailingSlash: "always"` oder `trailingSlash: "never"` bleibt unverändert.) - -#### Was soll ich tun? - -Wenn deine `base` bereits ein Schrägstrichsuffix hat, ist keine Änderung erforderlich. - -Wenn deine `base` kein Schrägstrichsuffix hat, füge einen hinzu, wenn du das vorherige Standardverhalten (oder `trailingSlash: "ignore"`) beibehalten möchtest: - -```js title="astro.config.mjs" del={4} ins={5} -import { defineConfig } from "astro/config"; - -export default defineConfig({ - base: 'my-base', - base: 'my-base/', -}); -``` - -### Standardwert geändert: `compressHTML` - -In Astro v2.x hat Astro dein ausgegebenes HTML nur komprimiert, wenn [`compressHTML`](/de/reference/configuration-reference/#compresshtml) explizit auf `true` gesetzt war. Der Standardwert war `false`. - -Astro v3.0 komprimiert jetzt standardmäßig das ausgegebene HTML. - -#### Was soll ich tun? - -Du kannst jetzt `compressHTML: true` aus deiner Konfiguration entfernen, da dies das neue Standardverhalten ist. - -```js title="astro.config.mjs" del={4} -import { defineConfig } from "astro/config"; - -export default defineConfig({ - compressHTML: true -}) -``` - -Du musst nun `compressHTML: false` setzen, um die HTML-Komprimierung nicht zu verwenden. - -### Standardwert geändert: `scopedStyleStrategy` - -In Astro v2.x war der Standardwert von [`scopedStyleStrategy`](/de/reference/configuration-reference/#scopedstylestrategy) `"where"`. - -Astro v3.0 führt einen neuen Standardwert ein: `"attribute"`. Standardmäßig werden Styles jetzt mit `data-*`-Attributen angewendet. - -#### Was soll ich tun? - -Um das aktuelle [Style-Scoping](/de/guides/styling/#scoped-styles) deines Projekts beizubehalten, aktualisiere die Konfigurationsdatei auf den vorherigen Standardwert: - - -```js title="astro.config.mjs" ins={4} -import { defineConfig } from "astro/config"; - -export default defineConfig({ - scopedStyleStrategy: "where" -}) -``` - -### Standardwert geändert: `inlineStyleSheets` - -In Astro v2.x wurden standardmäßig alle Projekt-Styles als Link-Tags gesendet. Du konntest die Option [`build.inlineStylesheets`](/de/reference/configuration-reference/#buildinlinestylesheets) verwenden, um Styles stattdessen direkt in `<style>`-Tags einzubetten: Mit der Einstellung `"always"` wurden alle Styles eingebettet, und mit `"auto"` nur Styles unterhalb einer bestimmten Größe. Die Standardvoreinstellung war `"never"`. - -Astro v3.0 ändert den Standardwert von `inlineStylesheets` zu `"auto"`. Stylesheets kleiner als `ViteConfig.build.assetsInlineLimit` (Standard: 4 KB) werden standardmäßig eingefügt. Andernfalls werden Projekt-Styles in externen Stylesheets gesendet. - -#### Was soll ich tun? -Wenn du das aktuelle Verhalten deines Projekts beibehalten möchtest, setze `build.inlineStylesheets` auf den vorherigen Standardwert `"never"`: - - -```js title="astro.config.mjs" ins={4-6} -import { defineConfig } from "astro/config"; - -export default defineConfig({ - build: { - inlineStylesheets: "never" - } -}) -``` - -### Standardwert geändert: Bilderdienst - -In Astro v2.x war Squoosh der [Standard-Bildverarbeitungsdienst](/de/guides/images/#default-image-service). - -Astro v3.0 enthält jetzt standardmäßig Sharp als Bildverarbeitungsdienst und bietet stattdessen eine Konfigurationsoption, um Squoosh zu verwenden. - -#### Was soll ich tun? - -:::note -Bei Verwendung eines [strikten Paketmanagers](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) wie `pnpm` musst du möglicherweise Sharp manuell in dein Projekt installieren, obwohl es eine Abhängigkeit von Astro ist: - -```bash -pnpm add sharp -``` -::: - -Wenn du Squoosh weiterhin für die Verarbeitung deiner Bilder verwenden möchtest, aktualisiere deine Konfiguration wie folgt: - -```ts title="astro.config.mjs" ins={4-6} -import { defineConfig, squooshImageService } from "astro/config"; - -export default defineConfig({ - image: { - service: squooshImageService(), - } -}) -``` - -### Geändert: Groß- und Kleinschreibung der HTTP-Anforderungsmethoden - -In Astro v2.x wurden [HTTP-Anforderungsmethoden](/de/guides/endpoints/#http-methoden) mit Kleinbuchstaben verwendet: `get`, `post`, `put`, `all` und `del`. - -Astro v3.0 verwendet Großbuchstaben, einschließlich `DELETE` anstelle von `del`. - -#### Was soll ich tun? - -Benenne alle Funktionen in ihre Großbuchstaben-Äquivalente um: - -- `get` to `GET` -- `post` to `POST` -- `put` to `PUT` -- `all` to `ALL` -- `del` to `DELETE` - -```js title="endpoint.ts" del={1} ins={2} -export function get() { -export function GET() { - return new Response(JSON.stringify({ "title": "Bob's blog" })); -} -``` - -### Geändert: Konfiguration für mehrere JSX-Frameworks - -In Astro v2.x konntest du [mehrere JSX-Framework-Integrationen](/de/guides/integrations-guide/#offizielle-integrationen) (React, Solid, Preact) im selben Projekt verwenden, ohne angeben zu müssen, welche Dateien zu welchem Framework gehören. - -Astro v3.0 erfordert nun, dass du angibst, welches Framework für deine Dateien verwendet werden soll, indem du neue `include`- und `exclude`-Integrationskonfigurationsoptionen verwendest, wenn du mehrere JSX-Framework-Integrationen installiert hast. Dies ermöglicht es Astro, die Verwendung eines einzigen Frameworks besser zu unterstützen, sowie fortgeschrittene Funktionen wie React Fast Refresh. - -#### Was soll ich tun? - -Wenn du mehrere JSX-Frameworks im selben Projekt verwendest, setze `include` (und optional `exclude`) auf ein Array von Dateien und/oder Ordnern. Wildcards können verwendet werden, um mehrere Dateipfade einzuschließen. - -Wir empfehlen, gemeinsame Framework-Komponenten im selben Ordner zu speichern (z.B. `/components/react/` und `/components/solid/`), um die Angabe deiner Includes zu erleichtern, aber dies ist nicht erforderlich: - -```js ins={13,16,19} -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; -import react from '@astrojs/react'; -import svelte from '@astrojs/svelte'; -import vue from '@astrojs/vue'; -import solid from '@astrojs/solid-js'; - -export default defineConfig({ - // Aktiviere viele Frameworks, um verschiedene Arten von Komponenten zu unterstützen. - // `include` ist nicht erforderlich, wenn du nur ein Framework verwendest! - integrations: [ - preact({ - include: ['**/preact/*'] - }), - react({ - include: ['**/react/*'] - }), - solid({ - include: ['**/solid/*'], - }), - ] -}); -``` - -### Geändert: `Astro.cookies.get(key)` kann `undefined` zurückgeben - -In Astro v2.x hat [`Astro.cookies.get(key)`](/de/reference/api-reference/#astrocookies) immer ein [`AstroCookie`-Objekt](/de/reference/api-reference/#astrocookie) zurückgegeben, auch wenn kein Cookie existierte. Um auf dessen Existenz zu prüfen, musstest du `Astro.cookies.has(key)` verwenden. - -Astro v3.0 gibt für `Astro.cookies.get(key)` nun `undefined` zurück, wenn kein Cookie existiert. - -#### Was soll ich tun? - -Diese Änderung wird keinen Code unbrauchbar machen, der auf die Existenz des `Astro.cookie`-Objekts überprüft, bevor `Astro.cookies.get(key)` verwendet wird, ist jedoch jetzt nicht mehr erforderlich. - -Du kannst ohne Probleme jeglichen Code entfernen, der `has()` verwendet, um zu überprüfen, ob der Wert von `Astro.cookies` `undefined` ist: - -```js del={1-3} ins={5-7} -if (Astro.cookies.has(id)) { - const id = Astro.cookies.get(id)!; -} - -const id = Astro.cookies.get(id); -if (id) { -} -``` - -### Geändert: Programmatisches Ausführen der Astro Kommandozeilen­schnittstelle (CLI) - -In Astro v2.x exportierte und startete der Eintrittspunkt des Pakets `"astro"` die Astro CLI direkt. Es wird nicht empfohlen, Astro auf diese Weise in der Praxis auszuführen. - -Astro v3.0 entfernt die CLI aus dem Eintrittspunkt und exportiert einen neuen Satz experimenteller JavaScript-APIs, einschließlich `dev()`, `build()`, `preview()` und `sync()`. - -#### Was soll ich tun? - -Um die Astro Kommandozeilenschnittstelle [programmatisch auszuführen](/de/reference/programmatic-reference/), verwende die neuen experimentellen JavaScript-APIs: - - -```js -import { dev, build } from "astro"; - -// Starte den Astro-Entwicklungsserver -const devServer = await dev(); -await devServer.stop(); - -// Erzeuge dein Astro-Projekt -await build(); -``` - -### Geändert: Pfade für den Export von internen Astro-API-Einstiegspunkten - -In Astro v2.x konntest du interne Astro-APIs aus `astro/internal/*` und `astro/runtime/server/*` importieren. - -Astro v3.0 entfernt die beiden Einstiegspunkte zugunsten des vorhandenen Einstiegspunkts `astro/runtime/*`. Zusätzlich wurde ein neuer Export `astro/compiler-runtime` für compiler-spezifischen Laufzeitcode hinzugefügt. - -#### Was soll ich tun? - -Diese sind Einstiegspunkte für Astros interne API und sollten sich nicht auf dein Projekt auswirken. Aber wenn du diese Einstiegspunkte verwendest, aktualisiere sie wie unten gezeigt: - - -```js del={1,4,10} ins={2,5,11} -import 'astro/internal/index.js'; -import 'astro/runtime/server/index.js'; - -import 'astro/server/index.js'; -import 'astro/runtime/server/index.js'; -``` - -```js ins={5} del={4} -import { transform } from '@astrojs/compiler'; - -const result = await transform(source, { - internalURL: 'astro/runtime/server/index.js', - internalURL: 'astro/compiler-runtime', - // ... -}); -``` - -## Community-Ressourcen - -Du kennst eine gute Ressource für Astro v3.0? [Bearbeite diese Seite](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v3.mdx) und füge unten einen Link hinzu! - -## Bekannte Probleme - -Es gibt derzeit keine bekannten Probleme. diff --git a/src/content/docs/de/recipes/rss.mdx b/src/content/docs/de/recipes/rss.mdx deleted file mode 100644 index 00c4bcccf6858..0000000000000 --- a/src/content/docs/de/recipes/rss.mdx +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Füge einen RSS-Feed hinzu -description: Füge einen RSS-Feed zu deiner Astro Website hinzu, so dass Benutzer deine Inhalte abonnieren können. -i18nReady: true -type: recipe ---- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Since from '~/components/Since.astro' - -Astro unterstützt die schnelle, automatische Generierung von RSS-Feeds für Blogs und andere Content-Websites. RSS-Feeds machen es einfach für Benutzer deine Inhalte zu abbonieren. - -## Einrichten von `@astrojs/rss` - -Das `@astrojs/rss`-Paket bietet Hilfsfunktionen zur Erzeugung von RSS-Feeds mithilfe von [API-Endpunkten](/de/guides/endpoints/#endpunkte-für-statische-dateien). Dies ermöglicht statische Feeds _und_ die On-Demand-Generierung bei Verwendung eines [SSR-Adapters](/de/guides/on-demand-rendering/). - -1. Installiere `@astrojs/rss` mit deinem bevorzugten Paketmanager: - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install @astrojs/rss - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add @astrojs/rss - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add @astrojs/rss - ``` - </Fragment> -</PackageManagerTabs> - -:::tip -Stelle sicher, dass du in deiner `astro.config` eine [`site` konfiguriert](/de/reference/configuration-reference/#site) hast. Diese wird zur Erzeugung von Links in deinem RSS-Feed genutzt. -::: - -2. Erstelle eine Datei in `src/pages` mit einem Namen deiner Wahl und der Dateierweiterung `.xml.js` um die Ausgabe-URL für deinen Feed zu erzeugen. Einige übliche Namen für RSS-Feed URLs sind `feed.xml` oder `rss.xml`. - -Die untere Beispiels-Datei `src/pages/rss.xml.js` wird einen RSS-Feed unter `site/rss.xml` erstellen. - -3. Importiere die `rss()`-Hilfsfunktion aus dem `@astrojs/rss`-Paket in deine `.xml.js` Datei und exportiere eine Funktion, die sie mit folgenden Parametern zurückgibt: - -```js title="src/pages/rss.xml.js" -import rss from '@astrojs/rss'; - -export function GET(context) { - return rss({ - // `<title>`-Feld in der XML-Ausgabe - title: 'Buzz’s Blog', - // `<description>`-Feld in der XML-Ausgabe - description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen', - // Ziehe die "site" deines Projektes von dem Endpunkt-Kontext ein - // https://docs.astro.build/de/reference/api-reference/#endpunkt-kontext - site: context.site, - // Liste von `<item>`-Elementen in der XML-Ausgabe - // Siehe Abschnitt "Generieren von 'items'" für Beispiele mit Inhalts-Sammlungen und Glob-Imports - - items: [], - // (optional) Benutzerdefinierten XML-Code einfügen - customData: `<language>de</language>`, - }); -} -``` - -## Generieren von `items` - -Das `items`-Feld akzeptiert eine Liste von RSS-Feed-Objekten, jeweils mit den erforderlichen Werten `link`, `title` und `pubDate`. Drei optionale Werte können auch inbegriffen sein: `description` (ein kurzer Auszug), `content` (der gesamte Inhalt deines Beitrages), und das `customData`-Feld zum Einfügen zusätzlicher Daten, wie z. B. anderer Frontmatter-Eigenschaften aus deinen Blog-Beiträgen. - -Du kannst diese Liste aus einem Inhalts-Sammlungs-Schema erzeugen oder durch die Verwendung von [Glob-Imports](/de/guides/imports/#astroglob) für Blogbeiträge, die sich in `src/pages/` befinden. - -### Verwendung von Inhalts-Sammlungen - -Um einen RSS-Feed von Seiten zu erstellen, die durch [Inhalts-Sammlungen](/de/guides/content-collections/) verwaltet werden, verwende die Hilfsfunktion `getCollection()` um die Liste deiner Elemente abzurufen. - -```js title="src/pages/rss.xml.js" "items:" "const blog = await getCollection('blog');" -import rss from '@astrojs/rss'; -import { getCollection } from 'astro:content'; - -export async function GET(context) { - const blog = await getCollection('blog'); - return rss({ - title: 'Buzz’s Blog', - description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen', - site: context.site, - items: blog.map((post) => ({ - title: post.data.title, - pubDate: post.data.pubDate, - description: post.data.description, - customData: post.data.customData, - // Berechne den RSS link vom Beitrags-`slug` - // In diesem Beispiel wird davon ausgegangen, dass alle Beiträge als `/blog/[slug]`-Routen gerendert werden - link: `/blog/${post.slug}/`, - })), - }); -} -``` - -Optional: Ersetze dein vorhandenes Blog-Sammlungsschema, um die erwarteten RSS-Eigenschaften durchzusetzen. - -Um sicherzustellen, dass jeder Blogeintrag ein gültiges RSS-Feed-Element erzeugt, kannst du optional `rssSchema` importieren und anwenden, anstatt jede einzelne Eigenschaft deines Schemas zu definieren. - -```js title="src/content/config.ts" "rssSchema" -import { defineCollection } from 'astro:content'; -import { rssSchema } from '@astrojs/rss'; - -const blog = defineCollection({ - schema: rssSchema, -}); - -export const collections = { blog }; -``` - -### Verwendung von Glob-Imports - -<Since v="2.1.0" pkg="@astrojs/rss" /> - -Um einen RSS-Feed aus Dokumenten in `src/pages/` zu erstellen, verwende die Hilfsfunktion `pagesGlobToRssItems()`. Diese akzeptiert ein [`import.meta.glob`](https://vite.dev/guide/features.html#glob-import)-Ergebnis und gibt eine Liste gültiger RSS-Feed-Elemente aus (siehe [mehr über das Schreiben von Glob-Patterns](/de/guides/imports/#glob-patterns) um eingeschlossene Seiten anzugeben). - -:::caution -Diese Funktion setzt voraus, überprüft jedoch nicht, dass alle erforderlichen Feed-Eigenschaften in der Frontmatter jedes Dokuments vorhanden sind. Wenn du auf Fehler stößt, überprüfe die Frontmatter jeder Seite manuell. -::: - -```js title="src/pages/rss.xml.js" "pagesGlobToRssItems" "await pagesGlobToRssItems(" -import rss, { pagesGlobToRssItems } from '@astrojs/rss'; - -export async function GET(context) { - return rss({ - title: 'Buzz’s Blog', - description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen', - site: context.site, - items: await pagesGlobToRssItems( - import.meta.glob('./blog/*.{md,mdx}'), - ), - }); -} -``` - -:::note[Verwendest du eine ältere Version?] -Übergebe in Versionen von `@astrojs/rss` vor v2.1.0 dein Glob-Ergebnis direkt an `items`, ohne den Wrapper `pagesGlobToRssItems()`: -```js -items: import.meta.glob('./blog/*.{md,mdx}'), -``` -::: - -### Den Vollständigen Beitragsinhalt beifügen - -<Since v="1.6.14" /> - -Der `content` Schlüssel enthält den gesamten Inhalt des Beitrages in HTML. Auf diese Weise kannst du den gesamten Inhalt deines Beitrages RSS-Feed-Readern zur Verfügung stellen. - -:::tip -Ein Paket wie [`sanitize-html`](https://www.npmjs.com/package/sanitize-html) stellt sicher, dass deine Inhalte ordnungsgemäß bereinigt, maskiert und codiert werden. -::: - - -Beim Verwenden von Inhalts-Sammlungen, rendere den `body` des Beitrages mit einem Standard-Markdown-Parser wie [`markdown-it`](https://github.com/markdown-it/markdown-it) und bereinige das Ergebnis: - -```js title="src/pages/rss.xml.js" ins={3, 4, 5, 16} -import rss from '@astrojs/rss'; -import { getCollection } from 'astro:content'; -import sanitizeHtml from 'sanitize-html'; -import MarkdownIt from 'markdown-it'; -const parser = new MarkdownIt(); - -export async function GET(context) { - const blog = await getCollection('blog'); - return rss({ - title: 'Buzz’s Blog', - description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen', - site: context.site, - items: blog.map((post) => ({ - link: `/blog/${post.slug}/`, - // Hinweis: Komponente oder JSX-Ausdrücke in MDX-Dateien werden hierdurch nicht verarbeitet. - content: sanitizeHtml(parser.render(post.body)), - ...post.data, - })), - }); -} -``` - -Beim Verwenden von Glob-Importen mit Markdown, kannst du die `compiledContent` Hilfsfunktion verwerden um den gerenderten HTML-Code zur Bereinigung abzurufen. Hinweis: Diese Funktion ist für MDX-Dateien **nicht** unterstützt. - -```js title="src/pages/rss.xml.js" ins={2, 13} -import rss from '@astrojs/rss'; -import sanitizeHtml from 'sanitize-html'; - -export function GET(context) { - const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true }); - const posts = Object.values(postImportResult); - return rss({ - title: 'Buzz’s Blog', - description: 'Eines bescheidenen Astronauts Handbuch zu den Sternen', - site: context.site, - items: posts.map((post) => ({ - link: post.url, - content: sanitizeHtml(post.compiledContent()), - ...post.frontmatter, - })), - }); -} -``` - -## Ein Stylesheet hinzufügen - -Du kannst deinen RSS-Feed ansprechend gestalten, um die Nutzererfahrung bei der Betrachtung im Browser zu verbessern. - -Nutze die Option `stylesheet` der `rss`-Funktion, um einen absoluten Pfad zu deinem Stylesheet anzugeben. - -```js -rss({ - // Beispiel: Nutze dein Stylesheet aus "public/rss/styles.xsl" - stylesheet: '/rss/styles.xsl', - // ... -}); -``` - -:::tip -Falls du lieber kein eigenes Stylesheet erstellen möchtest, kannst du ein vorgefertigtes Stylesheet wie das [Pretty Feed v3 Standard-Stylesheet](https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl) verwende. Lade das Stylesheet von GitHub herunter und speichere es im `public/`-Verzeichnis deines Projektes. -::: - - -## Nächste Schritte - -Nachdem du deinen Feed im Browser unter `deine-domain.com/rss.xml` aufgerufen hast und bestätigt hast, dass du die Daten für jeden Beitrag sehen kannst, kannst du nun [deinen Feed auf deiner Website bewerben](https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e#:~:text=com/~deno%2Drss-,Advertising%20your%20RSS%20feed,-Now%20you%20have). Durch das Hinzufügen des Standard-RSS-Symbols kannst du deine Leser wissen lassen, dass sie deine Beiträge in ihrem eigenen Feed-Reader abonnieren können. - -## Ressourcen -* [RSS-Feeds](https://aboutfeeds.com/) diff --git a/src/content/docs/de/recipes/sharing-state-islands.mdx b/src/content/docs/de/recipes/sharing-state-islands.mdx deleted file mode 100644 index ee4f95b47be8f..0000000000000 --- a/src/content/docs/de/recipes/sharing-state-islands.mdx +++ /dev/null @@ -1,694 +0,0 @@ ---- -title: Zustand zwischen Astro-Inseln teilen -description: Lerne, wie du den Zustand von Komponenten - und Frameworks! - mit Nano Stores teilst. -i18nReady: true -type: recipe ---- - -import UIFrameworkTabs from '~/components/tabs/UIFrameworkTabs.astro' -import LoopingVideo from '~/components/LoopingVideo.astro' -import JavascriptFlavorTabs from '~/components/tabs/JavascriptFlavorTabs.astro' - -Wenn du eine Astro-Website mit [Insel-Architektur / Partieller Hydratation](/de/concepts/islands/) aufbaust, bist du vielleicht schon auf dieses Problem gestoßen: **Ich möchte den Zustand zwischen meinen Komponenten teilen.** - -UI-Frameworks wie React oder Vue nutzen ["Kontext"-Anbieter](https://react.dev/learn/passing-data-deeply-with-context), die von anderen Komponenten konsumiert werden können. Bei der [partiellen Hydratation von Komponenten](/de/guides/framework-components/#interaktive-komponenten-hydratisieren) in Astro oder Markdown kannst du diese Kontext-Wrapper jedoch nicht verwenden. - -Astro empfiehlt eine andere Lösung für die gemeinsame Speicherung auf der Client-Seite: [**Nano Stores**](https://github.com/nanostores/nanostores). - -## Warum Nano Stores? - -Die [Nano Stores](https://github.com/nanostores/nanostores) Bibliothek ermöglicht es dir, Stores zu erstellen, mit denen jede Komponente interagieren kann. Wir empfehlen Nano Stores aus folgenden Gründen: -- **Sie sind leichtgewichtig.** Nano Stores liefern das Minimum an JS, das du brauchst (weniger als 1 KB), ohne jegliche Abhängigkeiten. -- **Sie sind Framework-agnostisch.** Das bedeutet, dass die gemeinsame Nutzung von Zuständen zwischen Frameworks nahtlos ist! Astro ist auf Flexibilität ausgelegt, daher lieben wir Lösungen, die unabhängig von deiner Präferenz eine ähnliche Entwicklererfahrung bieten. - -Dennoch gibt es eine Reihe von Alternativen, die du ausprobieren kannst. Dazu gehören: -- [Svelte's eingebaute Stores](https://svelte.dev/tutorial/writable-stores) -- [Solid signals](https://www.solidjs.com/docs/latest) außerhalb eines Komponentenkontextes -- [Vue's Reaktivitäts-API](https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api) -- [Senden von benutzerdefinierten Browser-Ereignissen](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events) zwischen Komponenten - -:::note[FAQ] - -<details> -<summary>**🙋 Kann ich Nano Stores in `.astro`-Dateien oder anderen serverseitigen Komponenten verwenden?**</summary> - -Nano Stores _können_ in serverseitigen Komponenten importiert, beschrieben und gelesen werden, **aber wir empfehlen es nicht!** Das liegt an einigen Einschränkungen: -- Das Schreiben in einen Store aus einer `.astro`-Datei oder einer [nicht-hydratisierten Komponente](/de/guides/framework-components/#interaktive-komponenten-hydratisieren) hat _keine_ Auswirkung auf den Wert, der von [Client-seitigen Komponenten](/de/reference/directives-reference/#client-directives) empfangen wird. -- Du kannst einen Nano Store nicht als "prop" an clientseitige Komponenten übergeben. -- Du kannst keine Änderungen aus einer `Astro`-Datei abonnieren, da Astro-Komponenten nicht neu gerendert werden. - -Wenn du diese Einschränkungen verstehst und trotzdem einen Anwendungsfall findest, kannst du Nano Stores ausprobieren! Denke daran, dass Nano Stores speziell für die Reaktivität auf Änderungen auf dem **Client** konzipiert sind. - -</details> - -<details> -<summary>**🙋 Wie unterscheiden sich die Svelte Stores von den Nano Stores?**</summary> - -**Nano Stores und [Svelte Stores](https://svelte.dev/tutorial/writable-stores) sind sich sehr ähnlich!** Tatsächlich kannst du in [Nanostores die gleiche `$`-Verknüpfung](https://github.com/nanostores/nanostores#svelte) für Subscriptions verwenden, die du auch in Svelte Stores benutzen kannst. - -Wenn du Bibliotheken von Drittanbietern vermeiden willst, sind [Svelte Stores](https://svelte.dev/tutorial/writable-stores) ein großartiges Werkzeug für die inselübergreifende Kommunikation. Dennoch könntest du Nano Stores bevorzugen, wenn dir a) die Add-ons für ["objects"](https://github.com/nanostores/nanostores#maps) und [async state](https://github.com/nanostores/nanostores#lazy-stores) gefallen oder b) du zwischen Svelte und anderen UI-Frameworks wie Preact oder Vue kommunizieren möchtest. -</details> - -<details> -<summary>**🙋 Wie unterscheiden sich Solid Signals von Nano Stores?**</summary> - -Wenn du schon eine Weile mit Solid arbeitest, hast du vielleicht schon versucht, [signals](https://www.solidjs.com/docs/latest#createsignal) oder [stores](https://www.solidjs.com/docs/latest#createstore) außerhalb deiner Komponenten zu verschieben. Dies ist eine großartige Möglichkeit, den Zustand zwischen Solid-Inseln zu teilen! Versuche, Signals aus einer gemeinsamen Datei zu exportieren: - -```js -// sharedStore.js -import { createSignal } from 'solid-js'; - -export const sharedCount = createSignal(0); -``` -...und alle Komponenten, die `sharedCount` importieren, teilen sich denselben Zustand. Obwohl dies gut funktioniert, könntest du Nano Stores bevorzugen, wenn du a) die Add-ons für ["objects"](https://github.com/nanostores/nanostores#maps) und [async state](https://github.com/nanostores/nanostores#lazy-stores) magst, oder b) zwischen Solid und anderen UI-Frameworks wie Preact oder Vue kommunizieren möchtest. -</details> -::: - -## Nano Stores installieren - -Um loszulegen, installiere Nano Stores zusammen mit dem Hilfspaket für dein bevorzugtes UI-Framework: - -<UIFrameworkTabs> - <Fragment slot="preact"> - ```shell - npm install nanostores @nanostores/preact - ``` - </Fragment> - <Fragment slot="react"> - ```shell - npm install nanostores @nanostores/react - ``` - </Fragment> - <Fragment slot="solid"> - ```shell - npm install nanostores @nanostores/solid - ``` - </Fragment> - <Fragment slot="svelte"> - ```shell - npm install nanostores - ``` - :::note - Hier gibt es kein Hilfspaket! Nano Stores können wie normale Svelte Stores verwendet werden. - ::: - </Fragment> - <Fragment slot="vue"> - ```shell - npm install nanostores @nanostores/vue - ``` - </Fragment> -</UIFrameworkTabs> - -Du kannst die [Nano-Stores-Anleitung](https://github.com/nanostores/nanostores#guide) von hier aus aufrufen oder unserem Beispiel unten folgen! - -## Anwendungsbeispiel - E-Commerce Warenkorb-Flyout - -Nehmen wir an, wir bauen eine einfache E-Commerce-Oberfläche mit drei interaktiven Elementen: -- Ein "In den Warenkorb"-Formular -- Ein Warenkorb-Flyout, um die hinzugefügten Artikel anzuzeigen -- Ein Flyout-Knopf für den Einkaufswagen - -<LoopingVideo sources={[{ src: '/videos/stores-example.mp4', type: 'video/mp4' }]} /> - -_[**Teste das fertige Beispiel**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) auf deinem Rechner oder online über Stackblitz._ - -Deine Basis-Astro-Datei könnte so aussehen: - -```astro ---- -// Beispiel: src/pages/index.astro -import CartFlyoutToggle from '../components/CartFlyoutToggle'; -import CartFlyout from '../components/CartFlyout'; -import AddToCartForm from '../components/AddToCartForm'; ---- - -<!DOCTYPE html> -<html lang="en"> -<head>...</head> -<body> - <header> - <nav> - <a href="/">Astro-Schaufenster</a> - <CartFlyoutToggle client:load /> - </nav> - </header> - <main> - <AddToCartForm client:load> - <!-- ... --> - </AddToCartForm> - </main> - <CartFlyout client:load /> -</body> -</html> -``` - -### "Atoms" verwenden - -Beginnen wir damit, dass wir unser `CartFlyout` öffnen, wenn `CartFlyoutToggle` angeklickt wird. - -Erstelle zunächst eine neue JS- oder TS-Datei, die unseren Store enthält. Wir verwenden dafür ein ["Atom"](https://github.com/nanostores/nanostores#atoms): - -```js -// src/cartStore.js -import { atom } from 'nanostores'; - -export const isCartOpen = atom(false); -``` - -Jetzt können wir diesen Store in jede Datei importieren, die lesen oder schreiben muss. Wir beginnen damit, unser `CartFlyoutToggle` zu verknüpfen: - -<UIFrameworkTabs> -<Fragment slot="preact"> -```jsx -// src/components/CartFlyoutToggle.jsx -import { useStore } from '@nanostores/preact'; -import { isCartOpen } from '../cartStore'; - -export default function CartButton() { - // lies den Speicherwert mit dem `useStore`-Hook - const $isCartOpen = useStore(isCartOpen); - // schreibe in den importierten Speicher mit `.set` - return ( - <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button> - ) -} -``` -</Fragment> -<Fragment slot="react"> -```jsx -// src/components/CartFlyoutToggle.jsx -import { useStore } from '@nanostores/react'; -import { isCartOpen } from '../cartStore'; - -export default function CartButton() { - // lies den Speicherwert mit dem `useStore`-Hook - const $isCartOpen = useStore(isCartOpen); - // schreibe in den importierten Speicher mit `.set` - return ( - <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button> - ) -} -``` -</Fragment> -<Fragment slot="solid"> -```jsx -// src/components/CartFlyoutToggle.jsx -import { useStore } from '@nanostores/solid'; -import { isCartOpen } from '../cartStore'; - -export default function CartButton() { - // lies den Speicherwert mit dem `useStore`-Hook - const $isCartOpen = useStore(isCartOpen); - // schreibe in den importierten Speicher mit `.set` - return ( - <button onClick={() => isCartOpen.set(!$isCartOpen())}>Cart</button> - ) -} -``` -</Fragment> -<Fragment slot="svelte"> -```svelte -<!--src/components/CartFlyoutToggle.svelte--> -<script> - import { isCartOpen } from '../cartStore'; -</script> - -<!--verwende "$", um den Speicherwert zu lesen--> -<button on:click={() => isCartOpen.set(!$isCartOpen)}>Cart</button> -``` -</Fragment> -<Fragment slot="vue"> -```vue -<!--src/components/CartFlyoutToggle.vue--> -<template> - <!--schreibe in den importierten Speicher mit `.set`--> - <button @click="isCartOpen.set(!$isCartOpen)">Cart</button> -</template> - -<script setup> - import { isCartOpen } from '../cartStore'; - import { useStore } from '@nanostores/vue'; - - // lies den Speicherwert mit dem `useStore`-Hook - const $isCartOpen = useStore(isCartOpen); -</script> -``` -</Fragment> -</UIFrameworkTabs> - -Dann können wir `isCartOpen` von unserer `CartFlyout`-Komponente lesen: - -<UIFrameworkTabs> -<Fragment slot="preact"> -```jsx -// src/components/CartFlyout.jsx -import { useStore } from '@nanostores/preact'; -import { isCartOpen } from '../cartStore'; - -export default function CartFlyout() { - const $isCartOpen = useStore(isCartOpen); - - return $isCartOpen ? <aside>...</aside> : null; -} -``` -</Fragment> -<Fragment slot="react"> -```jsx -// src/components/CartFlyout.jsx -import { useStore } from '@nanostores/react'; -import { isCartOpen } from '../cartStore'; - -export default function CartFlyout() { - const $isCartOpen = useStore(isCartOpen); - - return $isCartOpen ? <aside>...</aside> : null; -} -``` -</Fragment> -<Fragment slot="solid"> -```jsx -// src/components/CartFlyout.jsx -import { useStore } from '@nanostores/solid'; -import { isCartOpen } from '../cartStore'; - -export default function CartFlyout() { - const $isCartOpen = useStore(isCartOpen); - - return $isCartOpen() ? <aside>...</aside> : null; -} -``` -</Fragment> -<Fragment slot="svelte"> -```svelte -<!--src/components/CartFlyout.svelte--> -<script> - import { isCartOpen } from '../cartStore'; -</script> - -{#if $isCartOpen} -<aside>...</aside> -{/if} -``` -</Fragment> -<Fragment slot="vue"> -```vue -<!--src/components/CartFlyout.vue--> -<template> - <aside v-if="$isCartOpen">...</aside> -</template> - -<script setup> - import { isCartOpen } from '../cartStore'; - import { useStore } from '@nanostores/vue'; - - const $isCartOpen = useStore(isCartOpen); -</script> -``` -</Fragment> -</UIFrameworkTabs> - -### "Maps" verwenden - -:::tip -**[Maps](https://github.com/nanostores/nanostores#maps) sind eine gute Wahl für Objekte, in die du regelmäßig schreibst!** Neben den standardmäßigen `get()`- und `set()`-Hilfen, die ein `atom` bietet, hast du auch eine `.setKey()`-Funktion, um einzelne Objektschlüssel effizient zu aktualisieren. -::: - -Jetzt wollen wir den Überblick über die Artikel in deinem Warenkorb behalten. Um Duplikate zu vermeiden und den Überblick über die "Menge" zu behalten, können wir deinen Warenkorb als Objekt mit der ID des Artikels als Schlüssel speichern. Wir verwenden dafür eine [Map](https://github.com/nanostores/nanostores#maps). - -Jetzt fügen wir einen `cartItem`-Store zu unserer `cartStore.js` von vorhin hinzu. Du kannst auch zu einer TypeScript-Datei wechseln, um die Form zu definieren, wenn du das möchtest. - -<JavascriptFlavorTabs> - <Fragment slot="js"> - ```js - // src/cartStore.js - import { atom, map } from 'nanostores'; - - export const isCartOpen = atom(false); - - /** - * @typedef {Object} CartItem - * @property {string} id - * @property {string} name - * @property {string} imageSrc - * @property {number} quantity - */ - - /** @type {import('nanostores').MapStore<Record<string, CartItem>>} */ - export const cartItems = map({}); - - ``` - </Fragment> - <Fragment slot="ts"> - ```ts - // src/cartStore.ts - import { atom, map } from 'nanostores'; - - export const isCartOpen = atom(false); - - export type CartItem = { - id: string; - name: string; - imageSrc: string; - quantity: number; - } - - export const cartItems = map<Record<string, CartItem>>({}); - ``` - </Fragment> -</JavascriptFlavorTabs> - -Jetzt exportieren wir einen `addCartItem`-Helper (Hilfsfunktion), den unsere Komponenten verwenden können. -- **Wenn dieser Artikel nicht in deinem Warenkorb ist**, füge den Artikel mit einer Startmenge von 1 hinzu. -- **Wenn es diesen Artikel _doch_ schon gibt**, erhöhe die Menge um 1. - -<JavascriptFlavorTabs> - <Fragment slot="js"> - ```js - // src/cartStore.js - ... - export function addCartItem({ id, name, imageSrc }) { - const existingEntry = cartItems.get()[id]; - if (existingEntry) { - cartItems.setKey(id, { - ...existingEntry, - quantity: existingEntry.quantity + 1, - }) - } else { - cartItems.setKey( - id, - { id, name, imageSrc, quantity: 1 } - ); - } - } - ``` - </Fragment> - <Fragment slot="ts"> - ```ts - // src/cartStore.ts - ... - type ItemDisplayInfo = Pick<CartItem, 'id' | 'name' | 'imageSrc'>; - export function addCartItem({ id, name, imageSrc }: ItemDisplayInfo) { - const existingEntry = cartItems.get()[id]; - if (existingEntry) { - cartItems.setKey(id, { - ...existingEntry, - quantity: existingEntry.quantity + 1, - }); - } else { - cartItems.setKey( - id, - { id, name, imageSrc, quantity: 1 } - ); - } - } - ``` - </Fragment> -</JavascriptFlavorTabs> - -:::note -<details> - -<summary>**🙋 Warum wird hier `.get()` anstelle eines `useStore`-Helpers verwendet?**</summary> - -Du hast vielleicht bemerkt, dass wir hier `cartItems.get()` aufrufen, anstatt den `useStore`-Helper aus unseren React / Preact / Solid / Vue-Beispielen zu verwenden. Das liegt daran, dass **useStore dafür gedacht ist, die Komponenten neu zu rendern**. Mit anderen Worten, `useStore` sollte immer dann verwendet werden, wenn der Wert des Shops auf der Benutzeroberfläche dargestellt wird. Da wir den Wert auslesen, wenn ein **Ereignis** ausgelöst wird (in diesem Fall `AddToCart`), und wir nicht versuchen, den Wert zu rendern, brauchen wir `useStore` hier nicht. -</details> -::: - -Wenn unser Shop eingerichtet ist, können wir diese Funktion in unserem `AddToCartForm` aufrufen, sobald das Formular abgeschickt wird. Außerdem öffnen wir das Warenkorb-Flyout, damit du eine vollständige Warenkorbübersicht siehst. - -<UIFrameworkTabs> -<Fragment slot="preact"> -```jsx -// src/components/AddToCartForm.jsx -import { addCartItem, isCartOpen } from '../cartStore'; - -export default function AddToCartForm({ children }) { - // der Einfachheit halber codieren wir die Artikelinformationen fest! - const hardcodedItemInfo = { - id: 'astronaut-figurine', - name: 'Astronaut Figurine', - imageSrc: '/images/astronaut-figurine.png', - } - - function addToCart(e) { - e.preventDefault(); - isCartOpen.set(true); - addCartItem(hardcodedItemInfo); - } - - return ( - <form onSubmit={addToCart}> - {children} - </form> - ) -} -``` -</Fragment> -<Fragment slot="react"> -```jsx -// src/components/AddToCartForm.jsx -import { addCartItem, isCartOpen } from '../cartStore'; - -export default function AddToCartForm({ children }) { - // der Einfachheit halber codieren wir die Artikelinformationen fest! - const hardcodedItemInfo = { - id: 'astronaut-figurine', - name: 'Astronaut Figurine', - imageSrc: '/images/astronaut-figurine.png', - } - - function addToCart(e) { - e.preventDefault(); - isCartOpen.set(true); - addCartItem(hardcodedItemInfo); - } - - return ( - <form onSubmit={addToCart}> - {children} - </form> - ) -} -``` -</Fragment> -<Fragment slot="solid"> -```jsx -// src/components/AddToCartForm.jsx -import { addCartItem, isCartOpen } from '../cartStore'; - -export default function AddToCartForm({ children }) { - // der Einfachheit halber codieren wir die Artikelinformationen fest! - const hardcodedItemInfo = { - id: 'astronaut-figurine', - name: 'Astronaut Figurine', - imageSrc: '/images/astronaut-figurine.png', - } - - function addToCart(e) { - e.preventDefault(); - isCartOpen.set(true); - addCartItem(hardcodedItemInfo); - } - - return ( - <form onSubmit={addToCart}> - {children} - </form> - ) -} -``` -</Fragment> -<Fragment slot="svelte"> -```svelte -<!--src/components/AddToCartForm.svelte--> -<form on:submit|preventDefault={addToCart}> - <slot></slot> -</form> - -<script> - import { addCartItem, isCartOpen } from '../cartStore'; - - // der Einfachheit halber codieren wir die Artikelinformationen fest! - const hardcodedItemInfo = { - id: 'astronaut-figurine', - name: 'Astronaut Figurine', - imageSrc: '/images/astronaut-figurine.png', - } - - function addToCart() { - isCartOpen.set(true); - addCartItem(hardcodedItemInfo); - } -</script> -``` -</Fragment> -<Fragment slot="vue"> -```vue -<!--src/components/AddToCartForm.vue--> -<template> - <form @submit="addToCart"> - <slot></slot> - </form> -</template> - -<script setup> - import { addCartItem, isCartOpen } from '../cartStore'; - - // der Einfachheit halber codieren wir die Artikelinformationen fest! - const hardcodedItemInfo = { - id: 'astronaut-figurine', - name: 'Astronaut Figurine', - imageSrc: '/images/astronaut-figurine.png', - } - - function addToCart(e) { - e.preventDefault(); - isCartOpen.set(true); - addCartItem(hardcodedItemInfo); - } -</script> -``` -</Fragment> -</UIFrameworkTabs> - -Zum Schluss stellen wir die Artikel im Warenkorb in unserem `CartFlyout` dar: - -<UIFrameworkTabs> -<Fragment slot="preact"> -```jsx -// src/components/CartFlyout.jsx -import { useStore } from '@nanostores/preact'; -import { isCartOpen, cartItems } from '../cartStore'; - -export default function CartFlyout() { - const $isCartOpen = useStore(isCartOpen); - const $cartItems = useStore(cartItems); - - return $isCartOpen ? ( - <aside> - {Object.values($cartItems).length ? ( - <ul> - {Object.values($cartItems).map(cartItem => ( - <li> - <img src={cartItem.imageSrc} alt={cartItem.name} /> - <h3>{cartItem.name}</h3> - <p>Quantity: {cartItem.quantity}</p> - </li> - ))} - </ul> - ) : <p>Dein Warenkorb ist leer!</p>} - </aside> - ) : null; -} -``` -</Fragment> -<Fragment slot="react"> -```jsx -// src/components/CartFlyout.jsx -import { useStore } from '@nanostores/react'; -import { isCartOpen, cartItems } from '../cartStore'; - -export default function CartFlyout() { - const $isCartOpen = useStore(isCartOpen); - const $cartItems = useStore(cartItems); - - return $isCartOpen ? ( - <aside> - {Object.values($cartItems).length ? ( - <ul> - {Object.values($cartItems).map(cartItem => ( - <li> - <img src={cartItem.imageSrc} alt={cartItem.name} /> - <h3>{cartItem.name}</h3> - <p>Quantity: {cartItem.quantity}</p> - </li> - ))} - </ul> - ) : <p>Dein Warenkorb ist leer!</p>} - </aside> - ) : null; -} -``` -</Fragment> -<Fragment slot="solid"> -```jsx -// src/components/CartFlyout.jsx -import { useStore } from '@nanostores/solid'; -import { isCartOpen, cartItems } from '../cartStore'; - -export default function CartFlyout() { - const $isCartOpen = useStore(isCartOpen); - const $cartItems = useStore(cartItems); - - return $isCartOpen() ? ( - <aside> - {Object.values($cartItems()).length ? ( - <ul> - {Object.values($cartItems()).map(cartItem => ( - <li> - <img src={cartItem.imageSrc} alt={cartItem.name} /> - <h3>{cartItem.name}</h3> - <p>Quantity: {cartItem.quantity}</p> - </li> - ))} - </ul> - ) : <p>Dein Warenkorb ist leer!</p>} - </aside> - ) : null; -} -``` -</Fragment> -<Fragment slot="svelte"> -```svelte -<!--src/components/CartFlyout.svelte--> -<script> - import { isCartOpen, cartItems } from '../cartStore'; -</script> - -{#if $isCartOpen} - {#if Object.values($cartItems).length} - <aside> - {#each Object.values($cartItems) as cartItem} - <li> - <img src={cartItem.imageSrc} alt={cartItem.name} /> - <h3>{cartItem.name}</h3> - <p>Quantity: {cartItem.quantity}</p> - </li> - {/each} - </aside> - {#else} - <p>Dein Warenkorb ist leer!</p> - {/if} -{/if} -``` -</Fragment> -<Fragment slot="vue"> -```vue -<!--src/components/CartFlyout.vue--> -<template> - <aside v-if="$isCartOpen"> - <ul v-if="Object.values($cartItems).length"> - <li v-for="cartItem in Object.values($cartItems)" v-bind:key="cartItem.name"> - <img :src=cartItem.imageSrc :alt=cartItem.name /> - <h3>{{cartItem.name}}</h3> - <p>Menge: {{cartItem.quantity}}</p> - </li> - </ul> - <p v-else>Dein Warenkorb ist leer!</p> - </aside> -</template> - -<script setup> - import { cartItems, isCartOpen } from '../cartStore'; - import { useStore } from '@nanostores/vue'; - - const $isCartOpen = useStore(isCartOpen); - const $cartItems = useStore(cartItems); -</script> -``` -</Fragment> -</UIFrameworkTabs> - -Jetzt solltest du ein vollständig interaktives E-Commerce-Beispiel mit dem kleinsten JS-Bündel der Galaxis haben 🚀 - -[**Probiere das fertige Beispiel**](https://github.com/withastro/astro/tree/main/examples/with-nanostores) auf deinem Rechner oder online über Stackblitz aus! diff --git a/src/content/docs/de/reference/api-reference.mdx b/src/content/docs/de/reference/api-reference.mdx deleted file mode 100644 index fb662c734649e..0000000000000 --- a/src/content/docs/de/reference/api-reference.mdx +++ /dev/null @@ -1,940 +0,0 @@ ---- -title: API-Referenz -i18nReady: true ---- -import Since from '~/components/Since.astro' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - -## `Astro` Global - -Das Global `Astro` ist in allen Kontexten in `.astro`-Dateien verfügbar. Es hat die folgenden Funktionen: - -### `Astro.glob()` - -mit `Astro.glob()` kannst du lokale Dateien in dein statisches Website-Setup laden. - -```astro ---- -// ./src/components/my-component.astro -const posts = await Astro.glob('../pages/post/*.md'); // gibt ein Array von Posts zurück, die sich unter ./src/pages/post/*.md befinden -themes--- - -<div> -{posts.slice(0, 3).map((post) => ( - <article> - <h2>{post.frontmatter.title}</h2> - <p>{post.frontmatter.description}</p> - <a href={post.url}>Read more</a> - </article> -))} -</div> -``` - -`glob()` benötigt nur einen Parameter: einen relativen URL-Glob der lokalen Dateien, die du importieren möchtest. Die Funktion arbeitet asynchron und gibt ein Array mit den Exporten der passenden Dateien zurück. - -`.glob()` kann keine Variablen oder Strings annehmen, die sie interpolieren, da sie nicht statisch analysierbar sind. (Siehe [die Anleitung zur Fehlerbehebung](/de/guides/troubleshooting/#unterstützte-werte) für einen Workaround) Das liegt daran, dass `Astro.glob()` ein Wrapper von Vite's [`import.meta.glob()`](https://vite.dev/guide/features.html#glob-import) ist. - -:::note -Du kannst auch `import.meta.glob()` selbst in deinem Astro-Projekt verwenden. Du solltest dies tun, wenn: - -- Du brauchst diese Funktion in einer Datei, die nicht `.astro` ist, wie zum Beispiel eine API-Route. astro.glob() ist nur in Astro-Dateien verfügbar, während import.meta.glob() überall im Projekt verfügbar ist. -- Du willst nicht jede Datei sofort laden. Die Funktion `import.meta.glob()` kann Funktionen zurückgeben, die den Inhalt der Datei importieren, anstatt den Inhalt selbst zurückzugeben. -- Du willst Zugriff auf den Pfad jeder Datei. Die Funktion `import.meta.glob()` gibt eine Abbildung des Dateipfads auf den Inhalt zurück, während `Astro.glob()` eine Liste des Inhalts zurückgibt. -- Du möchtest mehrere Pattern übergeben; zum Beispiel möchtest du ein "negatives Muster" hinzufügen, das bestimmte Dateien herausfiltert. die Funktion `import.meta.glob()` kann optional ein Array von glob-Zeichenfolgen entgegennehmen, anstatt einer einzelnen Zeichenfolge. - -Mehr dazu findest du in der [Vite-Dokumentation](https://vite.dev/guide/features.html#glob-import). -::: - -#### Markdown-Dateien - -Markdown-Dateien haben die folgende Schnittstelle: - -```ts -export interface MarkdownInstance<T extends Record<string, any>> { - /* Alle Daten, die im YAML-Frontmatter dieser Datei angegeben sind */ - frontmatter: T; - /* Der Dateipfad für diese Datei */ - file: string; - /* Der gerenderte Pfad zu dieser Datei */ - url: string | undefined; - /* Astro-Komponente, die den Inhalt dieser Datei wiedergibt */ - Content: AstroComponent; - /* Funktion, die ein Array mit den h1...h6-Elementen in dieser Datei zurückgibt */ - getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>; -} -``` - -Du kannst optional einen Typ für die Variable "frontmatter" angeben, indem du eine TypeScript-Generik verwendest. - -```astro ---- -interface Frontmatter { - title: string; - description?: string; -} -const posts = await Astro.glob<Frontmatter>('../pages/post/*.md'); ---- - -<ul> - {posts.map(post => <li>{post.frontmatter.title}</li>)} -</ul> -``` - -#### Astro-Dateien - -Astro-Dateien haben die folgende Schnittstelle: - -```ts -export interface AstroInstance { - /* Der Dateipfad für diese Datei */ - file: string; - /* Die URL für diese Datei (wenn sie sich im Seitenverzeichnis befindet) */ - url: string | undefined; - default: AstroComponent; -} -``` - -#### Andere Dateien - -Andere Dateien können verschiedene Schnittstellen haben, aber `Astro.glob()` akzeptiert eine TypeScript-Generik, wenn du genau weißt, was ein nicht erkannter Dateityp enthält. - -```ts ---- -interface CustomDataFile { - default: Record<string, any>; -} -const data = await Astro.glob<CustomDataFile>('../data/**/*.js'); ---- -``` - -### `Astro.props` - -`Astro.props` ist ein Objekt, das alle Werte enthält, die als [Komponentenattribute](/de/basics/astro-components/#props-komponenteneigenschaften) übergeben wurden. Layoutkomponenten für `.md` und `.mdx`-Dateien erhalten Frontmatter-Werte als Props. - -```astro {3} ---- -// ./src/components/Heading.astro -const { title, date } = Astro.props; ---- -<div> - <h1>{title}</h1> - <p>{date}</p> -</div> -``` - -```astro /title=".+"/ /date=".+"/ ---- -// ./src/pages/index.astro -import Heading from '../components/Heading.astro'; ---- -<Heading title="Mein erster Beitrag" date="09 Aug 2022" /> -``` - -📚 Erfahre mehr darüber, wie [Markdown und MDX Layouts](/de/guides/markdown-content/#frontmatter-layout-property) mit Eigenschaften umgehen. - -📚 Lerne, wie du [TypeScript-Typdefinitionen für deine Eigenschaften](/de/guides/typescript/#komponenten-eigenschaften) hinzufügst. - -### `Astro.params` - -`Astro.params` ist ein Objekt, das die Werte der dynamischen Routensegmente enthält, die für diese Anfrage angepasst wurden. - -Bei statischen Builds sind dies die `Parameter`, die von `getStaticPaths()` zurückgegeben und für das Prerendering von [dynamischen Routen](/de/guides/routing/#dynamische-routen) verwendet werden. - -Bei SSR-Builds kann dies ein beliebiger Wert sein, der den Pfadsegmenten im dynamischen Routenmuster entspricht. - -```astro title="src/pages/posts/[id].astro" ---- -export function getStaticPaths() { - return [ - { params: { id: '1' } }, - { params: { id: '2' } }, - { params: { id: '3' } } - ]; -} - -const { id } = Astro.params; ---- -<h1>{id}</h1> -``` - -Siehe auch: [`params`](#params) - -### `Astro.request` - -`Astro.request` ist ein Standard-[Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) Objekt. Es kann verwendet werden, um die `url`, den `header`, die `method` und sogar den Body der Anfrage zu erhalten. - -```astro -<p>Empfang einer {Astro.request.method} Anfrage an "{Astro.request.url}".</p> -<p>Empfangene Anfrage-Header:<code>{JSON.stringify(Object.fromEntries(Astro.request.headers))}</code> -``` - -Siehe auch: [`Astro.url`](#astrourl) - -:::note -Mit der Standardoption `output: 'static'`-Option enthält `Astro.request.url` keine Suchparameter, wie z.B. `?foo=bar`, da es nicht möglich ist, diese bei statischen Builds im Voraus zu bestimmen. Im Modus `output: 'server'`-Modus enthält die Option `Astro.request.url` Suchparameter, da sie aus einer Serveranfrage ermittelt werden können. -::: - -### `Astro.response` - -`Astro.response` ist ein Standard-[ResponseInit](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#init)-Objekt. Es wird verwendet, um den `status`, den `statusText` und die `heading` für die Antwort einer Seite zu setzen. - -```astro ---- -if(condition) { - Astro.response.status = 404; - Astro.response.statusText = 'Not found'; -} ---- -``` - -Oder um einen Header zu setzen: - -```astro ---- -Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;'); ---- -``` - -### `Astro.cookies` - -<Since v="1.4.0" /> - -`Astro.cookies` enthält Helfer zum Lesen und Bearbeiten von Cookies im Modus [Server-Side-Rendering](/de/guides/on-demand-rendering/). - -| Name | Typ | Beschreibung | -| :------------- | :------------------------------------------------ | :------------------------------------------------- | -| `get` | `(key: string) => AstroCookie` | Holt das Cookie als [`AstroCookie`](#astrocookie)-Objekt, das den `Wert` und Hilfsfunktionen zur Umwandlung des Cookies in Nicht-String-Typen enthält. | -| `has` | `(key: string) => boolean` | Ob dieses Cookie existiert. Wenn das Cookie über `Astro.cookies.set()` gesetzt wurde, wird hier true zurückgegeben, andernfalls werden die Cookies in `Astro.request` überprüft. | -| `set` | `(key: string, value: string \| number \| boolean \| object, options?: CookieOptions) => void` | Setzt den Cookie `key` auf den angegebenen Wert. Dabei wird versucht, den Cookie-Wert in eine Zeichenkette umzuwandeln. Optionen bieten Möglichkeiten, [Cookie-Funktionen](https://www.npmjs.com/package/cookie#options-1) zu setzen, wie z. B. `maxAge` oder `htpOnly`. | -| `delete` | `(key: string, options?: CookieDeleteOptions) => void` | Markiert das Cookie als gelöscht. Sobald ein Cookie gelöscht ist, gibt `Astro.cookies.has()` den Wert `false` und `Astro.cookies.get()` einen [`AstroCookie`](#astrocookie) mit einem `Wert` von `undefined` zurück. Mit den Optionen können die `Domain` und der `Pfad` des zu löschenden Cookies festgelegt werden. | -| `headers` | `() => Iterator<string>` | ermittelt die header-Werte für "Set-Cookie", die mit der Antwort gesendet werden. | - -#### `AstroCookie` - -Das Abrufen eines Cookies über `Astro.cookies.get()` liefert einen Typ `AstroCookie`. Er hat die folgende Struktur. - -| Name | Type | Description | -| :------------- | :------------------------------------------------ | :------------------------------------------------- | -| `value` | `string` | Der eigentliche String-Wert des Cookies. | -| `json` | `() => Record<string, any>` | Analysiert den Cookie-Wert mit `JSON.parse()` und gibt ein Objekt zurück. Wirft einen Fehler, wenn der Cookie-Wert kein gültiges JSON ist. | -| `number` | `() => number` | Analysiert den Cookie-Wert als Zahl. Gibt NaN zurück, wenn es sich nicht um eine gültige Zahl handelt. | -| `boolean` | `() => boolean` | Wandelt den Cookie-Wert in einen booleschen Wert um. | - -### `Astro.redirect()` - -Im Modus [server-side-rendering](/de/guides/on-demand-rendering/) kannst du mit `Astro.redirect()` zu einer anderen Seite umleiten. -Eine Seite (und nicht eine untergeordnete Komponente) muss das Ergebnis von `Astro.redirect()" zurückgeben, damit die Umleitung erfolgt. - -```astro title="src/pages/account.astro" {8} ---- -import { isLoggedIn } from '../utils'; - -const cookie = Astro.request.headers.get('cookie'); - -// Wenn der Benutzer nicht eingeloggt ist, leite ihn zur Anmeldeseite um -if (!isLoggedIn(cookie)) { - return Astro.redirect('/login'); -} ---- -``` - -### `Astro.canonicalURL` - -:::caution[Deprecated] -Verwende [`Astro.url`](#astrourl), um deine eigene kanonische URL zu erstellen. -::: - -Die [kanonische URL][canonical] der aktuellen Seite. - -### `Astro.url` - -<Since v="1.0.0-rc" /> - -Ein [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL)-Objekt, das aus dem aktuellen `Astro.request.url`-URL-String-Wert erstellt wird. Nützlich für die Interaktion mit einzelnen Eigenschaften der Anfrage-URL, wie Pfadname und Herkunft. - -Das ist gleichbedeutend mit `neue URL(Astro.request.url)`. - -```astro -<h1>Die aktuelle URL ist: {Astro.url}</h1> -<h1>Der aktuelle URL-Pfadname ist: {Astro.url.pathname}</h1> -<h1>Der aktuelle URL-Ursprung ist: {Astro.url.origin}</h1> -``` - -Du kannst auch `Astro.url` verwenden, um neue URLs zu erstellen, indem du es als Argument an [`neue URL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) übergibst. - -```astro ---- -// Beispiel: Erstelle eine kanonische URL mit deiner Produktionsdomain -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -// Beispiel: Konstruiere eine URL für SEO-Meta-Tags unter Verwendung deiner aktuellen Domain -const socialImageURL = new URL('/images/preview.png', Astro.url); ---- -<link rel="canonical" href={canonicalURL} /> -<meta property="og:image" content={socialImageURL} /> -``` - -### `Astro.clientAddress` - -<Since v="1.0.0-rc" /> - -Gibt die [IP-Adresse](https://en.wikipedia.org/wiki/IP_address) der Anfrage an. Diese Eigenschaft ist nur bei der Erstellung für SSR (Server-seitiges Rendering) verfügbar und sollte nicht für statische Websites verwendet werden. - -```astro ---- -const ip = Astro.clientAddress; ---- - -<div>Deine IP-Adresse lautet: <span class="address">{ ip }</span></div> -``` - -### `Astro.site` - -`Astro.site` gibt eine URL zurück, die aus `site` in deiner Astro-Konfiguration stammt. Wenn `site` in deiner Astro-Konfiguration nicht definiert ist, wird `Astro.site` auch nicht definiert. - -### `Astro.generator` - -<Since v="1.0.0" /> - -Mit `Astro.generator` kannst du bequem ein [`<meta name="generator">`](https://html.spec.whatwg.org/multipage/semantics.html#meta-generator)-Tag mit deiner aktuellen Astro-Version hinzufügen. Es hat das Format "Astro v1.x.x". - -```astro mark="Astro.generator" -<html> - <head> - <meta name="generator" content={Astro.generator} /> - </head> - <body> - <footer> - <p>Built with <a href="https://astro.build">{Astro.generator}</a></p> - </footer> - </body> -</html> -``` - -### `Astro.slots` - -`Astro.slots` enthält Funktionen, mit denen du die Slot-Kinder einer Astro-Komponente ändern kannst. - -#### `Astro.slots.has()` - -**Type:** `(slotName: string) => boolean` - -Mit `Astro.slots.has()` kannst du prüfen, ob Inhalte für einen bestimmten Slot-Namen existieren. Das kann nützlich sein, wenn du Slot-Inhalte wrappen willst, aber die Wrapper-Elemente nur dann darstellen willst, wenn der Slot verwendet wird. - -```astro ---- ---- -<slot /> - -{Astro.slots.has('more') && ( - <aside> - <h2>More</h2> - <slot name="more" /> - </aside> -)} -``` - -#### `Astro.slots.render()` - -**Type:** `(slotName: string, args?: any[]) => Promise<string>` - -Du kannst den Inhalt eines Slots asynchron mit `Astro.slots.render()` in eine HTML-Zeichenkette umwandeln. - -```astro ---- -const html = await Astro.slots.render('default'); ---- -<Fragment set:html={html} /> -``` - -:::note -Dies ist für fortgeschrittene Anwendungsfälle! In den meisten Fällen ist es einfacher, Slot-Inhalte mit dem [Element `<Slot />`](/de/basics/astro-components/#slots) darzustellen. -::: - -`Astro.slots.render()` akzeptiert optional ein zweites Argument: ein Array von Parametern, die an alle untergeordneten Funktionen weitergeleitet werden. Dies kann für benutzerdefinierte Hilfskomponenten nützlich sein. - -Zum Beispiel wandelt diese `<Shout />`-Komponente ihre `Nachricht` in Großbuchstaben um und übergibt sie an den Standard-Slot: - -```astro title="src/components/Shout.astro" "await Astro.slots.render('default', [message])" ---- -const message = Astro.props.message.toUpperCase(); -let html = ''; -if (Astro.slots.has('default')) { - html = await Astro.slots.render('default', [message]); -} ---- -<Fragment set:html={html} /> -``` - -Eine Callback-Funktion, die als Kind von `<Shout />` übergeben wird, erhält den Parameter `Nachricht` in Großbuchstaben: - -```astro title="src/pages/index.astro" ---- -import Shout from "../components/Shout.astro"; ---- -<Shout message="slots!"> - {(message) => <div>{message}</div>} -</Shout> - -<!-- renders as <div>SLOTS!</div> --> -``` - -### `Astro.self` - -Mit `Astro.self` können Astro-Komponenten rekursiv aufgerufen werden. Mit diesem Verhalten kannst du eine Astro-Komponente aus sich selbst heraus rendern, indem du `<Astro.self>` in der Komponentenvorlage verwendest. Dies kann bei der Iteration über große Datenspeicher und verschachtelte Datenstrukturen hilfreich sein. - -```astro ---- -// NestedList.astro -const { items } = Astro.props; ---- -<ul class="nested-list"> - {items.map((item) => ( - <li> - <!-- Wenn es eine verschachtelte Datenstruktur gibt, rendern wir `<Astro.self>` --> - <!-- und können Eigenschaften mit dem rekursiven Aufruf durchreichen --> - {Array.isArray(item) ? ( - <Astro.self items={item} /> - ) : ( - item - )} - </li> - ))} -</ul> -``` - -Diese Komponente könnte dann wie folgt verwendet werden: - -```astro ---- -import NestedList from './NestedList.astro'; ---- -<NestedList items={['A', ['B', 'C'], 'D']} /> -``` - -Und würde HTML wie folgt darstellen werden: - -```html -<ul class="nested-list"> - <li>A</li> - <li> - <ul class="nested-list"> - <li>B</li> - <li>C</li> - </ul> - </li> - <li>D</li> -</ul> -``` - -## Endpunkt-Kontext - -Die [Endpunktfunktionen](/de/guides/endpoints/) erhalten ein Kontextobjekt als ersten Parameter. Es spiegelt viele der globalen Eigenschaften von `Astro` wider. - -```ts title="endpoint.json.ts" -import type { APIContext } from 'astro'; - -export function get(context: APIContext) { - // ... -} -``` - -### `context.params` - -`context.params` ist ein Objekt, das die Werte der dynamischen Routensegmente enthält, die für diese Anfrage angepasst wurden. - -Bei statischen Builds sind dies die `Parameter`, die von `getStaticPaths()` zurückgegeben und für das Prerendering von [dynamischen Routen](/de/guides/routing/#dynamische-routen) verwendet werden. - -Bei SSR-Builds kann dies ein beliebiger Wert sein, der den Pfadsegmenten im dynamischen Route-Pattern entspricht. - -```ts title="src/pages/posts/[id].json.ts" -import type { APIContext } from 'astro'; - -export function getStaticPaths() { - return [ - { params: { id: '1' } }, - { params: { id: '2' } }, - { params: { id: '3' } } - ]; -} - -export function get({ params }: APIContext) { - return { - body: JSON.stringify({ id: params.id }) - }; -} -``` - -Siehe auch: [`params`](#params) - -### `context.props` - -`context.props` ist ein Objekt, das alle `props` enthält, die von `getStaticPaths()` übergeben werden. Da `getStaticPaths()` bei der Erstellung für SSR (Server-seitiges Rendering) nicht verwendet wird, ist `context.props` nur bei statischen Builds verfügbar. - -```ts title="src/pages/posts/[id].json.ts" -import type { APIContext } from 'astro'; - -export function getStaticPaths() { - return [ - { params: { id: '1' }, props: { author: 'Blu' } }, - { params: { id: '2' }, props: { author: 'Erika' } }, - { params: { id: '3' }, props: { author: 'Matthew' } } - ]; -} - -export function get({ props }: APIContext) { - return { - body: JSON.stringify({ author: props.author }), - }; -} -``` - -Siehe auch: [Datenübergabe mit `props`](#datenübergabe-mit-props) - -### `context.request` - -Ein Standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request)-Objekt. Es kann verwendet werden, um die `url`, `headers`, `method` und sogar den Body der Anfrage zu erhalten. - -```ts -import type { APIContext } from 'astro'; - -export function get({ request }: APIContext) { - return { - body: `Hello ${request.url}` - } -} -``` - -Siehe auch: [Astro.request](#astrorequest) - -### `context.cookies` - -`context.cookies` enthält Helfer zum Lesen und Bearbeiten von Cookies. - -Siehe auch: [Astro.cookies](#astrocookies) - -### `context.url` - -Ein [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL)-Objekt, das aus dem aktuellen `context.request.url`-URL-String-Wert konstruiert wird. - -Siehe auch: [Astro.url](#astrourl) - -### `context.clientAddress` - -Gibt die [IP-Adresse](https://en.wikipedia.org/wiki/IP_address) der Anfrage an. Diese Eigenschaft ist nur bei der Erstellung für SSR (Server-seitiges Rendering) verfügbar und sollte nicht für statische Websites verwendet werden. - -```ts -import type { APIContext } from 'astro'; - -export function get({ clientAddress }: APIContext) { - return { - body: `Deine IP-Adresse lautet: ${clientAddress}` - } -} -``` - -Siehe auch: [Astro.clientAddress](#astroclientaddress) - -### `context.site` - -`context.site` gibt eine `URL` zurück, die aus `site` in deiner Astro-Konfiguration erstellt wurde. Wenn sie nicht definiert ist, wird eine URL von `localhost` zurückgegeben. - -Siehe auch: [Astro.site](#astrosite) - -### `context.generator` - -`context.generator` ist ein praktischer Weg, um die Version von Astro anzugeben, die in deinem Projekt läuft. Es hat das Format "Astro v1.x.x". - -```ts title="src/pages/site-info.json.ts" -import type { APIContext } from 'astro'; - -export function get({ generator, site }: APIContext) { - const body = JSON.stringify({ generator, site }); - return new Response(body); -} -``` - -Siehe auch: [Astro.generator](#astrogenerator) - -### `context.redirect()` - -Die Funktion `context.redirect()` gibt ein [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)-Objekt zurück, mit dem du auf eine andere Seite umleiten kannst. Diese Funktion ist nur verfügbar, wenn du für SSR (server-side rendering) baust und sollte nicht für statische Seiten verwendet werden. - -```ts -import type { APIContext } from 'astro'; - -export function get({ redirect }: APIContext) { - return redirect('/login', 302); -} -``` - -Siehe auch: [`Astro.redirect()`](#astroredirect) - -## `getStaticPaths()` - -Wenn eine Seite dynamische Parameter im Dateinamen verwendet, muss diese Komponente eine Funktion `getStaticPaths()` exportieren. - -Diese Funktion ist erforderlich, weil Astro ein statischer Website-Builder ist. Das bedeutet, dass deine gesamte Website vor der Zeit erstellt wird. Wenn Astro nicht weiß, dass eine Seite zum Zeitpunkt der Erstellung generiert werden soll, werden deine Nutzer sie nicht sehen, wenn sie deine Website besuchen. - -```astro ---- -export async function getStaticPaths() { - return [ - { params: { /* required */ }, props: { /* optional */ } }, - { params: { ... } }, - { params: { ... } }, - // ... - ]; -} ---- -<!-- Deine HTML-Vorlage hier. --> -``` - -Die Funktion `getStaticPaths()` sollte ein Array von Objekten zurückgeben, um zu bestimmen, welche Pfade von Astro vorgerendert werden. - -Sie kann auch in statischen Datei-Endpunkten für [dynamisches Routing] verwendet werden (/de/guides/endpoints/#params-und-dynamisches-routing). - -:::caution -Die Funktion `getStaticPaths()` wird einmal in ihrem eigenen isolierten Bereich ausgeführt, bevor eine Seite geladen wird. Daher kannst du nichts aus ihrem übergeordneten Bereich referenzieren, außer Datei-Importe. Der Compiler gibt eine Warnung aus, wenn du gegen diese Vorschrift verstößt. -::: - -### `params` - -Der Schlüssel `params` jedes zurückgegebenen Objekts sagt Astro, welche Routen gebaut werden sollen. Die zurückgegebenen Params müssen den dynamischen Parametern und den Restparametern entsprechen, die in deinem Komponenten-Dateipfad definiert sind. - -`params` werden in der URL kodiert, daher werden nur Strings als Werte unterstützt. Der Wert für jedes `params`-Objekt muss mit den im Seitennamen verwendeten Parametern übereinstimmen. - -Nehmen wir zum Beispiel an, du hast eine Seite unter `src/pages/posts/[id].astro`. Wenn du `getStaticPaths` von dieser Seite exportierst und folgendes für Pfade zurückgibst: - -```astro ---- -export async function getStaticPaths() { - return [ - { params: { id: '1' } }, - { params: { id: '2' } }, - { params: { id: '3' } } - ]; -} - -const { id } = Astro.params; ---- -<h1>{id}</h1> -``` - -Dann wird Astro statisch `Posts/1`, `Posts/2` und `Posts/3` zur Erstellungszeit erzeugen. - -### Datenübergabe mit `props` - -Um zusätzliche Daten an jede generierte Seite zu übergeben, kannst du auch einen `props`-Wert für jedes zurückgegebene Pfadobjekt festlegen. Im Gegensatz zu `params` werden `props` nicht in der URL kodiert und sind daher nicht auf Strings beschränkt. - -Nehmen wir zum Beispiel an, du generierst Seiten auf der Grundlage von Daten, die du von einer entfernten API abrufst. Du kannst der Seitenkomponente innerhalb von `getStaticPaths` das vollständige Datenobjekt übergeben: - -```astro ---- -export async function getStaticPaths() { - const data = await fetch('...').then(response => response.json()); - - return data.map((post) => { - return { - params: { id: post.id }, - props: { post }, - }; - }); -} - -const { id } = Astro.params; -const { post } = Astro.props; ---- -<h1>{id}: {post.name}</h1> -``` - -Du kannst auch ein reguläres Array übergeben, was hilfreich sein kann, wenn du eine bekannte Liste von Routen generieren oder stubben willst. - -```astro ---- -export async function getStaticPaths() { - const posts = [ - {id: '1', category: "astro", title: "API-Referenz"}, - {id: '2', category: "react", title: "Einen React-Counter erstellen!"} - ]; - return posts.map((post) => { - return { - params: { id: post.id }, - props: { post } - }; - }); -} -const {id} = Astro.params; -const {post} = Astro.props; ---- -<body> - <h1>{id}: {post.title}</h1> - <h2>Kategorie: {post.category}</h2> -</body> -``` - -Dann generiert Astro statisch `Posts/1` und `Posts/2` zur Erstellungszeit unter Verwendung der Seitenkomponente in `Pages/Posts/[id].astro`. Die Seite kann diese Daten mit `Astro.props` referenzieren: - -### `paginate()` - -Paginierung ist ein häufiger Anwendungsfall für Websites, den Astro über die Funktion `paginate()` unterstützt. die Funktion `paginate()` erzeugt automatisch ein Array, das von `getStaticPaths()` zurückgegeben wird und eine URL für jede Seite der paginierten Sammlung erzeugt. Die Seitennummer wird als Parameter und die Seitendaten werden als `page`-Prop übergeben. - -```js -export async function getStaticPaths({ paginate }) { - // Lade deine Daten mit fetch(), Astro.glob(), etc. - const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); - const result = await response.json(); - const allPokemon = result.results; - - // Gibt eine paginierte Sammlung von Pfaden für alle Beiträge zurück - return paginate(allPokemon, { pageSize: 10 }); -} - -// Wenn sie richtig eingerichtet ist, hat die Seitenreferenz jetzt alles, was -// du brauchst um eine einzelne Seite zu rendern (siehe nächster Abschnitt). -const { page } = Astro.props; -``` - -`paginate()` nimmt den Dateinamen `[Seite].astro` oder `[...Seite].astro` an. Der Parameter `Seite` wird zur Seitennummer in deiner URL: - -- `/posts/[page].astro` würde die URLs `/posts/1`, `/posts/2`, `/posts/3`, usw. erzeugen. -- `/posts/[...page].astro` würde die URLs `/posts`, `/posts/2`, `/posts/3`, usw. erzeugen. - -#### Die `page` prop der Pagination - -Die Pagination übergibt jeder gerenderten Seite eine `page`-Eigenschaft, die eine einzelne Seite der Daten in der paginierten Sammlung darstellt. Dazu gehören die Daten, die du paginiert hast (`page.data`), sowie Metadaten für die Seite (`page.url`, `page.start`, `page.end`, `page.total`, etc). Diese Metadaten sind nützlich für Dinge wie die Schaltfläche "Nächste Seite" oder die Meldung "Zeige 1-10 von 100". - -| Name | Type | Description | -| :----------------- | :-------------------: | :-------------------------------------------------------------------------------------------------------------------------------- | -| `page.data` | `Array` | Array der Daten, die von `data()` für die aktuelle Seite zurückgegeben werden. | -| `page.start` | `number` | Index of first item on current page, starting at `0` (e.g. if `pageSize: 25`, this would be `0` on page 1, `25` on page 2, etc.). | -| `page.end` | `number` | Index des letzten Artikels auf der aktuellen Seite. | -| `page.size` | `number` | Wie viele Artikel pro Seite. | -| `page.total` | `number` | Die Gesamtzahl der Einträge auf allen Seiten. | -| `page.currentpage` | `number` | die aktuelle Seitenzahl, beginnend mit `1`. | -| `page.lastPage` | `number` | Die Gesamtzahl der Seiten. | -| `page.url.current` | `string` | Ermittelt die URL der aktuellen Seite (nützlich für kanonische URLs) | -| `page.url.prev` | `string \| undefined` | Ermittelt die URL der vorherigen Seite (wird `undefined` sein, wenn auf Seite 1). | -| `page.url.next` | `string \| undefined` | Ermittelt die URL der nächsten Seite (wird `undefined`, wenn keine weiteren Seiten vorhanden sind). | - -## Inhalts-Sammlungen - -<p> - <Since v="2.0.0" /> -</p> - -Inhaltssammlungen bieten APIs zur Konfiguration und Abfrage deiner Markdown- oder MDX-Dokumente in `src/content/`. Die Funktionen und Anwendungsbeispiele findest du in unserem Leitfaden für Inhaltssammlungen (/de/guides/content-collections/). - -### `defineCollection()` - -Mit `defineCollection()` kannst du eine Sammlung in einer `src/content/config.*`-Datei konfigurieren. - -```ts -// src/content/config.ts -import { z, defineCollection } from 'astro:content'; -const blog = defineCollection({ - schema: z.object({ - title: z.string(), - permalink: z.string().optional(), - }), -}); - -// Mache deine definierte Sammlung für Astro sichtbar -// mit dem `collections` Export -export const collections = { blog }; -``` - -Diese Funktion akzeptiert die folgenden Eigenschaften: - -#### `schema` - -**Type:** `TSchema extends ZodType` - -`schema` ist ein optionales Zod-Objekt, um den Typ und die Form des Frontmatter für eine Sammlung zu konfigurieren. Jeder Wert muss [einen Zod-Validator](https://github.com/colinhacks/zod) verwenden. - -[Ein Beispiel für die Verwendung findest du in der Anleitung für `Inhaltssammlungen` (/de/guides/content-collections/#defining-a-collection-schema). - -### `getCollection()` - -**Type:** `(collection: string, filter?: (entry: CollectionEntry<collection>) => boolean) => CollectionEntry<collection>[]` - -`getCollection()` ist eine Funktion, die eine Liste der Einträge einer Inhaltssammlung nach Sammlungsnamen abruft. - -Sie gibt standardmäßig alle Einträge in der Sammlung zurück und akzeptiert eine optionale Filterfunktion, um die Einträge nach Eigenschaften einzugrenzen. Damit kannst du über das `data`-Objekt nur nach bestimmten Einträgen in einer Sammlung auf der Basis von `id`-, `slug`- oder Frontmatter-Werten suchen. - -```astro ---- -import { getCollection } from 'astro:content'; - -// Get all `src/content/blog/` entries -const allBlogPosts = await getCollection('blog'); - -// Gib nur Beiträge mit `draft: true` im Frontmatter zurück -const draftBlogPosts = await getCollection('blog', ({ data }) => { - return data.draft === true; -}); ---- -``` - -[Ein Beispiel für die Verwendung findest du in der Anleitung für `Inhaltssammlungen`](/de/guides/content-collections/#querying-collections). - -### `getEntryBySlug()` - -**Type:** `(collection: string, slug: string) => CollectionEntry<collection>` - -`getEntryBySlug()` ist eine Funktion, die einen einzelnen Sammlungseintrag anhand des Sammlungsnamens und des Eintrags `slug` abruft. - -```astro ---- -import { getEntryBySlug } from 'astro:content'; - -const enterprise = await getEntryBySlug('blog', 'enterprise'); ---- -``` - -[Ein Beispiel für die Verwendung findest du in der Anleitung für `Inhaltssammlungen` (/de/guides/content-collections/#querying-collections). - -### Collection-Eintragstyp - -Die Funktionen [`getCollection()`](#getcollection) und [`getEntryBySlug()`](#getentrybyslug) geben jeweils Einträge vom Typ `CollectionEntry` zurück. Dieser Typ ist als Helferfunktion von `astro:content` verfügbar: - -```ts -import type { CollectionEntry } from 'astro:content'; -``` - -Der Typ `CollectionEntry<TCollectionName>` ist ein Objekt mit den folgenden Werten. `tCollectionName` ist der Name der Sammlung, die du abfragst (z. B. `CollectionEntry<'blog'>`). - -#### `id` - -**Example Type:** `'entry-1.md' | 'entry-2.md' | ...` - -Eine eindeutige ID, die den Dateipfad relativ zu `src/content/[collection]` verwendet. Zählt alle möglichen String-Werte auf der Grundlage der Dateipfade der Sammlungseinträge auf. - -#### `slug` - -**Example Type:** `'entry-1' | 'entry-2' | ...` - -Ein URL-fähiger Slug. Standardmäßig wird die `id` ohne die Dateierweiterung verwendet, kann aber durch Setzen der Eigenschaft [slug] (/de/guides/content-collections/#defining-custom-slugs) im Frontmatter einer Datei überschrieben werden. - -#### `data` - -**Type:** `CollectionSchema<TCollectionName>` - -Ein Objekt mit Frontmatter-Eigenschaften, die aus deinem Sammlungsschema abgeleitet werden ([siehe `defineCollection()` Referenz](#definecollection)). Der Standardwert ist `any`, wenn kein Schema konfiguriert ist. - -#### `body` - -**Type:** `string` - -Ein String, der den einfachen, nicht kompilierten Textkörper des Markdown- oder MDX-Dokuments enthält. - -#### `render()` - -**Type:** `() => Promise<RenderedEntry>` - -Eine Funktion, die ein gegebenes Markdown- oder MDX-Dokument für die Darstellung kompiliert. Sie gibt die folgenden Eigenschaften zurück: - -- `<Content />` - Eine Komponente, die verwendet wird, um den Inhalt des Dokuments in einer Astro-Datei darzustellen. -- `headings` - Eine generierte Liste von Überschriften, die das [Astro-Werkzeug `getHeadings()`](/de/guides/markdown-content/#available-properties) bei Markdown- und MDX-Importen widerspiegelt. -- `remarkPluginFrontmatter` - Das geänderte Frontmatter-Objekt, nachdem ein [remark- oder rehype-Plugin angewendet wurde](/de/guides/markdown-content/#frontmatter-layout-property). Wird auf den Typ `any` gesetzt. - -```astro ---- -import { getEntryBySlug } from 'astro:content'; -const entry = await getEntryBySlug('blog', 'entry-1'); - -const { Content, headings, remarkPluginFrontmatter } = await entry.render(); ---- -``` - -[Siehe die Anleitungs für Inhaltssammlungen](/de/guides/content-collections/#rendering-body-content) für ein Anwendungsbeispiel. - -## `import.meta` - -Alle ESM-Module enthalten die Eigenschaft `import.meta`. Astro fügt die Eigenschaft "import.meta.env" über [Vite](https://vite.dev/guide/env-and-mode.html) hinzu. - -**`import.meta.env.SSR`** kann verwendet werden, um zu wissen, wann auf dem Server gerendert wird. Manchmal willst du vielleicht eine andere Logik, zum Beispiel eine Komponente, die nur auf dem Client gerendert werden soll: - -```jsx -import { h } from 'preact'; - -export default function () { - return import.meta.env.SSR ? <div class="spinner"></div> : <FancyComponent />; -} -``` - -## Eingebaute Komponenten - -Astro enthält mehrere integrierte Komponenten, die du in deinen Projekten verwenden kannst. Alle eingebauten Komponenten sind in `.astro`-Dateien über `import {} from 'astro/components';` verfügbar. - -### `<Markdown />` - -Die Markdown-Komponente ist nicht mehr in Astro integriert. Wie du [Markdown in deine Astro-Dateien importierst](/de/guides/markdown-content/#importing-markdown), findest du auf unserer Markdown-Seite. - -### `<Code />` - -```astro ---- -import { Code } from 'astro/components'; ---- -<!-- Syntaxhervorhebung von JavaScript-Code. --> -<Code code={`const foo = 'bar';`} lang="js" /> -<!-- Optional: passe dein Theme an. --> -<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" /> -<!-- Optional: Aktiviere den Zeilenumbruch. --> -<Code code={`const foo = 'bar';`} lang="js" wrap /> -``` - -Diese Komponente bietet Syntax-Highlighting für Codeblöcke zum Zeitpunkt der Erstellung (kein clientseitiges JavaScript enthalten). Die Komponente wird intern von Shiki betrieben und unterstützt alle gängigen [Themen](https://github.com/shikijs/shiki/blob/main/docs/themes.md) und [Sprachen](https://github.com/shikijs/shiki/blob/main/docs/languages.md). Außerdem kannst du deine eigenen Themes und Sprachen hinzufügen, indem du sie an `theme` bzw. `lang` übergibst. - -### `<Prism />` - -Um die Textmarker-Komponente `Prism` zu verwenden, musst du zuerst das Paket `@astrojs/prism` **installieren**: - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install @astrojs/prism - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add @astrojs/prism - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add @astrojs/prism - ``` - </Fragment> -</PackageManagerTabs> - -```astro ---- -import { Prism } from '@astrojs/prism'; ---- -<Prism lang="js" code={`const foo = 'bar';`} /> -``` - -Diese Komponente bietet sprachspezifische Syntaxhervorhebung für Codeblöcke durch Anwendung der CSS-Klassen von Prism. Beachte, dass **du ein Prism-CSS-Stylesheet** bereitstellen (oder dein eigenes mitbringen) musst, damit die Syntaxhervorhebung angezeigt wird! Weitere Informationen findest du im Abschnitt [Prism-Konfiguration](/de/guides/syntax-highlighting/#prism-). - -In der [Liste der von Prism unterstützten Sprachen](https://prismjs.com/#supported-languages) findest du den entsprechenden Alias für eine Sprache. Und du kannst deine Astro-Codeblöcke auch mit `lang="astro"` anzeigen! - -### `<Debug />` - -```astro ---- -import { Debug } from 'astro/components'; -const serverObject = { - a: 0, - b: "string", - c: { - nested: "object" - } -} ---- -<Debug {serverObject} /> -``` - -Diese Komponente bietet eine Möglichkeit, Werte auf der Client-Seite zu überprüfen, ohne JavaScript. - -[canonical]: https://en.wikipedia.org/wiki/Canonical_link_element diff --git a/src/content/docs/de/reference/astro-syntax.mdx b/src/content/docs/de/reference/astro-syntax.mdx index 19d2a2113c945..58f72ac3d74f0 100644 --- a/src/content/docs/de/reference/astro-syntax.mdx +++ b/src/content/docs/de/reference/astro-syntax.mdx @@ -117,7 +117,7 @@ Bei der Verwendung von dynamischen Tags: - **Die Variablennamen müssen großgeschrieben sein.** Verwende beispielsweise `Element` und nicht `element`. Andernfalls wird Astro versuchen, deinen Variablennamen als wörtlichen HTML-Tag zu rendern. -- **Hydratisierungsanweisungen werden nicht unterstützt.** Bei Verwendung von [Hydratisierungsanweisungen `client:*`](/de/guides/framework-components/#interaktive-komponenten-hydratisieren) muss Astro wissen, welche Komponenten für die Produktion gebündelt werden sollen, und das Muster dynamischer Tags verhindert dies. +- **Hydratisierungsanweisungen werden nicht unterstützt.** Bei Verwendung von [Hydratisierungsanweisungen `client:*`](/de/guides/framework-components/#hydrating-interactive-components) muss Astro wissen, welche Komponenten für die Produktion gebündelt werden sollen, und das Muster dynamischer Tags verhindert dies. - **Die [Direktive `define:vars`](/de/reference/directives-reference/#definevars) wird nicht unterstützt.** Wenn du deinen Tag nicht in ein Containerelement (z. B. `<div>`) einhüllen kannst, dann kannst du ``style={`--maVariable:${Wert}}`` zu deinem Tag hinzufügen. diff --git a/src/content/docs/de/reference/integrations-reference.mdx b/src/content/docs/de/reference/integrations-reference.mdx deleted file mode 100644 index 25ea32ebc340e..0000000000000 --- a/src/content/docs/de/reference/integrations-reference.mdx +++ /dev/null @@ -1,451 +0,0 @@ ---- -title: Astro Integrations-API -i18nReady: true ---- - -**Astro-Integrationen** fügen deinem Projekt neue Funktionen und Verhaltensweisen mit nur wenigen Zeilen Code hinzu. - -Diese Referenzseite ist für alle, die ihre eigene Integration schreiben. Wenn du wissen willst, wie du eine Integration in deinem Projekt verwenden kannst, schau dir stattdessen unsere Anleitung [Integrationen nutzen](/de/guides/integrations-guide/) an. - -## Beispiele - -Die offiziellen Astro-Integrationen können dir als Referenz dienen, wenn du deine eigenen Integrationen erstellen willst. - -- **Renderers:** [`lit`](/de/guides/integrations-guide/lit/), [`svelte`](/de/guides/integrations-guide/svelte/), [`react`](/de/guides/integrations-guide/react/), [`preact`](/de/guides/integrations-guide/preact/), [`vue`](/de/guides/integrations-guide/vue/), [`solid`](/de/guides/integrations-guide/solid-js/) -- **Bibliotheken:** [`tailwind`](/de/guides/integrations-guide/tailwind/), [`partytown`](/de/guides/integrations-guide/partytown/) -- **Features:** [`sitemap`](/de/guides/integrations-guide/sitemap/) - -## API-Kurzreferenz - -```ts -interface AstroIntegration { - name: string; - hooks: { - 'astro:config:setup'?: (options: { - config: AstroConfig; - command: 'dev' | 'build'; - isRestart: boolean; - updateConfig: (newConfig: Record<string, any>) => void; - addRenderer: (renderer: AstroRenderer) => void; - addWatchFile: (path: URL | string) => void; - injectScript: (stage: InjectedScriptStage, content: string) => void; - injectRoute: ({ pattern: string, entrypoint: string }) => void; - }) => void; - 'astro:config:done'?: (options: { config: AstroConfig }) => void | Promise<void>; - 'astro:server:setup'?: (options: { server: vite.ViteDevServer }) => void | Promise<void>; - 'astro:server:start'?: (options: { address: AddressInfo }) => void | Promise<void>; - 'astro:server:done'?: () => void | Promise<void>; - 'astro:build:start'?: () => void | Promise<void>; - 'astro:build:setup'?: (options: { - vite: ViteConfigWithSSR; - pages: Map<string, PageBuildData>; - target: 'client' | 'server'; - }) => void | Promise<void>; - 'astro:build:generated'?: (options: { dir: URL }) => void | Promise<void>; - 'astro:build:ssr'?: (options: { manifest: SerializedSSRManifest }) => void | Promise<void>; - 'astro:build:done'?: (options: { dir: URL; routes: RouteData[] }) => void | Promise<void>; - }; -} -``` - -## Hooks - -### `astro:config:setup` - -**Nächster Hook:** [`astro:config:done`](#astroconfigdone) - -**Wann:** Bei der Initialisierung, bevor entweder die [Vite](https://vite.dev/config/) oder die [Astro config](/de/reference/configuration-reference/) verarbeitet wurden. - -**Warum:** Um die Projektkonfiguration zu erweitern. Dazu gehört das Aktualisieren der [Astro config](/de/reference/configuration-reference/), das Anwenden von [Vite plugins](https://vite.dev/guide/api-plugin.html), das Hinzufügen von Komponenten-Renderern und das Einfügen von Skripten in die Seite. - -```ts -'astro:config:setup'?: (options: { - config: AstroConfig; - command: 'dev' | 'build'; - isRestart: boolean; - updateConfig: (newConfig: Record<string, any>) => void; - addRenderer: (renderer: AstroRenderer) => void; - addWatchFile: (path: URL | string) => void; - injectScript: (stage: InjectedScriptStage, content: string) => void; - injectRoute: ({ pattern: string, entrypoint: string }) => void; -}) => void; -``` - -#### `config`-Option - -**Typ:** `AstroConfig` - -Eine schreibgeschützte Kopie der vom Benutzer bereitgestellten [Astro-Konfiguration](/de/reference/configuration-reference/). Sie wird aufgelöst, _bevor_ alle anderen Integrationen ausgeführt wurden. Wenn du eine Kopie der Konfiguration brauchst, nachdem alle Integrationen ihre Aktualisierungen abgeschlossen haben, [siehe den Hook `astro:config:done`](#astroconfigdone). - -#### `command`-Option - -**Typ:** `'dev' / 'build'` - -- `dev` - Projekt wird mit `astro dev` oder `astro preview` ausgeführt -- `build` - Projekt wird mit `astro build` ausgeführt - -#### `isRestart`-Option - -**Typ:** `boolean` - -`false`, wenn der Dev-Server startet, `True`, wenn ein Reload ausgelöst wird. Nützlich, um zu erkennen, wenn diese Funktion mehr als einmal aufgerufen wird. - -#### `updateConfig`-Option - -**Typ:** `(newConfig: Record<string, any>) => void;` - -Eine Callback-Funktion zum Aktualisieren der vom Benutzer bereitgestellten [Astro-Konfiguration](/de/reference/configuration-reference/). Jede Konfiguration, die du bereitstellst, **wird mit der Benutzerkonfiguration und anderen Aktualisierungen der Integrationskonfiguration zusammengeführt,** du kannst also auch Schlüssel weglassen! - -Angenommen, du musst ein [Vite](https://vite.dev/)-Plugin für das Projekt des Benutzers bereitstellen: - -```js -import bananaCSS from '@vitejs/official-banana-css-plugin'; - -export default { - name: 'banana-css-integration', - hooks: { - 'astro:config:setup': ({ updateConfig }) => { - updateConfig({ - vite: { - plugins: [bananaCSS()], - } - }) - } - } -} -``` - -#### `addRenderer`-Option - -**Type:** `(renderer:` [`AstroRenderer`](https://github.com/withastro/astro/blob/fdd607c5755034edf262e7b275732519328a33b2/packages/astro/src/%40types/astro.ts#L872-L883) `) => void;` -**Examples:** [`lit`](https://github.com/withastro/astro/blob/main/packages/integrations/lit/src/index.ts), [`svelte`](https://github.com/withastro/astro/blob/main/packages/integrations/svelte/src/index.ts), [`react`](https://github.com/withastro/astro/blob/main/packages/integrations/react/src/index.ts), [`preact`](https://github.com/withastro/astro/blob/main/packages/integrations/preact/src/index.ts), [`vue`](https://github.com/withastro/astro/blob/main/packages/integrations/vue/src/index.ts), [`solid`](https://github.com/withastro/astro/blob/main/packages/integrations/solid/src/index.ts) - -Eine Callback-Funktion, um einen Komponenten-Framework-Renderer hinzuzufügen (z.B. React, Vue, Svelte, etc.). In den Beispielen und der Typdefinition oben findest du weitere Optionen, aber hier sind die 2 wichtigsten, die du beachten solltest: - -- `clientEntrypoint` - Pfad zu einer Datei, die auf dem Client ausgeführt wird, wenn deine Komponente verwendet wird. Dies ist vor allem für das Rendern oder die Hydratisierung deiner Komponente mit JS wichtig. -- `serverEntrypoint` - Pfad zu einer Datei, die bei serverseitigen Anfragen oder statischen Builds ausgeführt wird, wenn deine Komponente verwendet wird. Diese sollten die Komponenten in statisches Markup umwandeln, ggf. mit Hooks für die Hydratisierung. [Der React-Callback `renderToString`](https://react.dev/reference/react-dom/server/renderToString) ist ein klassisches Beispiel. - -#### `addWatchFile`-Option - -**Typ:** `URL | string` - -Wenn deine Integration von einer Konfigurationsdatei abhängt, die Vite nicht überwacht und/oder einen kompletten Neustart des Dev-Servers benötigt, um wirksam zu werden, füge sie mit `addWatchFile` hinzu. Immer wenn sich diese Datei ändert, wird der Astro Dev Server neu gestartet (du kannst mit `isRestart` überprüfen, wann ein Neustart erfolgt). - -Example usage: - -```js -// Muss ein absoluter Pfad sein! -addWatchFile('/home/user/.../my-config.json'); -addWatchFile(new URL('./tailwind.config.js', config.root)); -``` - -#### `injectRoute`-Option - -**Type:** `({ pattern: string, entrypoint: string }) => void;` - -Eine Callback-Funktion, um Routen in ein Astro-Projekt zu injizieren. Injizierte Routen können [`.astro`-Seiten](/de/basics/astro-pages/) oder [`.js` und `.ts`-Routenhandler](/de/guides/endpoints/#endpunkte-für-statische-dateien) sein. - -`injectRoute` nimmt ein Objekt mit einem `Pattern` und einem `EntryPoint`. - -- `pattern` - wo die Route im Browser ausgegeben werden soll, z.B. `/foo/bar`. Ein Muster kann Astros Dateipfad-Syntax verwenden, um dynamische Routen zu bezeichnen, z.B. `/foo/[bar]` oder `/foo/[...bar]`. Beachte, dass eine Dateierweiterung **nicht** im `Pattern` benötigt wird. -- `entrypoint` - ein reiner Modulbezeichner, der auf die `.astro`-Seite oder den `.js`/`.ts`-Routenhandler zeigt, der die im `pattern` angegebene Route bearbeitet. - -Beispiel für die Verwendung: - -```js -injectRoute({ - pattern: '/foo/[dynamic]', - entrypoint: 'foo/dynamic-page.astro' -}); -``` - -#### `injectScript`-Option - -**Typ:** `(stage: InjectedScriptStage, content: string) => void;` - -Eine Callback-Funktion, die einen String mit JavaScript-Inhalt auf jeder Seite einfügt. - -Die **`stage`** gibt an, wie dieses Skript (der `content`) eingefügt werden soll. Einige Stufen erlauben das Einfügen von Skripten ohne Änderungen, während andere eine Optimierung während des [Vite-Bündelungsschritts](https://vite.dev/guide/build.html) ermöglichen: - -- `"head-inline"`: Eingefügt in ein Skript-Tag im `<head>` jeder Seite. **Nicht** von Vite optimiert oder aufgelöst. -- `before-hydration`: Wird clientseitig importiert, bevor das Hydrations-Skript läuft. Optimiert und aufgelöst von Vite. -- `"page"`: Ähnlich wie `head-inline`, mit dem Unterschied, dass das eingefügte Snippet von Vite verarbeitet und mit allen anderen `<script>`-Tags gebündelt wird, die innerhalb von Astro-Komponenten auf der Seite definiert sind. Das Skript wird mit einem `<script type="module">` in die endgültige Seitenausgabe geladen und von Vite optimiert und aufgelöst. -- `"page-ssr"`: Wird als separates Modul in das Frontmatter jeder Astro-Seitenkomponente importiert. Da in dieser Phase dein Skript importiert wird, ist das globale `Astro`-Objekt nicht verfügbar und dein Skript wird nur einmal ausgeführt, wenn der `Import` zum ersten Mal ausgewertet wird. - - Die Hauptanwendung für die `page-ssr`-Stufe ist das Einfügen eines CSS-`imports` in jede Seite, die von Vite optimiert und aufgelöst werden soll: - ```js - injectScript('page-ssr', 'import "global-styles.css";'); - ``` - -### `astro:config:done` - -**Vorheriger Hook:** [`astro:config:setup`](#astroconfigsetup) - -**Nächster Hook:** [`astro:server:setup`](#astroserversetup), wenn es im "dev"-Modus läuft, oder [`astro:build:start`](#astrobuildstart) während der Produktions-Builds - -**Wann:** Nachdem die Astro-Konfiguration aufgelöst wurde und andere Integrationen ihre `astro:config:setup`-Hooks ausgeführt haben. - -**Warum:** Um die endgültige Konfiguration zur Verwendung in anderen Hooks abzurufen. - -```js -'astro:config:done'?: (options: { config: AstroConfig }) => void | Promise<void>; -``` - -#### `config`-Option - -**Typ:** `AstroConfig` - -Eine schreibgeschützte Kopie der vom Benutzer bereitgestellten [Astro-Konfiguration](/de/reference/configuration-reference/). Dies wird aufgelöst, _nachdem_ andere Integrationen gelaufen sind. - -### `astro:server:setup` - -**Vorheriger Hook:** [`astro:config:done`](#astroconfigdone) - -**Nächster Hook:** [`astro:server:start`](#astroserverstart) - -**Wann:** Kurz nachdem der Vite-Server im "dev"-Modus erstellt wurde, aber bevor das Ereignis `listen()` ausgelöst wird. [Siehe Vites createServer API](https://vite.dev/guide/api-javascript.html#createserver) für weitere Informationen. - -**Warum:** Um die Vite-Serveroptionen und die Middleware zu aktualisieren. - -```js -'astro:server:setup'?: (options: { server: vite.ViteDevServer }) => void | Promise<void>; -``` - -#### `server`-Option - -**Typ:** [`ViteDevServer`](https://vite.dev/guide/api-javascript.html#vitedevserver) - -Eine veränderbare Instanz des Vite-Servers, die im "dev"-Modus verwendet wird. Dies wird zum Beispiel [von unserer Partytown-Integration](/de/guides/integrations-guide/partytown/) verwendet, um den Partytown-Server als Middleware zu injizieren: - -```js -export default { - name: 'partytown', - hooks: { - 'astro:server:setup': ({ server }) => { - server.middlewares.use( - function middleware(req, res, next) { - // Anfragen bearbeiten - } - ); - } - } -} -``` - -### `astro:server:start` - -**Vorheriger Hook:** [`astro:server:setup`](#astroserversetup) - -**Nächster Hook:** [`astro:server:done`](#astroserverdone) - -**Wann:** Kurz nachdem das Ereignis `Listen()` des Servers ausgelöst wurde. - -**Warum:** Um Netzwerkanfragen an der angegebenen Adresse abzufangen. Wenn du diese Adresse für Middleware nutzen willst, solltest du stattdessen `astro:server:setup` verwenden. - -```js -'astro:server:start'?: (options: { address: AddressInfo }) => void | Promise<void>; -``` - -#### `address`-Option - -**Typ:** [`AddressInfo`](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules__types_node_net_d_._net_.addressinfo.html) - -Die Adresse, Familie und Portnummer, die vom [NodeJS-Net-Modul](https://nodejs.org/api/net.html) bereitgestellt wird. - -### `astro:server:done` - -**Vorheriger Hook:** [`astro:server:start`](#astroserverstart) - -**Wann:** Kurz nachdem der Dev-Server beendet wurde. - -**Warum:** Um alle Bereinigungsereignisse auszuführen, die du während der `astro:server:setup` oder `astro:server:start` Hooks auslösen willst. - -```js -'astro:server:done'?: () => void | Promise<void>; -``` - -### `astro:build:start` - -**Vorheriger Hook:** [`astro:config:done`](#astroconfigdone) - -**Nächster Hook:** [`astro:build:setup`](#astrobuildsetup) - -**Wann:** Nach dem Ereignis `astro:config:done`, aber bevor der Produktions-Build beginnt. - -**Warum:** Um alle globalen Objekte oder Clients einzurichten, die während eines Produktions-Builds benötigt werden. Dies kann auch die Build-Konfigurationsoptionen in der [Adapter-API](/de/reference/adapter-reference/) erweitern. - -```js -'astro:build:start'?: () => void | Promise<void>; -``` - -### `astro:build:setup` - -**Vorheriger Hook:** [`astro:build:start`](#astrobuildstart) - -**Nächster Hook:** [`astro:build:ssr`](#astrobuildssr) - -**Wenn:** Nach dem `astro:build:start`-Hook, läuft unmittelbar vor dem Build. - -**Warum:** Zu diesem Zeitpunkt ist die Vite-Konfiguration für den Build vollständig erstellt worden. Das kann zum Beispiel nützlich sein, um einige Standardeinstellungen zu überschreiben. Wenn du dir nicht sicher bist, ob du diesen Hook oder `astro:build:start` verwenden sollst, verwende stattdessen `astro:build:start`. - -```js -'astro:build:setup'?: (options: { - vite: ViteConfigWithSSR; - pages: Map<string, PageBuildData>; - target: 'client' | 'server'; -}) => void | Promise<void>; - -``` - -### `astro:build:generated` - -**Vorheriger Hook:** [`astro:build:setup`](#astrobuildsetup) - -**Wann:** Nachdem ein statischer Produktions-Build die Erstellung von Routen und Assets abgeschlossen hat. - -**Warum:** Um auf generierte Routen und Assets zuzugreifen, **bevor** Build-Artefakte bereinigt werden. Dies ist ein sehr seltener Anwendungsfall. Wir empfehlen die Verwendung von [`astro:build:done`](#astrobuilddone), es sei denn, du brauchst den Zugriff auf die erzeugten Dateien vor der Bereinigung wirklich. - -```js -'astro:build:generated'?: (options: { dir: URL }) => void | Promise<void>; -``` - -### `astro:build:ssr` - -**Vorheriger Hook:** [`astro:build:setup`](#astrobuildsetup) - -**Wann:** Nachdem ein SSR-Produktions-Build abgeschlossen wurde. - -**Warum:** Um Zugriff auf das SSR-Manifest zu erhalten. Dies ist nützlich, wenn du eigene SSR-Builds in Plugins oder Integrationen erstellst. - -```js -'astro:build:ssr'?: (options: { manifest: SerializedSSRManifest }) => void | Promise<void>; -``` - -### `astro:build:done` - -**Vorheriger Hook:** [`astro:build:ssr`](#astrobuildssr) - -**Wann:** Nachdem ein Produktions-Build (SSG oder SSR) abgeschlossen wurde. - -**Warum:** Um auf generierte Routen und Assets für die Erweiterung zuzugreifen (z.B. um Inhalte in das generierte `/assets` Verzeichnis zu kopieren). Wenn du vorhast, die generierten Assets umzuwandeln, empfehlen wir, stattdessen die [Vite Plugin-API](https://vite.dev/guide/api-plugin.html) und die [Konfiguration über `astro:config:setup`](#updateconfig-option) zu nutzen. - -```js -'astro:build:done'?: (options: { dir: URL; routes: RouteData[] }) => void | Promise<void>; -``` - -#### `dir`-Option - -**Typ:** [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) - -Ein URL-Pfad zum Verzeichnis der Build-Ausgabe. Wenn du einen gültigen absoluten Pfad benötigst, solltest du das in Node integrierte Tool [`fileURLToPath`](https://nodejs.org/api/url.html#urlfileurltopathurl) verwenden. - -```js -import { writeFile } from 'node:fs/promises'; -import { fileURLToPath } from 'node:url'; - -export default function myIntegration() { - return { - hooks: { - 'astro:build:done': async ({ dir }) => { - const metadata = await getIntegrationMetadata(); - // Verwende fileURLToPath, um einen gültigen, plattformübergreifenden absoluten Pfadstring zu erhalten - const outFile = fileURLToPath(new URL('./my-integration.json', dir)); - await writeFile(outFile, JSON.stringify(metadata)); - } - } - } -} -``` - -#### `routes`-Option - -**Typ:** [`RouteData[]`](#routedata-typ-referenz) - -Eine Liste aller generierten Routen mit den dazugehörigen Metadaten. **Diese Liste ist leer, wenn du einen SSR-Adapter verwendest!** - -Du kannst unten auf den kompletten Typ `RouteData` verweisen, aber die häufigsten Eigenschaften sind: - -- `component` - den Pfad der Eingabedatei relativ zum Stammverzeichnis des Projekts -- `pathname` - die URL der Ausgabedatei (undefiniert für Routen mit den Parametern `[dynamic]` und `[...spread]`) - -##### `RouteData` Typ-Referenz - -```ts -interface RouteData { - /** Ob eine gegebene Route eine HTML-Seite oder ein Nicht-HTML-Endpunkt ist */ - type: 'page' | 'endpoint'; - /** URL der Quellkomponente */ - component: string; - /** - * Ausgabe-URL-Pfadname, unter dem diese Route erreichbar werden soll - * hinweis: wird für [dynamic] und [...spread]-Routen undefiniert sein - */ - pathname?: string; - /** - * regex für den Abgleich einer Eingabe-URL mit einer angeforderten Route - * bsp. "[fruit]/about.astro" wird dieses Pattern erzeugen: /^\/([^/]+?)\/about\/?$/ - * wenn pattern.test("banana/about") "true" ist - */ - pattern: RegExp; - /** - * Dynamische und verteilte Routenparameter - * bsp. "/pages/[lang]/[..slug].astro" gibt die Parameter ['lang', '...slug'] aus - */ - params: string[]; - /** - * Ähnlich wie das Feld "params", aber mit mehr zugehörigen Metadaten - * bsp. "/seiten/[lang]/index.astro" wird die Segmente ausgeben - * [[ { content: 'lang', dynamic: true, spread: false } ]] - */ - segments: { content: string; dynamic: boolean; spread: boolean; }[][]; - /** - * Funktion zum Rendering einer Komponente an Ort und Stelle aus einem Satz von Eingabedaten. - * Dies ist in der Regel für den internen Gebrauch, benutze es mit Vorsicht! - */ - generate: (data?: any) => string; -} -``` - -## Installation mit `astro add` zulassen - -[Mit dem Befehl `astro add`](/de/reference/cli-reference/#astro-add) kannst du deinem Projekt ganz einfach Integrationen und Adapter hinzufügen. Wenn du möchtest, dass _deine_ Integration mit diesem Tool installiert werden kann, **füge `astro-integration` in das Feld `keywords` in deiner `package.json`** ein: - -```json -{ - "name": "example", - "keywords": ["astro-integration"], -} -``` - -Sobald du [deine Integration bei npm](https://docs.npmjs.com/cli/v8/commands/npm-publish) veröffentlicht hast, wird durch die Ausführung von `astro add example` dein Paket mit allen in der `package.json` angegebenen Abhängigkeiten installiert. Dadurch wird deine Integration auch auf die `astro.config` des Benutzers angewendet: - -```diff -// astro.config.mjs -import { defineConfig } from 'astro/config'; -+ import example from 'example'; - -export default defineConfig({ -+ integrations: [example()], -}) -``` - -:::caution -Dies setzt voraus, dass deine Integrationsdefinition 1) ein `Standard`-Export und 2) eine Funktion ist. Stelle sicher, dass dies der Fall ist, bevor du das Schlüsselwort `astro-integration` hinzufügst! -::: - -## Integrations-Reihenfolge - -Alle Integrationen werden in der Reihenfolge ausgeführt, in der sie konfiguriert wurden. Zum Beispiel wird für das Array `[react(), svelte()]` in der `astro.config.*` eines Nutzers, `react` vor `svelte` ausgeführt. - -Deine Integration sollte idealerweise in beliebiger Reihenfolge ausgeführt werden. Wenn das nicht möglich ist, empfehlen wir zu dokumentieren, dass deine Integration an erster oder letzter Stelle im Konfigurationsfeld `Integrationen` deines Benutzers stehen muss. - -## Integrationen zu Voreinstellungen zusammenfassen - -Eine Integration kann auch als eine Sammlung von mehreren kleineren Integrationen geschrieben werden. Wir nennen diese Sammlungen **Presets.** Anstatt eine Factory-Funktion zu erstellen, die ein einzelnes Integrationsobjekt zurückgibt, liefert ein Preset ein _array_ von Integrationsobjekten. Dies ist nützlich, um komplexe Funktionen aus mehreren Integrationen zu erstellen. - -```js -integrations: [ - // Beispiel: examplePreset() gibt zurück: [integrationOne, integrationTwo, ...etc] - examplePreset() -] -```