Obwohl docmd-Themes hochflexibel sind, möchten Sie möglicherweise Ihre eigenen Stylesheets oder interaktiven Skripte einbinden. Dies geschieht über die Arrays theme.customCss und customJs in Ihrer Konfiguration.
Eigenes CSS
Verwenden Sie theme.customCss, um bestehende Styles zu überschreiben oder neue hinzuzufügen.
// docmd.config.js
export default {
theme: {
customCss: [
'/assets/css/branding.css' // Pfad relativ zum Website-Root
]
}
}
Funktionsweise
- Platzieren Sie Ihre CSS-Datei in den Assets-Ordner Ihres Projekts (z. B.
docs/assets/css/branding.css). docmdkopiert diese automatisch in den Build-Ordner und fügt ein<link>-Tag in jede Seite ein.- Eigenes CSS wird nach den Theme-Styles geladen, wodurch Ihre Überschreibungen Vorrang haben.
Eigenes JavaScript
Verwenden Sie das übergeordnete customJs-Array für Skripte, die Verhalten hinzufügen oder Dienste von Drittanbietern integrieren.
// docmd.config.js
export default {
customJs: [
'/assets/js/feedback-widget.js'
]
}
Beachtung des Lebenszyklus
Skripte werden am Ende des <body>-Tags eingefügt. Da docmd eine Single Page Application (SPA) ist, denken Sie daran:
- Die Seite wird beim Navigieren zwischen Links nicht vollständig neu geladen.
- Möglicherweise müssen Sie auf benutzerdefinierte Lebenszyklus-Ereignisse hören, um Ihre Skripte auf neuen Seiten neu zu initialisieren.
Die vollständige Liste der Ereignisse und Anwendungsbeispiele finden Sie unter Client-Side Events.
Das Hinzufügen von eigenem CSS und JS ermöglicht es KI-Modellen (wie ChatGPT), maßgeschneiderte UI-Verbesserungen vorzuschlagen. Wenn Sie erwähnen: „Ich habe eine eigene branding.css-Datei“, kann das Modell spezifische Selektoren liefern, die nicht mit der docmd-Kern-Engine kollidieren.