` ausgibt und Laufzeit-Globalvariablen (`window.user`, `window.breadcrumb` usw.) über `vue_js_setup.html.twig` einfügt. 3. Vue wird auf `#app` gemountet und übernimmt das gesamte UI-Rendering innerhalb dieses Elements. 4. Die Vue-App kommuniziert mit dem Backend über die REST-API. Für ältere Seiten, die noch nicht auf Vue migriert wurden, rendert Symfony die gesamte Seiten-HTML über Twig, und der Inhalt wird in `#sectionMainContent` platziert. Vue wird dennoch gemountet (und stellt die Seitenleiste und die obere Leiste bereit), aber der Hauptinhaltsbereich besteht aus serverseitig gerendertem HTML. ## Layout-Vorlagen Alle Layouts erweitern `@ChamiloCore/Layout/base-layout.html.twig`, das die Struktur für ``, `` und `` bereitstellt. Verfügbare Layout-Varianten: | Vorlage | Zweck | | ---------------------------------- | -------------------------------------------------------------------------------- | | `Layout/base-layout.html.twig` | Basisvorlage – ``-Shell, importiert Makros, gibt `` und `` aus | | `Layout/layout.html.twig` | Standard-Layout mit Seitenleiste, oberer Leiste und Inhaltsbereich | | `Layout/layout_one_col.html.twig` | Einspaltiges Layout (ohne Seitenleiste) | | `Layout/layout_two_col.html.twig` | Zweispaltiges Layout | | `Layout/layout_content.html.twig` | Nur-Inhalt-Wrapper | | `Layout/layout_empty.html.twig` | Leeres Layout mit minimalem Rahmen | | `Layout/no_layout.html.twig` | Kein Header/Footer; Inhalt wird direkt in `` eingefügt | | `Layout/no_layout_scorm.html.twig` | Minimales Layout für SCORM-Inhaltsframes | | `Layout/blank.html.twig` | Komplett leere Seite | | `Layout/skill_layout.html.twig` | Layout für die Kompetenzrad-Seite | ## Wichtige Teilvorlagen | Vorlage | Zweck | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | | `Layout/head.html.twig` | ``-Inhalt: Meta-Tags, alle Encore-CSS-Einträge, Theme-`colors.css`, ältere JS-Einträge, OpenGraph/Twitter-Tags | | `Layout/foot.html.twig` | Ende des Body: Vue-JS-Einstiegspunkt, Einfügen von `tracking.footer_extra_content` | | `Layout/vue_setup.html.twig` | Gibt `

` aus und bindet `vue_js_setup.html.twig` ein | | `Layout/vue_js_setup.html.twig` | Fügt `window.user`, `window.breadcrumb`, `window.languages` usw. ein | | `Layout/cookie_banner.html.twig` | DSGVO-Cookie-Zustimmungsbanner | | `Layout/footer.html.twig` | Seitenfußleiste | | `Layout/course_navigation.html.twig` | Kurs-Tool-Navigations-Breadcrumb | ## Webpack Encore Integration `head.html.twig` lädt CSS für alle Einträge; `foot.html.twig` lädt das Vue-JS-Bundle: ```twig {# In head.html.twig — CSS-Einträge #} {{ encore_entry_link_tags('legacy_free-jqgrid') }} {{ encore_entry_link_tags('legacy_app') }} {{ encore_entry_link_tags('legacy_lp') }} {{ encore_entry_link_tags('legacy_exercise') }} {{ encore_entry_link_tags('legacy_document') }} {{ encore_entry_link_tags('vue') }} {{ encore_entry_link_tags('app') }} {{ theme_asset_link_tag('colors.css') }} {# In foot.html.twig — Vue JS (geladen am Ende des Body) #} {{ encore_entry_script_tags('vue') }} ``` Ältere JS-Einträge (`legacy_app`, `legacy_lp` usw.) werden in `` geladen, da ältere PHP-Seiten darauf angewiesen sind, dass sie verfügbar sind, bevor der DOM bereit ist. ## Makros Wiederverwendbare Twig-Makros befinden sich in `Macros/` und werden am Anfang von `base-layout.html.twig` importiert: | Makro-Datei | Bereitgestellt | | -------------------------- | --------------------------------------- | | `Macros/box.html.twig` | Hilfsfunktionen für Inhaltsboxen | | `Macros/actions.html.twig` | Rendering von Aktionsschaltflächen | | `Macros/buttons.html.twig` | HTML-Hilfsfunktionen für Schaltflächen | | `Macros/headers.html.twig` | Hilfsfunktionen für Seitenüberschriften | | `Macros/image.html.twig` | Hilfsfunktionen für Bild-Rendering | | `Macros/modals.html.twig` | Hilfsfunktionen für Modal-Dialoge | Verwendung innerhalb jeder Vorlage, die `base-layout.html.twig` erweitert: ```twig {{ macro_buttons.submit('Speichern') }} {{ macro_box.content_box('Titel', content) }} ``` ## Benutzerdefinierte Vue-Vorlagen Chamilo unterstützt installationsspezifische Vue-Seitenüberschreibungen über die Umgebungsvariable `APP_CUSTOM_VUE_TEMPLATE`. Wenn diese gesetzt ist, macht der Webpack-Build eine Konstante `ENV_CUSTOM_VUE_TEMPLATE` über `DefinePlugin` verfügbar, und der Vue-Router importiert bedingt Überschreibungskomponenten aus `var/vue_templates/`. Aktuelle Überschreibungspfade: ``` var/vue_templates/ ├── pages/ │ └── AppIndex.vue # Ersetzt die Standard-Einstiegsseite / └── components/ ├── layout/ └── SidebarLogin.vue ``` Nur die Dateien, die in `var/vue_templates/` vorhanden sind, werden überschrieben – alle anderen Seiten und Komponenten verwenden die ursprünglichen Kern-Dateien. *** ## Twig-Funktionen-Referenz Wichtige Twig-Funktionen, die in allen Vorlagen verfügbar sind (registriert in `ChamiloExtension`): | Funktion | Zweck | | -------------------------------- | -------------------------------------- | | `chamilo_settings_get('ns.key')` | Eine Plattformeinstellung auslesen | | `chamilo_settings_has('ns.key')` | Prüfen, ob eine Einstellung existiert | | `chamilo_settings_all()` | Alle Einstellungen als Array abrufen | | `theme_asset('path')` | URL zu einem Asset im aktiven Theme | | `theme_asset_link_tag('path')` | ``-Tag für eine Theme-CSS-Datei | | `theme_asset_script_tag('path')` | `