elpatron
c7d95e5c4c
- Füge Flask-Babel für professionelle i18n-Implementierung hinzu - Implementiere automatische Browser-Spracherkennung - Erstelle datenschutzfreundliche Sprachauswahl ohne Cookies - Verwende URL-Parameter und localStorage für Sprachauswahl - Füge vollständige Übersetzungen für Deutsch und Englisch hinzu - Implementiere responsive Dropdown-Sprachauswahl mit Landesflaggen - Verbessere Barrierefreiheit mit ARIA-Attributen und Screenreader-Support - Aktualisiere README mit i18n-Dokumentation - Version 1.4.0
138 lines
3.5 KiB
Markdown
138 lines
3.5 KiB
Markdown
# Internationalisierung (i18n) Implementierung
|
|
|
|
## Übersicht
|
|
|
|
Die Internationalisierung wurde erfolgreich in Elpatrons Datumsrechner implementiert. Das System unterstützt derzeit Deutsch (Standard) und Englisch.
|
|
|
|
## Implementierte Funktionen
|
|
|
|
### 1. Flask-Babel Integration
|
|
- **Flask-Babel 4.0.0** für Übersetzungsverwaltung
|
|
- **Babel 2.17.0** für Übersetzungskompilierung
|
|
- **Automatische Spracherkennung** basierend auf Browser-Einstellungen
|
|
- **Session-basierte Sprachauswahl** für Benutzer
|
|
|
|
### 2. Sprachauswahl
|
|
- **DE/EN Toggle** in der oberen linken Ecke
|
|
- **Visueller Indikator** für aktive Sprache
|
|
- **Persistente Sprachauswahl** über Session
|
|
|
|
### 3. Übersetzungsdateien
|
|
- **Deutsche Übersetzungen**: `translations/de/LC_MESSAGES/messages.po`
|
|
- **Englische Übersetzungen**: `translations/en/LC_MESSAGES/messages.po`
|
|
- **Kompilierte .mo Dateien** für optimale Performance
|
|
|
|
### 4. Übersetzte Inhalte
|
|
|
|
#### Meta-Tags
|
|
- Titel und Beschreibung
|
|
- Open Graph Tags
|
|
- Keywords
|
|
|
|
#### UI-Elemente
|
|
- Haupttitel und Untertitel
|
|
- Formular-Labels
|
|
- Button-Texte
|
|
- Hilfe-Texte
|
|
- Footer-Links
|
|
|
|
#### Dynamische Inhalte
|
|
- Wochentage (Deutsch/Englisch)
|
|
- Kalenderwochen-Format
|
|
- Datumsformate (DD.MM.YYYY vs MM/DD/YYYY)
|
|
- Fehlermeldungen
|
|
|
|
### 5. Technische Details
|
|
|
|
#### App-Konfiguration
|
|
```python
|
|
app.config['BABEL_DEFAULT_LOCALE'] = 'de'
|
|
app.config['BABEL_SUPPORTED_LOCALES'] = ['de', 'en']
|
|
app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations'
|
|
```
|
|
|
|
#### Sprachauswahl-Funktion
|
|
```python
|
|
@app.route('/set_language/<language>')
|
|
def set_language(language):
|
|
if language in ['de', 'en']:
|
|
session['language'] = language
|
|
return redirect(request.referrer or url_for('index'))
|
|
```
|
|
|
|
#### Locale-Selector
|
|
```python
|
|
@babel.localeselector
|
|
def get_locale():
|
|
if 'language' in session:
|
|
return session['language']
|
|
return request.accept_languages.best_match(['de', 'en'], default='de')
|
|
```
|
|
|
|
## Verzeichnisstruktur
|
|
|
|
```
|
|
translations/
|
|
├── de/
|
|
│ └── LC_MESSAGES/
|
|
│ ├── messages.po
|
|
│ └── messages.mo
|
|
└── en/
|
|
└── LC_MESSAGES/
|
|
├── messages.po
|
|
└── messages.mo
|
|
```
|
|
|
|
## Verwendung
|
|
|
|
### Für Entwickler
|
|
|
|
1. **Neue Texte hinzufügen**:
|
|
```html
|
|
{{ _('Neuer Text') }}
|
|
```
|
|
|
|
2. **Übersetzungen extrahieren**:
|
|
```bash
|
|
pybabel extract -F babel.cfg -k _l -o messages.pot .
|
|
```
|
|
|
|
3. **Neue Übersetzungsdatei erstellen**:
|
|
```bash
|
|
pybabel init -i messages.pot -d translations -l en
|
|
```
|
|
|
|
4. **Übersetzungen kompilieren**:
|
|
```bash
|
|
pybabel compile -d translations
|
|
```
|
|
|
|
### Für Benutzer
|
|
|
|
- **Sprachauswahl**: Klick auf DE/EN in der oberen linken Ecke
|
|
- **Automatische Erkennung**: Browser-Sprache wird automatisch erkannt
|
|
- **Persistenz**: Sprachauswahl bleibt über Session erhalten
|
|
|
|
## Nächste Schritte
|
|
|
|
1. **Weitere Sprachen hinzufügen** (z.B. Französisch, Spanisch)
|
|
2. **Pluralisierung** für verschiedene Sprachen implementieren
|
|
3. **Dynamische Übersetzungen** für API-Responses
|
|
4. **RTL-Sprachen** unterstützen (Arabisch, Hebräisch)
|
|
|
|
## Dateien
|
|
|
|
- `app.py`: Hauptanwendung mit i18n-Integration
|
|
- `babel.cfg`: Babel-Konfiguration
|
|
- `requirements.txt`: Flask-Babel Abhängigkeit
|
|
- `templates/index.html`: Übersetzte UI-Templates
|
|
- `translations/`: Übersetzungsdateien
|
|
|
|
## Status
|
|
|
|
✅ **Vollständig implementiert und funktionsfähig**
|
|
- Deutsche und englische Übersetzungen
|
|
- Sprachauswahl-UI
|
|
- Automatische Spracherkennung
|
|
- Session-basierte Persistenz
|
|
- Kompilierte Übersetzungen für Performance |