この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

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

カスタムテーマレイアウトを作成して、カスタマーサービステンプレートのページの外観および全体的な構造を変換します。

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

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

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

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

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

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

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

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

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>

コンポーネントなどのリソースを access="global" としてマークし、リソースを自分の組織外で使用できるようにします。たとえば、インストール済みパッケージで、または他の組織の Lightning アプリケーションビルダーユーザまたはコミュニティビルダーユーザが、コンポーネントを使用できるようにする場合などです。

メモ

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

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

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

1<design:component label="Small Header">
2    <design:attribute name="blueBackground" label="Blue Background"/>
3    <design:attribute name="smallLogo" label="Small Logo"/>
4</design:component>

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

1<aura:component implements="forceCommunity:themeLayout" access="global" description="Small Header">
2    <aura:attribute name="blueBackground" type="Boolean" default="false"/> 
3    <aura:attribute name="smallLogo" type="Boolean" default="false" />
4    ...

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

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

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

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

CSS スタイルを適用します。

1.THIS {
2    position: relative;
3    z-index: 1;
4}

要素をカスタムテーマレイアウトの div タグでラップします。
1<div class="mainContentArea"> 2 {!v.body} 3</div>

カスタムテーマレイアウトの場合、デフォルトで SLDS が読み込まれます。

メモ

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

Lightning コンポーネント開発者ガイド

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

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

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

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

関連項目: