Lightning コミュニティ開発者ガイド
jステップ 1: 基本テーマレイアウト構造を作成する
テーマレイアウトコンポーネントの基本構造を作成するには、2 つの領域 (search と sidebar) を定義する属性を追加します。そして、領域の表示場所を定義する属性をマークアップに追加します。
1<aura:component implements="forceCommunity:themeLayout">
2 <aura:attribute name="search" type="Aura.Component[]"/>
3 <aura:attribute name="sidebarFooter" type="Aura.Component[]"/>
4
5 {!v.search}
6 {!v.sidebarFooter}
7 {!v.body}
8
9</aura:component>現在は、すべての領域が縦方向に並んでいるため、SLDS グリッドシステムを使用して、ある程度のセマンティック構造を追加します。
1<aura:component implements="forceCommunity:themeLayout">
2 <aura:attribute name="search" type="Aura.Component[]"/>
3 <aura:attribute name="sidebarFooter" type="Aura.Component[]"/>
4 <div class="slds-grid slds-grid--align-center">
5 <div class="slds-col">
6 <div class="slds-grid slds-grid--vertical">
7 <div class="slds-col">
8 <!-- placeholder for logo -->
9 </div>
10 <div class="slds-col">
11 {!v.search}
12 </div>
13 <div class="slds-col">
14 <!-- placeholder for navigation -->
15 </div>
16 <div class="slds-col">
17 {!v.sidebarFooter}
18 </div>
19 </div>
20 </div>
21 <div class="slds-col content">
22 {!v.body}
23 </div>
24 </div>
25</aura:component>コンポーネントに UI 表示ラベルを付けるための設計リソースをバンドルに追加します。
1<design:component label="Condensed Theme Layout">
2
3</design:component>エクスペリエンスビルダーでテーマレイアウトを選択すると、ホームテーマレイアウトのセマンティック階層が表示されます。![エクスペリエンスビルダーの [テーマ] 領域](https://developer.salesforce.com/docs/resources/img/ja-jp/228.0?doc_id=images%2Fexample1.png&folder=communities_dev)
ページの [ページのプロパティ] を開きます。[このページのデフォルトのテーマレイアウトを上書きします。](1) を選択してテーマレイアウトを表示します。[テーマレイアウト] ドロップダウン (2) で [ホーム] を選択します。
ページが更新され、新しいテーマレイアウトが機能する様子を確認できます。ページのレイアウトを調べてみましょう。ナビゲーション、検索、プロファイルメニュー、ロゴが入っていたヘッダーは表示されていません。これらの要素の一部は、左側の 2 つのサイドバー領域 (search と sidebarFooter) に移動しています。ただし、指定された search 領域用の交換可能な検索コンポーネントを作成するまでは、標準の検索コンポーネントが表示されます。