カスタムテーマレイアウトコンポーネントの設定

1.インターフェースのテーマレイアウトコンポーネントへの追加

テーマレイアウトコンポーネントをエクスペリエンスビルダーの [設定] | [テーマ] 領域に表示するには、テーマレイアウトコンポーネントに forceCommunity:themeLayout インターフェースを実装する必要があります。

コードで {!v.body} を明示的に宣言して、テーマレイアウトにコンテンツレイアウトが含まれていることを確認します。ページのコンテンツをテーマレイアウト内に表示したい場合は必ず、{!v.body} を追加します。

Aura.Component[] として宣言された属性を追加して、ページのコンポーネントを含む領域をテーマレイアウトに含めます。コンポーネントをマークアップ内の領域に追加することも、ユーザーがコンポーネントをドラッグアンドドロップできるように領域をオープンにしておくこともできます。Aura.Component[] として宣言された属性や、マークアップに含まれる属性はすべて、ユーザーがコンポーネントを追加できるテーマレイアウトのオープン領域として表示されます。次に例を示します。

カスタマーサービスでは、テンプレートヘッダーが次のロック済みの領域で構成されます。

• search ([検索パブリッシャー] コンポーネントを含む)
• profileMenu ([プロファイルヘッダー] コンポーネントを含む)
• navBar ([ナビゲーションメニュー] コンポーネントを含む)

マークアップに領域を追加して、テーマレイアウト本体のどこに表示するかを定義します。

2.テーマプロパティを含めるためのデザインリソースの追加

エクスペリエンスビルダーでテーマレイアウトプロパティを公開するには、デザインリソースをバンドルに追加します。

まず、コンポーネントでプロパティを実装します。

設計リソースでテーマプロパティを定義して、UI でプロパティを表示します。次の例では、[Small Header (小さなヘッダー)] テーマレイアウトに表示ラベルと 2 つのチェックボックスを追加しています。

3.CSS リソースの追加による���複の問題の回避

必要に応じて、できれば標準デザイントークンを使用して、CSS リソースをバンドルに追加してテーマレイアウトのスタイルを設定します。

ダイアログボックスやフロート表示など、位置付けられた要素の重複の問題を回避する手順は、次のとおりです。

• CSS ��タイルを適用します。
• 要素をカスタムテーマレイアウトの div タグでラップします。