Ctrlk
編集

Twigテンプレート

ChamiloはサーバーサイドでレンダリングされるページにTwigを使用しています。テンプレートはsrc/CoreBundle/Resources/views/に配置されており、名前空間プレフィックス@ChamiloCore/（例：@ChamiloCore/Layout/base-layout.html.twig）を使用して参照されます。

最上位のtemplates/ディレクトリは存在せず、すべてのTwigテンプレートはsrc/CoreBundle/Resources/views/の下にあります。

TwigとVueの共存方法

ほとんどのページは以下のフローをたどります：

  1. Symfonyコントローラーがレイアウトを拡張するTwigテンプレートをレンダリングします。

  2. レイアウトにはvue_setup.html.twigが含まれており、<div id="app">を出力し、vue_js_setup.html.twigを介して実行時のグローバル変数（window.user、window.breadcrumbなど）を注入します。

  3. Vueは#appにマウントされ、その要素内のすべてのユーザーインターフェースのレンダリングを管理します。

  4. VueアプリケーションはREST APIを介してバックエンドと通信します。

Vueに移行されていないレガシーページの場合、SymfonyはTwigを介してページ全体のHTMLをレンダリングし、コンテンツは#sectionMainContent内に配置されます。Vueは依然としてマウントされます（サイドバーとトップバーを提供）が、メインコンテンツエリアはサーバーサイドでレンダリングされたHTMLです。

レイアウトテンプレート

すべてのレイアウトは@ChamiloCore/Layout/base-layout.html.twigを拡張しており、<html>、<head>、<body>の構造を提供します。利用可能なレイアウトのバリエーション：

テンプレート
目的

Layout/base-layout.html.twig

ルートテンプレート — <html>構造、Macrosのインポート、<head>と<body>の出力

Layout/layout.html.twig

サイドバー、トップバー、コンテンツエリアを含む標準の完全なレイアウト

Layout/layout_one_col.html.twig

1カラムレイアウト（サイドバーなし）

Layout/layout_two_col.html.twig

2カラムレイアウト

Layout/layout_content.html.twig

コンテンツのみのラッパー

Layout/layout_empty.html.twig

最小限の視覚要素を持つ空のレイアウト

Layout/no_layout.html.twig

ヘッダー/フッターなし；コンテンツが直接<body>内に配置される

Layout/no_layout_scorm.html.twig

SCORMコンテンツフレーム用の基本レイアウト

Layout/blank.html.twig

完全に空白のページ

Layout/skill_layout.html.twig

スキルホイールページ用のレイアウト

主要な部分

テンプレート
目的

Layout/head.html.twig

<head>の内容：メタタグ、EncoreのすべてのCSSエントリ、テーマのcolors.css、レガシーJSエントリ、OpenGraph/Twitterタグ

Layout/foot.html.twig

ボディの終了：VueのJSエントリポイント、tracking.footer_extra_contentの注入

Layout/vue_setup.html.twig

<div id="app">を出力し、vue_js_setup.html.twigを含める

Layout/vue_js_setup.html.twig

window.user、window.breadcrumb、window.languagesなどを注入

Layout/cookie_banner.html.twig

GDPRクッキー同意バナー

Layout/footer.html.twig

ページのフッターバー

Layout/course_navigation.html.twig

コースツールのナビゲーションブレッドクラム

Webpack Encoreとの統合

head.html.twigはすべてのエントリのCSSを読み込み、foot.html.twigはVueのJSバンドルを読み込みます：

レガシーJSエントリ（legacy_app、legacy_lpなど）は、DOMが準備される前にレガシーPHPページがその可用性に依存するため、<head>内で読み込まれます。

マクロ

再利用可能な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を拡張する任意のテンプレート内での使用例：

カスタムVueテンプレート

Chamiloは、環境変数APP_CUSTOM_VUE_TEMPLATEを介して、インストールごとにVueページのオーバーライドをサポートしています。この変数が設定されている場合、WebpackのビルドはDefinePluginを介して定数ENV_CUSTOM_VUE_TEMPLATEを公開し、Vueルーターは条件付きでvar/vue_templates/からオーバーライドコンポーネントをインポートします。

現在のオーバーライドの場所：

var/vue_templates/に存在するファイルのみがオーバーライドされます。その他のすべてのページおよびコンポーネントは、コアのオリジナルが使用されます。

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ファイル用の<link>タグ

theme_asset_script_tag('path')

テーマのJSファイル用の<script>タグ

theme_asset_base64('path')

テーマリソース用のBase64データURI

theme_logo('header'|'email')

優先されるロゴへのURL

is_allowed_to_edit(...)

権限確認用のヘルパー

前へCSSとTailwind次へプラグイン

最終更新

役に立ちましたか？