Experience League

Exit search

ページテンプレート - 静的

テンプレートはページを作成するための雛形として使用され、選択した範囲内で使用できるコンポーネントを定義します。テンプレートは、そこから作成されるページと同じ構造を持つノードの階層ですが、実際のコンテンツは含みません。

テンプレートごとに、使用可能なコンポーネントが提示されます。

テンプレートはコンポーネントで構成されています。
コンポーネントによって使用され、アクセスが許可されるウィジェットを使用して、コンテンツがレンダリングされます。

メモ

編集可能なテンプレートまた、は使用でき、最も柔軟性の高い最新の機能を実現するために推奨されるタイプのテンプレートです。

テンプレートのプロパティおよび子ノード

テンプレートは、タイプが cq:Template のノードであり、以下のプロパティおよび子ノードが含まれます。

名前	種類	説明
.	cq:Template	現在のテンプレート。テンプレートのノードタイプは cq:Template です。
allowedChildren	String[]	このテンプレートの子となることが許可されているテンプレートのパス。
allowedParents	String[]	このテンプレートの親として使用できるテンプレートのパス。
allowedPaths	String[]	このテンプレートをベースとすることが許可されているページのパス。
jcr:created	日付	テンプレートの作成日。
jcr:description	文字列	テンプレートの説明。
jcr:title	文字列	テンプレートのタイトル。
ranking	Long	テンプレートのランク。ユーザーインターフェイスにテンプレートを表示する際に使用します。
jcr:content	cq:PageContent	テンプレートのコンテンツを含むノード。
thumbnail.png	nt:file	テンプレートのサムネール。
icon.png	nt:file	テンプレートのアイコン。

テンプレートはページの基礎です。

ページを作成するには、テンプレートをコピーする必要があります (node-tree) /apps/<myapp>/template/<mytemplate>) を site-tree 内の対応する位置にドラッグします。ページが Web サイト タブをクリックします。

このコピー処理により、ページには、初期コンテンツ（通常はトップレベルコンテンツのみ）と sling:resourceType プロパティ、ページのレンダリングに使用するページコンポーネントのパス（子ノード jcr:content に含まれるすべてのもの）が与えられます。

テンプレートの構造

以下の 2 つの側面について考慮する必要があります。

テンプレート自体の構造
テンプレート使用時に作成されるコンテンツの構造

テンプレートの構造

テンプレートは cq:Template タイプのノードの下に作成されます。

screen_shot_2012-02-13at63646pm

様々なプロパティを設定できます。具体例は以下のとおりです。

jcr:title - テンプレートのタイトル。ページ作成時にダイアログに表示されます。
jcr:description - テンプレートの説明。ページ作成時にダイアログに表示されます。

このノードには jcr:content（cq:PageContent）ノードが含まれており、結果ページのコンテンツノードの基礎として使用できます。これが、sling:resourceType を使用して、新しいページの実際のコンテンツをレンダリングする際に使用するコンポーネントを参照します。

screen_shot_2012-02-13at64010pm

このコンポーネントは、新しいページを作成する際に、コンテンツの構造およびデザインを定義するために使用します。

screen_shot_2012-02-13at64137pm

テンプレートによって作成されるコンテンツ

テンプレートは、タイプのページの作成に使用されます cq:Page （前述のように、ページは特別なタイプのコンポーネントです）。各AEMページには構造化ノードがあります jcr:content. このスケーリングは：

タイプが cq:PageContent である。
定義済みのコンテンツ定義を保持する構造化ノードタイプである。
にプロパティがある sling:resourceType コンテンツのレンダリングに使用する sling スクリプトを保持するコンポーネントを参照するには

デフォルトテンプレート

AEM にはそのまま使用できるデフォルトのテンプレートが多数付属しています。テンプレートをそのまま使用したほうがよい場合もあります。その場合は、実際の Web サイトでテンプレートが使用可能であることを確認する必要があります。

例えば、AEM には、コンテンツページやホームページを含む、いくつかのテンプレートが付属しています。

タイトル	コンポーネント	場所	目的
ホームページ	homepage	geometrixx	Geometrixx ホームページテンプレート。
コンテンツページ	contentpage	geometrixx	Geometrixx コンテンツページテンプレート。

デフォルトテンプレートの表示

リポジトリ内のすべてのテンプレートのリストを確認するには、以下の手順を実行します。

CRXDE Lite で、ツールメニューを開いて、「クエリ」をクリックします。
「クエリ」タブで、
「タイプ」で、「XPath」を選択します。
「クエリ」入力フィールドに次の文字列を入力します。

//element(*, cq:Template)
「実行」をクリックします。結果ボックスにリストが表示されます。

多くの場合、既存のテンプレートを使用して、各自の用途に合わせて新しいテンプレートを開発します。詳しくは、ページテンプレートの開発を参照してください。

Web サイトの既存のテンプレートを有効にして、そのテンプレートを ページを作成 ページを作成するときのダイアログを Web サイト から Web サイト コンソールで、テンプレートノードの allowedPaths プロパティを次のように設定します。 /content(/.*?lang=ja)?

テンプレートデザインの適用方法

UI でスタイルが次を使用して定義されている場合デザインモードの場合、デザインは、スタイルが定義されているコンテンツノードの正確なパスに保持されます。

注意

Adobeでは、を介してのみデザインを適用することをお勧めしますデザインモード.

例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインのアプリケーションは、意図した動作とは異なることがあります。

デザインがデザインモードを使用してのみ適用される場合、次のセクションは、デザインパスの解像度, デシジョンツリー、および例は適用されません。

メモ

この節では、AEM 6.4.2.0 以降のデザインパス解決の動作について説明します。

デザインパスの解像度

静的テンプレートに基づいてコンテンツをレンダリングする場合、AEMは、コンテンツ階層のトラバーサルに基づいて、最も関連性の高いデザインとスタイルをコンテンツに適用しようとします。

AEMは、次の順序でコンテンツノードに最も関連するスタイルを決定します。

（デザインモードでデザインが定義されている場合と同様に）コンテンツノードのフルパスと正確なパスのデザインがある場合は、そのデザインを使用します。
親のコンテンツノードにデザインがある場合は、そのデザインを使用します。
コンテンツノードのパス上に任意のノードのデザインがある場合は、そのデザインを使用します。

最後の 2 つのケースで、適用可能なデザインが複数ある場合は、コンテンツノードに最も近いものを使用します。

デシジョンツリー

これは、デザインパスの解像度論理式。

design_path_resolution

例

シンプルなコンテンツ構造を次のように考えてみます。ここでは、デザインを任意のノードに適用できます。

/root/branch/leaf

次の表に、AEMがデザインを選択する方法を示します。

デザインの検索	のデザインが存在します	選択したデザイン	コメント
`leaf`	`root` `branch` `leaf`	`leaf`	最も正確な一致が常に取得されます。
`leaf`	`root` `branch`	`branch`	ツリー内の最も近いマッチにフォールバックします。
`leaf`	`root`	`root`	他のすべてが失敗した場合は、残りのものを取ります。
`branch`	`branch`	`branch`
`branch`	`branch` `leaf`	`branch`
`branch`	`root` `branch`	`branch`
`branch`	`root` `leaf`	`root`	完全に一致しない場合は、ツリーの 1 つ下の方を選択します。これは常に適用できるが、ツリーの上の方は特定しすぎる可能性があると仮定します。

ページテンプレートの開発

AEM ページのテンプレートは、新しいページを作成する際に使用する単なるモデルです。初期コンテンツは必要に応じて増減できます。テンプレートの役割は、編集やレンダリングが可能なように必要なプロパティ（主に sling:resourceType）が設定された、正しい初期ノード構造を作成することです。

新しいテンプレートの作成（既存のテンプレートを使用）

言うまでもなく、新しいテンプレートは完全にゼロから作成することもできますが、多くの場合は、既存のテンプレートをコピーして更新したほうが、時間と労力を節約できます。例えば、Geometrixx 内のテンプレートを使用して作業を開始できます。

既存のテンプレートに基づいた新しいテンプレートの作成手順

既存のテンプレート（作成したいテンプレートに定義が最も近いものが望ましい）を、新しいノードにコピーします。

テンプレートは、通常、/apps/<website-name>/templates/<template-name> に格納されています。

メモ

使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。使用可能なテンプレートを参照してください。
新しいテンプレートノードの jcr:title を、新しい役割を反映するように変更します。適宜、jcr:description も更新できます。ページで使用可能なテンプレートは、適宜変更してください。

メモ

テンプレートを ページを作成 ページを作成するときのダイアログを Web サイト から Web サイト コンソール、 allowedPaths テンプレートノードのプロパティの設定値： /content(/.*)?
テンプレートの基礎となっているコンポーネント（テンプレート内の jcr:content ノードの sling:resourceType プロパティを参照）をコピーして、新しいインスタンスを作成します。

コンポーネントは、通常、/apps/<website-name>/components/<component-name> に格納されています。
新しいコンポーネントの jcr:title と jcr:description を更新します。
テンプレート選択リストに新しいサムネール画像を表示する場合は、thumbnail.png を置き換えます（サイズは 128 x 98 px）。
テンプレートの jcr:content ノードの sling:resourceType を、新しいコンポーネントを参照するように更新します。
テンプレートとその基になるコンポーネントのいずれかまたは両方に関して、機能やデザインをさらに変更します。

メモ

/apps/<website>/templates/<template-name> ノードに対する変更は、テンプレートインスタンスに影響します（選択リストの場合と同様）。
/apps/<website>/components/<component-name> ノードに対する変更は、テンプレート使用時に作成されるコンテンツページに影響します。

これで、新しいテンプレートを使用して Web サイト内にページを作成できます。

メモ

エディタークライアントライブラリは、コンテンツページに cq.shared 名前空間が存在することを前提としています。名前空間が存在しない場合は、JavaScript エラー「Uncaught TypeError: Cannot read property 'shared' of undefined」が発生します。
すべてのサンプルコンテンツページには cq.shared が含まれているので、それらをベースとするコンテンツには自動的に cq.shared が含められます。ただし、サンプルコンテンツをベースとせず、ゼロから独自のコンテンツページを作成する場合は、cq.shared 名前空間を含める必要があります。
詳しくは、クライアントサイドライブラリの使用を参照してください。

既存のテンプレートを使用可能にする

この例では、特定のコンテンツパスにテンプレートを使用できるようにする方法を示しています。ページ作成者が新しいページの作成時に使用できるテンプレートは、 Template Availability.

CRXDE Lite で、ページに使用するテンプレート（Newsletter テンプレートなど）に移動します。
を allowedPaths プロパティおよび使用する他のプロパティテンプレートの可用性. 例： allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? は、このテンプレートが以下の任意のパスで許可されていることを意味します。 /content/geometrixx-outdoors.