セクション
ドラッグ&ドロップエリアの最も外側にあるコンテナはセクションと呼ばれます。セクションは他のdnd要素内にネスト(入れ子構造に)することはできませんが、モジュール、行、列を含めることができます。制作担当者はページエディター上でセクションを変更し、ドラッグ&ドロップで操作できます。セクションには、背景を使用したスタイルや、パディングを設定できます。

セクションは制作担当者がコンテンツエディターで作成するか、または開発者がdnd_section
タグを使用してdnd_area
に構築することができます。エディター内で使用できるスタイル設定オプションは、テンプレートのコーディング時にも使用できます。
利用可能な全てのドラッグ&ドロップ要素パラメーターと使用例の一覧については、dnd_area
タグを参照してください。
事前設定済みの再利用可能なセクションを作成できます。制作担当者はページエディター上で、このセクションをページ内のドラッグ&ドロップエリアにドラッグ&ドロップできます。このような事前設定済みのセクションのコーディングには、dnd_area
内と同じ構文を使用しますが、セクションテンプレートと呼ばれる専用のファイルに格納します。
通常のドラッグ&ドロップセクションで制御できる全ての内容を制御できますが、制作担当者が出発点として使用できるように再利用可能な方法で提供してください。
事前設定済みのセクションはテンプレート内で使用するか、またはエディター上で制作担当者に提供することができます。HubL includeタグを使用してテンプレートにコンテンツを挿入できるパーシャルテンプレートと同様に、セクションには独自の機能があります。事前設定済みのセクションを参照するには、include_dnd_partial
を使用してセクションファイルを示すパス属性を指定します。include_dnd_partial
はdnd_area
の内部でのみ使用できます。
include_dnd_partial
タグのコンテキスト引数に注意してください。このタグにより、ページテンプレートからセクションにインスタンス固有の変数を渡すことができ、セクションファイルの既定値よりも優先されます。詳細については、セクションコンテキストを参照してください。
このようにセクションを使用すると、読みやすいテンプレートを簡単に作成できます。コンテキストでテンプレート固有のインスタンスが異なる場所のみを指定するため、戻ってそのセクションテンプレートを変更することができます。テーマの全てのテンプレート内で、このセクションの全てのインスタンスが更新されます。
注:セクションがインクルードされたテンプレートを使って以前に作成されたページは更新されません。これにより、破損につながる変更ミスが防止されます。制作担当者は必要に応じて、ページエディター上でセクションの最新バージョンを追加してから、古いバージョンを削除することにより、セクションの最新バージョンを取得できます。
セクションテンプレートは、開発者によって定義される再利用可能なコードセクションです。
セクションテンプレートは、そのテンプレートアノテーションに含まれるtemplateType: section
によって指定されます。セクションに固有の全てのテンプレートアノテーションを以下に示します。
Parameter | Type | Description | Value |
---|---|---|---|
templateType
| String | テンプレートの使用箇所とテンプレートでの使用データを決める、テンプレートタイプを設定します。 |
section
|
label
| String | ページエディターで、人間に分かりやすいセクション名を指定するために使用します。 | |
description
| String | ラベルに収まらない、セクションに関する詳しい説明です。ページエディター内に表示されます。最大255文字です。 | |
screenshotPath
| String/path | セクションのスクリーンショットのパスです。セクションがどのように表示されるかを示すビジュアルリファレンスを制作担当者に提供するために使用します。 |

セクションスクリーンショットのヒント:ChromeまたはFirefoxを使用して公開ページのセクションラッパーを調べます。次に、セクションのラッパー要素を右クリックします。表示されるコンテキストメニューに、[screenshot node]/[capture node]という項目が表示されます。注:スティッキーヘッダーがある場合は、スクリーンショットに表示される可能性があるため、インスペクターを使用して非表示にすることができます。
セクションテンプレートの開始と終了にはdnd_section
タグを使用する必要があります。セクションテンプレートに含めることができるセクションは1つのみです。このセクションの内部には、モジュール、行、列を配置できます。これらは全て、ページテンプレートに追加するdndエリアと同じdnd_area
ルールに従います。例外として、定義は1つのセクションのコンテンツとその子ドラッグ&ドロップ要素が対象になります。
開発中にセクションをプレビューする最も簡単な方法は、デザインマネージャーを使用することです。dnd_area
を含むテンプレートを開きます。これにより、include_dnd_partial
タグを使用してセクションテンプレートが呼び出されます。右上にあるプレビューをクリックします。これにより、セクションを更新すると変更がすぐに反映されるようになります。これは、変更のたびに新しいページを作成するよりも大幅に効率的です。
コンテキストパラメーターに追加する変数は、セクションテンプレート内で参照できるようになります。コンテキストでも、カスタムHubL変数を使用したモジュールパラメーターとdnd要素パラメーターと同様に設定ができます。次の例では、画像URLがコンテキストに存在する場合にはそのURLを使用するように、画像URLを設定しています。リッチ テキスト エリアとボタンコンテンツについても同様です。
コンテキスト変数が使用されている全ての箇所には||
(or)があることに注意してください。最もシンプルな例は、ボタンモジュールです。context.buttonText
に値がある場合は、その値を使用してください。それ以外の場合はテキストを'Subscribe'
に設定します。これにより、何も指定されない場合には、代替の既定コンテンツを提供できます。
開発者はclassパラメーターを使用してセクションラッパーにクラスを追加できます。これにより、dndセクションのhtml要素のclassフィールドに、指定したクラスが追加されます。可能な限り、スタイル設定コントロールをセクションに組み込んで、セクションを制作担当者が変更できるようにしておくことをお勧めします。クラスオプションでは、さらに洗練されたスタイルを設定できます。
制作担当者は、クラスの編集、追加、または削除を行うことはできません。エディター内でセクションを手動で再作成することによってのみ、取り除くことが可能です。
また、CSSまたはJavaScriptを使用してセクションの子のレイアウトを変更することは避けてください。制作担当者がページエディター内で作業しにくくなるためです。
貴重なご意見をありがとうございました。