8.9 KiB
8.9 KiB
Directus CMS – Eingabe-Checkliste
Collections und Struktur
Du hast zwei Collections in Directus:
- messages – kurze UI-Texte (Keys mit Werten)
- 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
- Gehe in Directus → messages.
- Klick "Create New" (oder "+").
- Füll aus:
- key: z. B. "nav.home"
- locale: Dropdown → "en" oder "de"
- value: Der Text (z. B. "Home")
- Speichern. Wiederholen für alle Keys oben.
Schritt 2: content_pages Collection
- Gehe in Directus → content_pages.
- Klick "Create New".
- Füll aus:
- slug: z. B. "home-hero"
- locale: "en" oder "de"
- title (optional): "Hero Section" oder leer
- content: Markdown/Rich Text eingeben
- Speichern. Wiederholen für andere Seiten.
Im Code: Texte nutzen
Kurze Keys (aus messages):
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):
import { getLocalizedContent } from '@/lib/i18n-loader';
const page = await getLocalizedContent('home-hero', locale);
// page.content = "Längerer Fließtext..."
Quick-Test:
-
Lege in Directus einen Key in messages an:
- key: "test"
- locale: "en"
- value: "Hello from Directus"
-
Im Code:
const text = await getLocalizedMessage('test', 'en'); console.log(text); // sollte "Hello from Directus" loggen -
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/*.jsonDateien. - Caching: Texte werden 5 Minuten gecacht. Um Cache zu leeren:
clearI18nCache()im Code oder Server restart. - Rich Text: Im
content_pagesFeld kannst du Markdown oder den Rich-Text-Editor nutzen.
Viel Spaß! 🚀