84 lines
2.2 KiB
Markdown
84 lines
2.2 KiB
Markdown
# Anpassung des Designs
|
|
|
|
## Designauswahl je Kunde
|
|
|
|
Jeder Kunde erhält in seinem Render-Payload eine Theme-ID:
|
|
|
|
```json
|
|
{
|
|
"design": {
|
|
"theme": "forest-lodge",
|
|
"palette_mode": "theme"
|
|
}
|
|
}
|
|
```
|
|
|
|
`GET /themes` liefert alle verfügbaren IDs inklusive Beschreibung, Layoutfamilie und Farbpalette.
|
|
|
|
## Farbmodus
|
|
|
|
- `theme`: verwendet die vorkonfigurierte Farbpalette des gewählten Designs.
|
|
- `custom`: verwendet die Farben aus dem Kunden-Payload, behält aber Layout und Typografie des Designs.
|
|
- Ohne Angabe: `modern` und `classic` verwenden Kundenfarben, alle benannten Varianten ihre Theme-Palette.
|
|
|
|
Beispiel für kundenspezifische Farben:
|
|
|
|
```json
|
|
{
|
|
"design": {
|
|
"theme": "executive-blue",
|
|
"palette_mode": "custom",
|
|
"primary_color": "#173B67",
|
|
"secondary_color": "#2A6298",
|
|
"accent_color": "#37A6B8",
|
|
"text_color": "#182632",
|
|
"muted_color": "#6B7A86",
|
|
"surface_color": "#EEF3F7",
|
|
"font_family": "Arial"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Was je Kunde variieren darf
|
|
|
|
- Logo
|
|
- Theme-ID
|
|
- optional Farbpalette
|
|
- Kontaktzeile
|
|
- Name und Objektbezeichnung
|
|
|
|
Global möglichst unverändert lassen:
|
|
|
|
- Seitenformat und Ränder
|
|
- Abschnittsreihenfolge
|
|
- KPI-Anzahl
|
|
- maximale Anzahl Empfehlungen
|
|
- Textlängen und Seitenumbrüche
|
|
|
|
## Logo
|
|
|
|
Am robustesten ist ein PNG oder SVG als Base64 Data URI:
|
|
|
|
```text
|
|
data:image/png;base64,iVBORw0KGgo...
|
|
```
|
|
|
|
Damit benötigt Gotenberg keinen Zugriff auf externe URLs. Große Logos vorher verkleinern.
|
|
|
|
## Eine neue Farbvariante anlegen
|
|
|
|
Für eine reine Farbvariante ist kein neues HTML nötig. In `renderer/app/theme_catalog.py` einen weiteren Eintrag mit vorhandener `layout`-Familie ergänzen und die Theme-ID im Enum von `renderer/app/schemas/report-payload.schema.json` eintragen.
|
|
|
|
## Eine neue Layoutfamilie anlegen
|
|
|
|
1. Ordner `renderer/app/templates/<layout>` erstellen.
|
|
2. `report.html.j2` anlegen; optional ein eigenes `footer.html.j2`.
|
|
3. In `renderer/app/theme_catalog.py` ein Theme mit dieser `layout`-ID registrieren.
|
|
4. Theme-ID im Report-Schema ergänzen.
|
|
5. `pytest -q` ausführen.
|
|
6. Mit `python scripts/render-theme-gallery.py` visuell prüfen.
|
|
|
|
## Textlängen
|
|
|
|
Die maximalen Textlängen werden im Claude-Schema begrenzt. Inhalte sollten gekürzt werden, statt Schriftgrößen immer weiter zu reduzieren.
|