コミュニティ用のカスタムテーマレイアウトコンポーネントの作成

テーマレイアウトコンポーネントは、コミュニティのテンプレートページの最上位のテンプレート (1) です。テーマレイアウトコンポーネントは、テーマレイアウトを使用してページに整理および適用されます。テーマレイアウトコンポーネントには、共通のヘッダーとフッター (2) が含まれ、多くの場合、ナビゲーション、検索、およびユーザプロファイルメニューが含まれます。一方、コンテンツレイアウト (3) では、ページのコンテンツ領域を定義します。2 列のコンテンツレイアウトを次に示します。

テーマレイアウト種別は、コミュニティ内で同じテーマレイアウトを共有するページを分類します。

開発者コンソールでカスタムテーマレイアウトコンポーネントを作成すると、そのコンポーネントはコミュニティビルダーの [設定] | [テーマ] 領域に表示されます。ここで、コンポーネントに新規または既存のテーマレイアウト種別を割り当てることができます。その後、ページのプロパティでテーマレイアウト種別 (つまりテーマレイアウト) を適用します。

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

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

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

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

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

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

次の例では、Small Header というテーマレイアウトに 2 つチェックボックスを追加します。

デザインリソースでは、プロパティのみを公開します。コンポーネントでプロパティを実装する必要があります。

デザインリソースの名前は、componentName.design にする必要があります。

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

必要に応じて、CSS リソースをバンドルに追加して、テーマレイアウトのスタイルを設定します。

CSS リソースの名前は componentName.css にする必要があります。