Lightning コンポーネント開発者ガイド
jコミュニティ用のカスタムテーマレイアウトコンポーネントの作成
カスタムテーマレイアウトを作成して、カスタマーサービス (Napili) テンプレートのページの外観および全体的な構造を変換します。
テーマレイアウトは、コミュニティのテンプレートページの最上位のテンプレート (1) です。共通のヘッダーとフッター (2) が含まれ、多くの場合、ナビゲーション、検索、およびユーザプロファイルメニューが含まれます。テーマレイアウトは、ログインページを除く、コミュニティのすべてのページに適用されます。
一方、コンテンツレイアウト (3) では、2 列レイアウトなど、ページのコンテンツ領域を定義します。
1. 新規インターフェースのテーマレイアウトコンポーネントへの追加
テーマレイアウトは、forceCommunity:themeLayout を実装して、コミュニティビルダーの 領域に表示する必要があります。
コードで {!v.body} を明示的に宣言して、テーマレイアウトにコンテンツレイアウトが含まれていることを確認します。ページのコンテンツをテーマレイアウト内に表示したい場合は必ず、{!v.body} を追加します。
コンポーネントをマークアップ内の領域に追加することも、ユーザがコンポーネントをドラッグアンドドロップできるように領域をオープンにしておくこともできます。Aura.Component[] として宣言された属性や、マークアップに含まれる属性はすべて、ユーザがコンポーネントを追加できるテーマレイアウトのオープン領域として表示されます。
カスタマーサービス (Napili) では、テンプレートヘッダーが次のロック済みの領域で構成されます。
- search ([検索パブリッシャー] コンポーネントを含む)
- profileMenu ([プロファイルヘッダー] コンポーネントを含む)
- navBar ([ナビゲーションメニュー] コンポーネントを含む)
[テンプレートのヘッダー] 領域で既存のコンポーネントを再利用するカスタムテーマレイアウトを作成するには、必要に応じて、search、profileMenu、navBar などを属性名の値として宣言します。次に例を示します。
1<aura:attribute name="navBar" type="Aura.Component[]" required="false" />以下は、シンプルなテーマレイアウトのサンプルコードです。
1<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
2 <aura:attribute name="search" type="Aura.Component[]" required="false"/>
3 <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
4 <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
5 <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
6 <div>
7 <div class="searchRegion">
8 {!v.search}
9 </div>
10 <div class="profileMenuRegion">
11 {!v.profileMenu}
12 </div>
13 <div class="navigation">
14 {!v.navBar}
15 </div>
16 <div class="newHeader">
17 {!v.newHeader}
18 </div>
19 <div class="mainContentArea">
20 {!v.body}
21 </div>
22 </div>
23</aura:component>2. CSS リソースの追加による重複の問題の回避
次に、必要に応じて、CSS リソースをバンドルに追加して、テーマレイアウトのスタイルを設定します。
ダイアログボックスやフロート表示など、位置付けられた要素の重複の問題を回避する手順は、次のとおりです。
- CSS スタイルを次のように適用します。
1.THIS { 2 position: relative; 3 z-index: 1; 4} - 要素をカスタムテーマレイアウトの div タグでラップします。
1<div class="mainContentArea"> 2 {!v.body} 3</div>
CSS リソースの名前は componentName.css にする必要があります。