Product Logo
Tools & Services

Mehrsprachigkeit einrichten

Deine Webseite kann Inhalte in beliebigen Sprachen anbieten. Eingebaute UI-Texte (Suchfeld, Inhaltsverzeichnis, Callouts …) liefert DWT für Deutsch und Englisch. Für andere Sprachen ergänzt du die UI-Texte in der Theme-Konfiguration — siehe UI-Übersetzungen.

Voraussetzungen

Mehrsprachigkeit aktivieren (Easy Mode)

Lege pro Sprache einen Unterordner im dokument-Ordner an. Jede Sprache hat ihre eigene abbreviations.yaml:

dokument/
├── de/
│   ├── _meta.yaml
│   ├── abbreviations.yaml
│   └── index.mdx
└── en/
    ├── _meta.yaml
    ├── abbreviations.yaml
    └── index.mdx

Ergänze in der .gitlab-ci.yml die Mehrsprachigkeits-Inputs:

Parameter:

  • multi-language-locales (string): Kommagetrennte Liste der Sprachen (z. B. "de,en", "de,en,fr").
  • multi-language-default-locale (string): Sprache, auf die bei Aufruf ohne Sprachpräfix weitergeleitet wird. Default: de.

Nach der nächsten erfolgreichen Pipeline siehst du:

  • einen Sprachumschalter in der Navigation,
  • pro Sprache eigene Inhalte unter /{locale}/,
  • pro Sprache eine automatisch erzeugte Glossar-Seite (/de/glossar, /en/glossar, …).

Mehrsprachigkeit aktivieren (Developer Mode)

Ergänze in der next.config.mjs einen i18n-Block:

Organisiere die Seiten pro Sprache:

pages/
├── index.tsx        ← Root-Redirect (siehe unten)
├── de/
│   ├── index.mdx
│   └── about.mdx
└── en/
    ├── index.mdx
    └── about.mdx

Damit der Aufruf der Root-URL (/) automatisch auf die Standardsprache weiterleitet, lege pages/index.tsx an:

Standardsprache in einem Einzelsprachen-Projekt setzen

(Developer Mode)

Setze DWT_DEFAULT_LOCALE im env-Block der next.config.mjs:

Der Wert bestimmt sowohl das lang-Attribut im HTML als auch die Sprache der eingebauten UI-Texte.

Eine weitere Sprache hinzufügen (Beispiel: Französisch)

  1. Locale ergänzen — im Easy Mode in multi-language-locales, im Developer Mode im i18n.locales-Array:

  2. Seitenordner anlegen und Inhalte übersetzen: dokument/fr/ bzw. pages/fr/.

  3. Abkürzungen pro Sprache in dokument/fr/abbreviations.yaml (bzw. pages/fr/abbreviations.yaml) — Format siehe abbreviations.yaml Format.

  4. UI-Texte ergänzen über themeConfig.i18n.uiElementTranslation. Du musst nur die Schlüssel angeben, die du tatsächlich übersetzen willst — nicht übersetzte Schlüssel werden auf Englisch angezeigt. Die vollständige Liste der Schlüssel findest du unter UI-Übersetzungen.

Eingebaute UI-Texte anpassen (Beispiel: deutsches Suchfeld)

Ergänze einzelne Schlüssel für eine bereits eingebaute Sprache — alle nicht genannten Schlüssel bleiben auf dem Standardwert.

Die genaue Reihenfolge, in der Default-, Sprach- und Override-Texte zusammengeführt werden, dokumentiert die Referenz zur UI-Übersetzung.

Per-Locale-Abkürzungen und Glossar

In mehrsprachigen Projekten legt jede Sprache ihre eigene abbreviations.yaml im Sprachordner an. DWT erzeugt daraus pro Sprache automatisch eine Glossar-Seite (/de/glossar, /en/glossar, …).

Nächste Schritte