Product Logo
Tools & Services

Mehrsprachigkeit einrichten

Wir machen gemeinsam eine bestehende easyWebsite zweisprachig — mit deutscher und englischer Version, sprachspezifischen Abkürzungen und automatischem Sprachumschalter. Weitere Sprachen kannst du nach demselben Muster ergänzen; siehe How-to: Mehrsprachigkeit einrichten.

Was wir erreichen werden

Am Ende dieses Tutorials hat deine Webseite einen Sprachumschalter (DE / EN) in der Navigation. Besucher:innen können zwischen beiden Sprachen wechseln.

Voraussetzungen

  • Du hast ein bestehendes easyWebsite-Projekt (siehe Erste Webseite erstellen)
  • Du hast Zugriff auf die .gitlab-ci.yml in deinem Projekt

1. Ordnerstruktur anlegen

Aktuell liegen deine Markdown-Dateien direkt im dokument-Ordner. Für Mehrsprachigkeit braucht jede Sprache einen eigenen Unterordner.

Erstelle die Ordner de/ und en/. In jedem Sprachordner liegen die Inhalte (index.mdx, weitere Seiten), die _meta.yaml für die Navigation und — falls gewünscht — eine eigene abbreviations.yaml:

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

2. Bestehende Inhalte verschieben

Verschiebe deine vorhandenen Markdown-Dateien in den de/-Ordner. Die Dateinamen bleiben gleich:

dokument/de/index.mdx        ← war: dokument/index.mdx
dokument/de/_meta.yaml        ← war: dokument/_meta.yaml
dokument/de/meine-seite.mdx   ← war: dokument/meine-seite.mdx

3. Englische Inhalte erstellen

Erstelle im en/-Ordner die gleichen Dateien mit englischem Inhalt.

dokument/en/_meta.yaml:

dokument/en/index.mdx:

Die Dateinamen und Ordnerstruktur müssen in beiden Sprachen identisch sein.

4. Sprachspezifische Abkürzungen anlegen

Abkürzungen werden in der abbreviations.yaml des jeweiligen Sprachordners definiert. Begriffe, die im Fließtext deiner Markdown-Seiten vorkommen, werden automatisch als <abbr>-Element gerendert — mit Tooltip beim Hovern und Verlinkung auf die passende Glossar-Seite (/de/glossar, /en/glossar), die pro Sprache automatisch generiert wird.

Das Format ist schlüsselbasiert. Einfache Einträge sind eine einzelne Zeile; für Pluralformen oder flektierte Schreibweisen kannst du variants angeben, die ebenfalls erkannt und auf den kanonischen Eintrag verlinkt werden.

dokument/de/abbreviations.yaml:

dokument/en/abbreviations.yaml:

5. CI-Konfiguration ergänzen

Öffne die .gitlab-ci.yml und füge die Mehrsprachigkeits-Parameter hinzu:

multi-language-locales enthält die kommagetrennte Liste aller Sprachen. multi-language-default-locale bestimmt, auf welche Sprache bei Aufruf ohne Sprachpräfix weitergeleitet wird.

6. Pipeline ausführen und prüfen

Committe alle Änderungen. Die Pipeline baut die Webseite neu.

Nach erfolgreichem Build siehst du:

  • Einen Sprachumschalter (DE / EN) in der Navigationsleiste
  • Unter /de/ die deutschen Inhalte
  • Unter /en/ die englischen Inhalte
  • Pro Sprache eine automatisch erzeugte Glossar-Seite (/de/glossar, /en/glossar)
  • Automatische Weiterleitung auf die Standardsprache beim Aufruf der Root-URL

Du hast jetzt eine zweisprachige Webseite.

Nächste Schritte