` και εγχέει μεταβλητές παγκόσμιου εύρους εκτέλεσης (`window.user`, `window.breadcrumb` κ.λπ.) μέσω του `vue_js_setup.html.twig`. 3. Το Vue προσαρτάται στο `#app` και χειρίζεται όλη την απόδοση UI μέσα σε αυτό το στοιχείο. 4. Η εφαρμογή Vue επικοινωνεί με τον backend μέσω του REST API. Για παλιές σελίδες που δεν έχουν ακόμη μεταφερθεί στο Vue, το Symfony αποδίδει το πλήρες HTML της σελίδας μέσω Twig και το περιεχόμενο τοποθετείται μέσα στο `#sectionMainContent`. Το Vue εξακολουθεί να προσαρτάται (παρέχοντας το πλαίσιο sidebar και topbar), αλλά η κύρια περιοχή περιεχομένου είναι HTML που αποδίδεται από τον διακομιστή. ## Πρότυπα Layout Όλα τα layouts επεκτείνουν το `@ChamiloCore/Layout/base-layout.html.twig`, το οποίο παρέχει τη δομή ``, `` και ``. Διαθέσιμες παραλλαγές layout: | Πρότυπο | Σκοπός | | ---------------------------------- | -------------------------------------------------------------------------------- | | `Layout/base-layout.html.twig` | Ριζικό πρότυπο — κέλυφος ``, εισάγει Macros, παράγει `` και `` | | `Layout/layout.html.twig` | Τυπικό πλήρες layout με sidebar, topbar και περιοχή περιεχομένου | | `Layout/layout_one_col.html.twig` | Layout μίας στήλης (χωρίς sidebar) | | `Layout/layout_two_col.html.twig` | Layout δύο στηλών | | `Layout/layout_content.html.twig` | Περιτύλιξη μόνο περιεχομένου | | `Layout/layout_empty.html.twig` | Άδειο layout με ελάχιστο chrome | | `Layout/no_layout.html.twig` | Χωρίς header/footer· το περιεχόμενο πηγαίνει απευθείας μέσα στο `` | | `Layout/no_layout_scorm.html.twig` | Γυμνό layout για πλαίσια περιεχομένου SCORM | | `Layout/blank.html.twig` | Εντελώς κενή σελίδα | | `Layout/skill_layout.html.twig` | Layout για τη σελίδα τροχού δεξιοτήτων | ## Βασικά Partials | Πρότυπο | Σκοπός | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | `Layout/head.html.twig` | Περιεχόμενο ``: meta tags, όλες οι καταχωρήσεις CSS Encore, `colors.css` θέματος, παλιές καταχωρήσεις JS, OpenGraph/Twitter tags | | `Layout/foot.html.twig` | Τέλος body: σημείο εισόδου Vue JS, έγχυση `tracking.footer_extra_content` | | `Layout/vue_setup.html.twig` | Παράγει `

` και περιλαμβάνει `vue_js_setup.html.twig` | | `Layout/vue_js_setup.html.twig` | Εγχέει `window.user`, `window.breadcrumb`, `window.languages` κ.λπ. | | `Layout/cookie_banner.html.twig` | Banner συναίνεσης GDPR για cookies | | `Layout/footer.html.twig` | Μπάρα υποσέλιδου σελίδας | | `Layout/course_navigation.html.twig` | Breadcrumb πλοήγησης εργαλείων μαθήματος | ## Ενσωμάτωση Webpack Encore Το `head.html.twig` φορτώνει CSS για όλες τις καταχωρήσεις· το `foot.html.twig` φορτώνει το bundle Vue JS: ```twig {# In head.html.twig — CSS entries #} {{ 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 (loaded at end of body) #} {{ encore_entry_script_tags('vue') }} ``` Οι παλιές καταχωρήσεις JS (`legacy_app`, `legacy_lp` κ.λπ.) φορτώνονται στο `` επειδή οι παλιές σελίδες PHP εξαρτώνται από την διαθεσιμότητά τους πριν ετοιμαστεί το DOM. ## Macros Επαναχρησιμοποιήσιμα macros Twig βρίσκονται στο `Macros/` και εισάγονται στην κορυφή του `base-layout.html.twig`: | Αρχείο Macro | Παρέχει | | -------------------------- | ------------------------------ | | `Macros/box.html.twig` | Βοηθήματα κουτιού περιεχομένου | | `Macros/actions.html.twig` | Απόδοση κουμπιών ενέργειας | | `Macros/buttons.html.twig` | Βοηθήματα HTML κουμπιών | | `Macros/headers.html.twig` | Βοηθήματα κεφαλίδας σελίδας | | `Macros/image.html.twig` | Βοηθήματα απόδοσης εικόνας | | `Macros/modals.html.twig` | Βοηθήματα διαλόγου modal | Χρήση μέσα σε οποιοδήποτε πρότυπο που επεκτείνει το `base-layout.html.twig`: ```twig {{ macro_buttons.submit('Save') }} {{ macro_box.content_box('Title', content) }} ``` ## Προσαρμοσμένα Πρότυπα Vue Το Chamilo υποστηρίζει παρακάμψεις σελίδων Vue ανά εγκατάσταση μέσω της μεταβλητής περιβάλλοντος `APP_CUSTOM_VUE_TEMPLATE`. Όταν ορίζεται, η κατασκευή Webpack εκθέτει μια σταθερά `ENV_CUSTOM_VUE_TEMPLATE` μέσω `DefinePlugin`, και ο router Vue εισάγει προαιρετικά συστατικά παρακάμψεων από το `var/vue_templates/`. Τρέχουσες τοποθεσίες παρακάμψεων: ``` var/vue_templates/ ├── pages/ │ └── AppIndex.vue # Replaces the default / entry page └── components/ ├── layout/ └── SidebarLogin.vue ``` Μόνο τα αρχεία που υπάρχουν στο `var/vue_templates/` παρακάμπτονται — όλες οι άλλες σελίδες και συστατικά χρησιμοποιούν τα αρχικά core. *** ## Αναφορά Λειτουργιών Twig Κύριες λειτουργίες Twig διαθέσιμες σε όλους τους πίνακες (καταχωρημένες στο `ChamiloExtension`): | Λειτουργία | Σκοπός | | -------------------------------- | ---------------------------------------- | | `chamilo_settings_get('ns.key')` | Ανάγνωση ρύθμισης πλατφόρμας | | `chamilo_settings_has('ns.key')` | Έλεγχος ύπαρξης ρύθμισης | | `chamilo_settings_all()` | Λήψη όλων των ρυθμίσεων ως πίνακας | | `theme_asset('path')` | URL σε πόρο του ενεργού θέματος | | `theme_asset_link_tag('path')` | Ετικέτα `` για αρχείο CSS θέματος | | `theme_asset_script_tag('path')` | Ετικέτα `