Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(de): update guides/integration-guide/index.mdx #10441

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 192 additions & 35 deletions src/content/docs/de/guides/integrations-guide/index.mdx
Original file line number Diff line number Diff line change
@@ -1,32 +1,38 @@
---
title: Integrationen nutzen
title: Integrationen hinzufügen
description: Lerne, wie du Integrationen zu deinem Astro-Projekt hinzufügst.
sidebar:
label: Übersicht der Integrationen
i18nReady: true
---
import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

**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.
**Astro-Integrationen** fügen neue Funktionen und Verhaltensweisen für dein Projekt mit nur wenigen Zeilen Code hinzu. Du kannst eine offizielle Integration verwenden, [von der Community erstellte Integrationen](#weitere-integrationen-entdecken) oder sogar [selbst eine eigene Integration erstellen](#eine-eigene-integration-erstellen).

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.
- React, Vue, Svelte, Solid und andere beliebte UI-Frameworks mit einem [Renderer](/de/guides/framework-components/) freischalten.
- das On-Demand-Rendering mit einem [SSR-Adapter](/de/guides/on-demand-rendering/) aktivieren.
- Tools wie Tailwind und Partytown mit ein paar Zeilen Code integrieren.
- deinem Projekt neue Funktionen hinzufügen, wie z. B. die automatische Sitemap-Generierung.
- eigenen Code schreiben, der sich in den Build-Prozess, den Entwicklungsserver und mehr einklinkt.

:::tip[Integrationsverzeichnis]
In unserem [Integrationsverzeichnis](https://astro.build/integrations/) kannst du Hunderte von offiziellen und Community-Integrationen durchstöbern oder suchen. Hier findest du Pakete, die du deinem Astro-Projekt für Authentifizierung, Analyse, Leistung, SEO, Barrierefreiheit, UI, Entwickler-Tools und vieles mehr hinzufügen kannst.
:::

## Offizielle Integrationen

Die folgenden Integrationen werden von Astro gepflegt.

<IntegrationsNav />

## 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.
:::
Astro enthält den Befehl `astro add`, um die Einrichtung offizieller Integrationen zu automatisieren. Einige Community-Plugins können ebenfalls mit diesem Befehl hinzugefügt werden. Bitte überprüfe in der Dokumentation der jeweiligen Integration, ob `astro add` unterstützt wird oder ob du [manuell installieren](#manuelle-installation) musst.

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.

Expand Down Expand Up @@ -69,38 +75,100 @@ Es ist sogar möglich, mehrere Integrationen gleichzeitig zu konfigurieren!
</PackageManagerTabs>

:::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.
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 den folgenden Befehl aus:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install [package-name]
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add [package-name]
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add [package-name]
```
</Fragment>
</PackageManagerTabs>
:::

## Integrationen nutzen
### Manuelle Installation

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.

1. [Eine Integration über ein npm-Paket installieren](#installation-eines-npm-pakets).
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: { /* ... */ }},
]
})
```
```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.

#### Installation eines NPM-Pakets

Installiere eine NPM-Paketintegration mit einem Paketmanager und aktualisiere dann die Datei `astro.config.mjs` manuell.

Zum Beispiel, um die `@astrojs/sitemap` Integration zu installieren:

<Steps>
1. Installiere die Integration in die Abhängigkeiten deines Projekts mit deinem bevorzugten Paketmanager:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @astrojs/sitemap
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add @astrojs/sitemap
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @astrojs/sitemap
```
</Fragment>
</PackageManagerTabs>

2. Importiere die Integration in deine `astro.config.mjs`-Datei und füge sie zusammen mit allen Konfigurationsoptionen zu deinem Array `integrations[]` hinzu:

```js title="astro.config.mjs" ins={2} ins="sitemap()"
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
// ...
integrations: [sitemap()],
// ...
});
```

Beachte, dass verschiedene Integrationen unterschiedliche Konfigurationseinstellungen haben können. Lies die Dokumentation der einzelnen Integrationen und wende alle notwendigen Konfigurationsoptionen für deine gewählte Integration in der Datei `astro.config.mjs` an.
</Steps>

### 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.
Expand All @@ -114,7 +182,7 @@ integrations: [

### 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.
Integrationen, dessen Bedingung `false` ergibt, 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: [
Expand All @@ -123,6 +191,95 @@ integrations: [
]
```

## Aktualisierung von Integrationen

Um alle offiziellen Integrationen auf einmal zu aktualisieren, führe den Befehl `@astrojs/upgrade` aus. Dadurch werden sowohl Astro als auch alle offiziellen Integrationen auf die neuesten Versionen aktualisiert.

### Automatisches Aktualisieren

<PackageManagerTabs>
<Fragment slot="npm">
```shell
# Aktualisiere Astro und die offiziellen Integrationen zusammen auf den neuesten Stand
npx @astrojs/upgrade
```
</Fragment>
<Fragment slot="pnpm">
```shell
# Aktualisiere Astro und die offiziellen Integrationen zusammen auf den neuesten Stand
pnpm dlx @astrojs/upgrade
```
</Fragment>
<Fragment slot="yarn">
```shell
# Aktualisiere Astro und die offiziellen Integrationen zusammen auf den neuesten Stand
yarn dlx @astrojs/upgrade
```
</Fragment>
</PackageManagerTabs>

### Manuelles Aktualisieren

Um eine oder mehrere Integrationen manuell zu aktualisieren, verwende den entsprechenden Befehl für deinen Paketmanager.

<PackageManagerTabs>
<Fragment slot="npm">
```shell
# Beispiel: Upgrade der Integrationen von React und Tailwind
npm install @astrojs/react@latest @astrojs/tailwind@latest
```
</Fragment>
<Fragment slot="pnpm">
```shell
# Beispiel: Upgrade der Integrationen von React und Tailwind
pnpm add @astrojs/react@latest @astrojs/tailwind@latest
```
</Fragment>
<Fragment slot="yarn">
```shell
# Beispiel: Upgrade der Integrationen von React und Tailwind
yarn add @astrojs/react@latest @astrojs/tailwind@latest
```
</Fragment>
</PackageManagerTabs>

## Entfernen einer Integration

<Steps>
1. Um eine Integration zu entfernen, deinstalliere die Integration zunächst aus deinem Projekt.

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm uninstall @astrojs/react
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm remove @astrojs/react
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn remove @astrojs/react
```
</Fragment>
</PackageManagerTabs>

2. Als Nächstes entfernst du die Integration aus deiner Datei `astro.config.*`:

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
integrations: [
react()
]
});
```

## 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.
Expand Down
Loading