DXPR Builderテンプレートをオーバーライドする.
DXPR Builderはエレメントをブラウザーでレンダリングします。エディターにコンパイルされたテンプレートからです。テーマにコピーできるエレメントテンプレートはありません。モジュールは独自ページ用に4つのTwigテンプレートを提供し、それらは通常のDrupalの方法でオーバーライドします。このページではそれらを一覧し、エレメントマークアップがオーバーライドできない理由を説明し、代わりにモジュールがサポートするルートを示します。
オーバーライドできるTwigテンプレート
テンプレートはモジュールのtemplates/フォルダーにあります。
| テンプレート | 用途 | 変数 |
|---|---|---|
dxpr-license-info.html.twig |
使用状況サマリーの対象はUser LicensesとContent itemsページ、およびLicense infoブロックです | used_count、total_count、limit、block_label、total_label、used_label、more_info_link |
page--dxpr-builder--media-library.html.twig |
Media Libraryダイアログのページラッパー：/dxpr_builder/media-library |
標準のpage変数 |
html--dxpr-builder--media-library.html.twig |
同じダイアログの<html>ラッパー |
標準のhtml変数 |
page--people-list.html.twig |
ライセンスサマリー付きのPeopleページ(/admin/people)の出発点 |
標準のpage変数とuser_license |
最初の3つはそのまま動作します。Drupalはモジュールからpage--people-list.html.twigを読み込みません。DXPR BuilderはPeopleページにpage__people_listサジェストとuser_license変数を追加するのみです。そこにサマリーを表示するには、ファイルを管理テーマにコピーします。
テンプレートのオーバーライド手順は次のとおりです。
- レンダリングするテーマの
templates/フォルダーにmodules/contrib/dxpr_builder/templates/からファイルをコピーします。管理ページとMedia Libraryダイアログは管理テーマを使います。License infoブロックは配置したリージョンのテーマを使います。 - コピーを編集します。
- キャッシュは
drush crでクリアします。
エレメントマークアップがオーバーライドできない理由
各エレメントのマークアップはdxpr_builder/templates/内のtwig.jsテンプレートです(例: elements/alert/alert.twig.html)。ビルドはこれらのテンプレートをdxpr_builder/dxpr_templates.jsにコンパイルします。エディターはブラウザーでレンダリングし、結果のHTMLをフィールドに保存します。帰結は2つあります。
- 変更したテンプレートにはエディターの再ビルドが必要です。DXPR CDNからエディターを読み込むサイトでは、変更したテンプレートはまったく使えません。
- 保存済みページは保存時のHTMLを保持します。新しいテンプレートは変更後にレンダリングされるエレメントにのみ影響します。
そのため、モジュールはエレメントテンプレートのサイトごとのオーバーライドを提供しません。下のルートのいずれかを使います。
サポートされるカスタマイズルート
| 目的 | ルート |
|---|---|
| 編集者向けの再利用可能なレイアウト | ページテンプレートとユーザーテンプレート(いずれもビルダーで選択) |
| エレメントの見た目の変更 | カスタムCSSを使います。テーマ内で独自のクラスまたはaz-*クラスを対象にします |
| 編集者向けの名前付きスタイル | ユーティリティクラスを使います。テーマの.info.ymlから取得し、テキストエディター用のカスタムスタイルも使います |
| 追加のアイコンセット | アイコンライブラリー |
| 新しいエレメントタイプ | カスタムエレメントの作成 |
次のステップ
- ページテンプレート：編集者が使うテンプレートシステム。
- DXPR Builderのテーマ設定：ビルダーのCSSとテーマの関係。