Eigene Styles & Skripte

Während docmd-Themes flexible visuelle Standards bieten, können Sie benutzerdefinierte Stylesheets und interaktive Skripte über die Array-Optionen theme.customCss und theme.customJs in docmd.config.json injizieren.

Konfiguration für eigene Styles & Skripte

Eigene Stylesheets und clientseitige Skripte werden symmetrisch unter dem theme-Block konfiguriert:

{
  "theme": {
    "name": "default",
    "customCss": [
      "/assets/css/branding.css"
    ],
    "customJs": [
      "/assets/js/feedback-widget.js"
    ]
  }
}

Benutzerdefinierte CSS-Überschreibungen

Verwenden Sie theme.customCss, um Standard-Theme-Variablen zu überschreiben oder neue Layoutregeln einzuführen:

{
  "theme": {
    "customCss": [
      "/assets/css/branding.css"
    ]
  }
}

Ausführungsschritte

1. Platzieren Sie Ihre CSS-Datei im Assets-Verzeichnis Ihres Projekts (z. B. docs/assets/css/branding.css).
2. docmd kopiert Assets während des Builds in das kompilierte Ausgabeverzeichnis und fügt <link>-Tags automatisch in die Seitenheader ein.
3. Benutzerdefinierte CSS-Dateien werden nach den Theme-Stilen geladen, um sicherzustellen, dass Ihre benutzerdefinierten Regeln die Standard-Theme-Deklarationen sauber überschreiben.

Integration von eigenem JavaScript

Verwenden Sie theme.customJs für Skripte, die interaktive Funktionen hinzufügen oder Analytics von Drittanbietern integrieren:

{
  "theme": {
    "customJs": [
      "/assets/js/feedback-widget.js"
    ]
  }
}

Bewusstsein für den SPA-Router-Lebenszyklus

Benutzerdefinierte Skripte werden am Ende des <body>-Elements geladen. Da docmd während der Client-Navigation als Single Page Application (SPA) arbeitet:

• Vollständige Seitenneuladevorgänge finden beim Klicken auf interne Links nicht statt.
• Skripte, die DOM-Elemente untersuchen oder Event-Listener an diese anhängen, sollten SPA-Router-Lebenszyklus-Ereignisse abonnieren.

Vollständige Ereignissignaturen und Codebeispiele finden Sie unter Clientseitige Ereignisse.

Kaskaden-Reihenfolge

Stylesheets und Skripte werden in einer vorhersehbaren dreistufigen Reihenfolge geladen, sodass Ihre benutzerdefinierten Regeln immer Vorrang haben:

1. Kern und Theme: Basisstile und Farbpaletten laden zuerst.
2. Templates und Plugins: Strukturelle Layout-Templates und Plugin-Assets laden als Nächstes.
3. Benutzerdefiniertes CSS und JS: Ihre customCss- und customJs-Dateien laden zuletzt, sodass Ihre Deklarationen die Standardwerte sicher überschreiben.

Um mehr über strukturelle Layout-Überschreibungen zu erfahren, erkunden Sie Templates.