Lightning コミュニティ開発者ガイド
jカスタムテーマレイアウトコンポーネントの設定
開発者コンソールでカスタムテーマレイアウトを作成して、カスタマーサービステンプレートのページの外観および全体的な構造を変換する方法を見てみましょう。
1.インターフェースのテーマレイアウトコンポーネントへの追加
テーマレイアウトコンポーネントをエクスペリエンスビルダーの 領域に表示するには、テーマレイアウトコンポーネントに forceCommunity:themeLayout インターフェースを実装する必要があります。
コードで {!v.body} を明示的に宣言して、テーマレイアウトにコンテンツレイアウトが含まれていることを確認します。ページのコンテンツをテーマレイアウト内に表示したい場合は必ず、{!v.body} を追加します。
Aura.Component[] として宣言された属性を追加して、ページのコンポーネントを含む領域をテーマレイアウトに含めます。コンポーネントをマークアップ内の領域に追加することも、ユーザがコンポーネントをドラッグアンドドロップできるように領域をオープンにしておくこともできます。Aura.Component[] として宣言された属性や、マークアップに含まれる属性はすべて、ユーザがコンポーネントを追加できるテーマレイアウトのオープン領域として表示されます。次に例を示します。
カスタマーサービスでは、テンプレートヘッダーが次のロック済みの領域で構成されます。
- search ([検索パブリッシャー] コンポーネントを含む)
- profileMenu ([プロファイルヘッダー] コンポーネントを含む)
- navBar ([ナビゲーションメニュー] コンポーネントを含む)
[テンプレートのヘッダー] 領域で既存のコンポーネントを再利用するカスタムテーマレイアウトを作成するには、必要に応じて、search、profileMenu、navBar などを属性名の値として宣言します。次に例を示します。
マークアップに領域を追加して、テーマレイアウトボディのどこに表示するかを定義します。
以下は、シンプルなテーマレイアウトのサンプルコードです。
2.テーマプロパティを含めるためのデザインリソースの追加
エクスペリエンスビルダーでテーマレイアウトプロパティを公開するには、デザインリソースをバンドルに追加します。
まず、コンポーネントでプロパティを実装します。
設計リソースでテーマプロパティを定義して、UI でプロパティを表示します。次の例では、[Small Header (小さなヘッダー)] テーマレイアウトに表示ラベルと 2 つのチェックボックスを追加しています。
3.CSS リソースの追加による重複の問題の回避
必要に応じて、できれば標準デザイントークンを使用して、CSS リソースをバンドルに追加してテーマレイアウトのスタイルを設定します。
ダイアログボックスやフロート表示など、位置付けられた要素の重複の問題を回避する手順は、次のとおりです。
- CSS スタイルを適用します。
- 要素をカスタムテーマレイアウトの div タグでラップします。