270 lines
8.9 KiB
Markdown
270 lines
8.9 KiB
Markdown
# Directus CMS – Eingabe-Checkliste
|
||
|
||
## Collections und Struktur
|
||
|
||
Du hast zwei Collections in Directus:
|
||
1. **messages** – kurze UI-Texte (Keys mit Werten)
|
||
2. **content_pages** – längere Abschnitte (Slug mit Rich Text)
|
||
|
||
---
|
||
|
||
## Collection: messages
|
||
|
||
Alle folgenden Einträge in Directus anlegen. Format:
|
||
| key | locale | value |
|
||
|
||
### Navigation & Header
|
||
```
|
||
nav.home | en | Home
|
||
nav.home | de | Startseite
|
||
nav.about | en | About
|
||
nav.about | de | Über mich
|
||
nav.projects | en | Projects
|
||
nav.projects | de | Projekte
|
||
nav.contact | en | Contact
|
||
nav.contact | de | Kontakt
|
||
```
|
||
|
||
### Footer
|
||
```
|
||
footer.role | en | Software Engineer
|
||
footer.role | de | Software Engineer
|
||
footer.madeIn | en | Made in Germany
|
||
footer.madeIn | de | Made in Germany
|
||
footer.legalNotice | en | Legal notice
|
||
footer.legalNotice | de | Impressum
|
||
footer.privacyPolicy | en | Privacy policy
|
||
footer.privacyPolicy | de | Datenschutz
|
||
footer.privacySettings| en | Privacy settings
|
||
footer.privacySettings| de | Datenschutz-Einstellungen
|
||
footer.privacySettingsTitle | en | Show privacy settings banner again
|
||
footer.privacySettingsTitle | de | Datenschutz-Banner wieder anzeigen
|
||
footer.builtWith | en | Built with
|
||
footer.builtWith | de | Built with
|
||
```
|
||
|
||
### Home – Hero
|
||
```
|
||
home.hero.features.f1 | en | Next.js & Flutter
|
||
home.hero.features.f1 | de | Next.js & Flutter
|
||
home.hero.features.f2 | en | Docker Swarm & CI/CD
|
||
home.hero.features.f2 | de | Docker Swarm & CI/CD
|
||
home.hero.features.f3 | en | Self-Hosted Infrastructure
|
||
home.hero.features.f3 | de | Self-Hosted Infrastruktur
|
||
```
|
||
|
||
### Home – About
|
||
```
|
||
home.about.title | en | About Me
|
||
home.about.title | de | Über mich
|
||
home.about.techStackTitle | en | My Tech Stack
|
||
home.about.techStackTitle | de | Mein Tech Stack
|
||
home.about.hobbiesTitle | en | When I'm Not Coding
|
||
home.about.hobbiesTitle | de | Wenn ich nicht code
|
||
home.about.currentlyReading.title | en | Currently Reading
|
||
home.about.currentlyReading.title | de | Aktuell am Lesen
|
||
home.about.currentlyReading.progress | en | Progress
|
||
home.about.currentlyReading.progress | de | Fortschritt
|
||
```
|
||
|
||
### Home – Projects (List)
|
||
```
|
||
home.projects.title | en | Selected Works
|
||
home.projects.title | de | Ausgewählte Projekte
|
||
home.projects.subtitle | en | A collection of projects I've worked on...
|
||
home.projects.subtitle | de | Eine Auswahl an Projekten, an denen ich gearbeitet habe...
|
||
home.projects.featured | en | Featured
|
||
home.projects.featured | de | Hervorgehoben
|
||
home.projects.viewAll | en | View All Projects
|
||
home.projects.viewAll | de | Alle Projekte ansehen
|
||
```
|
||
|
||
### Home – Contact
|
||
```
|
||
home.contact.title | en | Contact Me
|
||
home.contact.title | de | Kontakt
|
||
home.contact.subtitle | en | Interested in working together...
|
||
home.contact.subtitle | de | Du willst zusammenarbeiten...
|
||
home.contact.getInTouch | en | Get In Touch
|
||
home.contact.getInTouch | de | Melde dich
|
||
home.contact.getInTouchBody | en | I'm always available to discuss...
|
||
home.contact.getInTouchBody | de | Ich bin immer offen für neue Chancen...
|
||
home.contact.info.email | en | Email
|
||
home.contact.info.email | de | E-Mail
|
||
home.contact.info.location | en | Location
|
||
home.contact.info.location | de | Ort
|
||
home.contact.info.locationValue | en | Osnabrück, Germany
|
||
home.contact.info.locationValue | de | Osnabrück, Deutschland
|
||
```
|
||
|
||
### Common
|
||
```
|
||
common.backToHome | en | Back to Home
|
||
common.backToHome | de | Zurück zur Startseite
|
||
common.backToProjects | en | Back to Projects
|
||
common.backToProjects | de | Zurück zu den Projekten
|
||
common.viewAllProjects | en | View All Projects
|
||
common.viewAllProjects | de | Alle Projekte ansehen
|
||
common.loading | en | Loading...
|
||
common.loading | de | Lädt...
|
||
```
|
||
|
||
### Projects – List
|
||
```
|
||
projects.list.title | en | My Projects
|
||
projects.list.title | de | Meine Projekte
|
||
projects.list.intro | en | Explore my portfolio...
|
||
projects.list.intro | de | Stöbere durch mein Portfolio...
|
||
projects.list.searchPlaceholder | en | Search projects...
|
||
projects.list.searchPlaceholder | de | Projekte durchsuchen...
|
||
projects.list.all | en | All
|
||
projects.list.all | de | Alle
|
||
projects.list.noResults | en | No projects found...
|
||
projects.list.noResults | de | Keine Projekte passen...
|
||
projects.list.clearFilters | en | Clear filters
|
||
projects.list.clearFilters | de | Filter zurücksetzen
|
||
```
|
||
|
||
### Projects – Detail
|
||
```
|
||
projects.detail.links | en | Project Links
|
||
projects.detail.links | de | Projektlinks
|
||
projects.detail.liveDemo | en | Live Demo
|
||
projects.detail.liveDemo | de | Live-Demo
|
||
projects.detail.liveNotAvailable | en | Live demo not available
|
||
projects.detail.liveNotAvailable | de | Keine Live-Demo verfügbar
|
||
projects.detail.viewSource | en | View Source
|
||
projects.detail.viewSource | de | Quellcode ansehen
|
||
projects.detail.techStack | en | Tech Stack
|
||
projects.detail.techStack | de | Tech-Stack
|
||
```
|
||
|
||
### Consent & Privacy
|
||
```
|
||
consent.title | en | Privacy settings
|
||
consent.title | de | Datenschutz-Einstellungen
|
||
consent.description | en | We use optional services...
|
||
consent.description | de | Wir nutzen optionale Dienste...
|
||
consent.essential | en | Essential
|
||
consent.essential | de | Essentiell
|
||
consent.analytics | en | Analytics
|
||
consent.analytics | de | Analytics
|
||
consent.chat | en | Chatbot
|
||
consent.chat | de | Chatbot
|
||
consent.alwaysOn | en | Always on
|
||
consent.alwaysOn | de | Immer aktiv
|
||
consent.acceptAll | en | Accept all
|
||
consent.acceptAll | de | Alles akzeptieren
|
||
consent.acceptSelected | en | Accept selected
|
||
consent.acceptSelected | de | Auswahl akzeptieren
|
||
consent.rejectAll | en | Reject all
|
||
consent.rejectAll | de | Alles ablehnen
|
||
consent.hide | en | Hide
|
||
consent.hide | de | Ausblenden
|
||
```
|
||
|
||
---
|
||
|
||
## Collection: content_pages
|
||
|
||
Diese sind für **längere Inhalte**. Nutze den Rich-Text-Editor in Directus oder Markdown.
|
||
|
||
### Home – Hero (langere Beschreibung)
|
||
- **slug**: home-hero
|
||
- **locale**: en / de
|
||
- **title** (optional): Hero Section Description
|
||
- **content**: Längerer Text/Rich Text (ersetzen die kurze beschreibung)
|
||
|
||
Beispiel EN:
|
||
> "I'm a passionate software engineer and self-hoster from Osnabrück, Germany. I build full-stack web applications with Next.js, create mobile solutions with Flutter, and love exploring DevOps. I run my own infrastructure and automate deployments with CI/CD."
|
||
|
||
Beispiel DE:
|
||
> "Ich bin ein leidenschaftlicher Softwareentwickler und Self-Hoster aus Osnabrück. Ich entwickle Full-Stack Web-Apps mit Next.js, mobile Apps mit Flutter und bin begeistert von DevOps. Ich betreibe meine eigene Infrastruktur und automatisiere Deployments."
|
||
|
||
### Home – About (längere Inhalte)
|
||
- **slug**: home-about
|
||
- **locale**: en / de
|
||
- **content**: Längerer Fließtext über mich
|
||
|
||
### Home – Projects Intro
|
||
- **slug**: home-projects
|
||
- **locale**: en / de
|
||
- **content**: Intro-Text vor der Projekt-Liste
|
||
|
||
### Home – Contact Intro
|
||
- **slug**: home-contact
|
||
- **locale**: en / de
|
||
- **content**: Intro vor dem Kontakt-Formular
|
||
|
||
---
|
||
|
||
## Wie du es in Directus eingeben kannst:
|
||
|
||
### Schritt 1: messages Collection
|
||
1. Gehe in Directus → **messages**.
|
||
2. Klick "Create New" (oder "+").
|
||
3. Füll aus:
|
||
- **key**: z. B. "nav.home"
|
||
- **locale**: Dropdown → "en" oder "de"
|
||
- **value**: Der Text (z. B. "Home")
|
||
4. Speichern. Wiederholen für alle Keys oben.
|
||
|
||
### Schritt 2: content_pages Collection
|
||
1. Gehe in Directus → **content_pages**.
|
||
2. Klick "Create New".
|
||
3. Füll aus:
|
||
- **slug**: z. B. "home-hero"
|
||
- **locale**: "en" oder "de"
|
||
- **title** (optional): "Hero Section" oder leer
|
||
- **content**: Markdown/Rich Text eingeben
|
||
4. Speichern. Wiederholen für andere Seiten.
|
||
|
||
---
|
||
|
||
## Im Code: Texte nutzen
|
||
|
||
### Kurze Keys (aus messages):
|
||
```tsx
|
||
import { getLocalizedMessage } from '@/lib/i18n-loader';
|
||
|
||
const text = await getLocalizedMessage('nav.home', locale);
|
||
// text = "Home" (oder fallback aus JSON)
|
||
```
|
||
|
||
### Längere Inhalte (aus content_pages):
|
||
```tsx
|
||
import { getLocalizedContent } from '@/lib/i18n-loader';
|
||
|
||
const page = await getLocalizedContent('home-hero', locale);
|
||
// page.content = "Längerer Fließtext..."
|
||
```
|
||
|
||
---
|
||
|
||
## Quick-Test:
|
||
|
||
1. Lege in Directus **einen** Key in messages an:
|
||
- key: "test"
|
||
- locale: "en"
|
||
- value: "Hello from Directus"
|
||
|
||
2. Im Code:
|
||
```tsx
|
||
const text = await getLocalizedMessage('test', 'en');
|
||
console.log(text); // sollte "Hello from Directus" loggen
|
||
```
|
||
|
||
3. Wenn das funktioniert: Alle anderen Keys eintragen!
|
||
|
||
---
|
||
|
||
## Hinweise:
|
||
|
||
- **Keys** sollten mit `.` strukturiert sein (z. B. `nav.home`, `home.about.title`).
|
||
- **Locale** ist immer "en" oder "de" (enum).
|
||
- **Fallback**: Wenn ein Key in Directus fehlt, nutzt der Code die `messages/*.json` Dateien.
|
||
- **Caching**: Texte werden 5 Minuten gecacht. Um Cache zu leeren: `clearI18nCache()` im Code oder Server restart.
|
||
- **Rich Text**: Im `content_pages` Feld kannst du Markdown oder den Rich-Text-Editor nutzen.
|
||
|
||
Viel Spaß! 🚀
|