` 並透過 `vue_js_setup.html.twig` 注入運行時全域變數（`window.user`、`window.breadcrumb` 等）。 3. Vue 掛載到 `#app` 上，並處理該元素內的所有 UI 渲染。 4. Vue 應用程式透過 REST API 與後端通訊。對於尚未遷移至 Vue 的舊版頁面，Symfony 透過 Twig 渲染完整的頁面 HTML，並將內容置於 `#sectionMainContent` 內。Vue 仍會掛載（提供側邊欄和頂部導航列框架），但主要內容區域為伺服器端渲染的 HTML。 ## 佈局模板所有佈局都擴展 `@ChamiloCore/Layout/base-layout.html.twig`，其提供 ``、`` 和 `` 結構。可用的佈局變體： | 模板 | 用途 | | ---------------------------------- | --------------------------------------------- | | `Layout/base-layout.html.twig` | 根模板 — `` 框架、匯入巨集、發出 `` 和 `` | | `Layout/layout.html.twig` | 標準完整佈局，包含側邊欄、頂部導航列和內容區域 | | `Layout/layout_one_col.html.twig` | 單欄佈局（無側邊欄） | | `Layout/layout_two_col.html.twig` | 雙欄佈局 | | `Layout/layout_content.html.twig` | 僅內容包裝器 | | `Layout/layout_empty.html.twig` | 最小化框架的空佈局 | | `Layout/no_layout.html.twig` | 無標頭/頁尾；內容直接置於 `` 內 | | `Layout/no_layout_scorm.html.twig` | SCORM 內容框架的極簡佈局 | | `Layout/blank.html.twig` | 完全空白頁面 | | `Layout/skill_layout.html.twig` | 技能輪頁面的佈局 | ## 關鍵部分模板 | 模板 | 用途 | | ------------------------------------ | ---------------------------------------------------------------------------------- | | `Layout/head.html.twig` | `` 內容：meta 標籤、所有 Encore CSS 項目、主題 `colors.css`、舊版 JS 項目、OpenGraph/Twitter 標籤 | | `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` | GDPR Cookie 同意橫幅 | | `Layout/footer.html.twig` | 頁面頁尾列 | | `Layout/course_navigation.html.twig` | 課程工具導航麵包屑 | ## Webpack Encore 整合 `head.html.twig` 載入所有項目的 CSS；`foot.html.twig` 載入 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 準備就緒前可用。 ## 巨集可重用的 Twig 巨集位於 `Macros/` 目錄，並在 `base-layout.html.twig` 頂部匯入： | 巨集檔案 | 提供 | | -------------------------- | ------------ | | `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` | 模態對話框輔助工具 | 在任何擴展 `base-layout.html.twig` 的模板中使用： ```twig {{ macro_buttons.submit('Save') }} {{ macro_box.content_box('Title', content) }} ``` ## 自訂 Vue 模板 Chamilo 支援透過 `APP_CUSTOM_VUE_TEMPLATE` 環境變數進行每個安裝的 Vue 頁面覆寫。設定後，Webpack 建置透過 `DefinePlugin` 暴露 `ENV_CUSTOM_VUE_TEMPLATE` 常數，Vue 路由器有條件地從 `var/vue_templates/` 匯入覆寫組件。目前的覆寫位置： ``` var/vue_templates/ ├── pages/ │ └── AppIndex.vue # Replaces the default / entry page └── components/ ├── layout/ └── SidebarLogin.vue ``` 僅 `var/vue_templates/` 中存在的檔案會被覆寫 — 所有其他頁面和組件使用核心原始檔案。 *** ## Twig 函數參考所有範本中可用的關鍵 Twig 函數（在 `ChamiloExtension` 中註冊）： | Function | Purpose | | -------------------------------- | ----------------------- | | `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')` | 主題 JS 檔案的 `