ページテンプレート - 静的 page-templates-static
テンプレートはページを作成するための雛形として使用され、選択した範囲内でどのコンポーネントを使用できるかを定義します。テンプレートは、そこから作成されるページと同じ構造を持つノード階層ですが、実際のコンテンツは含みません。
テンプレートごとに、使用可能なコンポーネントが提示されます。
- テンプレートはコンポーネントで構成されています。
- コンポーネントはウィジェットを使用し、ウィジェットへのアクセスを許可します。コンテンツをレンダリングするにはウィジェットが使用されます。
テンプレートのプロパティと子ノード properties-and-child-nodes-of-a-template
テンプレートは、cq:Template タイプのノードで、以下のプロパティと子ノードを含んでいます。
テンプレートはページの基礎です。
ページを作成するには、テンプレート(ノードツリー /apps/<myapp>/template/<mytemplate>
)をサイトツリーの対応する位置にコピーする必要があります。「Web サイト」タブを使用してページを作成する場合も、この処理がおこなわれています。
このコピー処理により、ページには、初期コンテンツ(通常はトップレベルコンテンツのみ)と sling:resourceType プロパティ、ページのレンダリングに使用するページコンポーネントのパス(子ノード jcr:content に含まれるすべてのもの)が与えられます。
テンプレートの構造 how-templates-are-structured
考慮すべき側面が 2 つあります。
- テンプレート自体の構造
- テンプレートの使用時に生成されるコンテンツの構造
テンプレートの構造 the-structure-of-a-template
テンプレートは cq:Template タイプのノードの下に作成されます。
様々なプロパティを設定できます。主なものを以下に示します。
- jcr:title - テンプレートのタイトル。ページの作成時にダイアログに表示されます。
- jcr:description - テンプレートの説明。ページの作成時にダイアログに表示されます。
このノードには jcr:content(cq:PageContent)ノードが含まれており、結果ページのコンテンツノードの基礎として使用できます。これが、sling:resourceType を使用して、新しいページの実際のコンテンツをレンダリングする際に使用するコンポーネントを参照します。
このコンポーネントは、新しいページを作成する際に、コンテンツの構造およびデザインを定義するために使用します。
テンプレートによって作成されるコンテンツ the-content-produced-by-a-template
テンプレートは、cq:Page
タイプのページを作成するのに使用します(前述のように、ページは特別なタイプのコンポーネントです)。各 AEM ページには構造化ノード jcr:content
があります。この特徴は次のとおりです。
- タイプが cq:PageContent である。
- 定義済みのコンテンツ定義を保持する構造化ノードタイプである。
- コンテンツのレンダリングに使用する Sling スクリプトを保持するコンポーネントを参照するための
sling:resourceType
プロパティを持つ。
デフォルトのテンプレート default-templates
AEM には、様々なデフォルトテンプレートが標準提供されています。場合によっては、テンプレートをそのまま使用することもできます。その場合は、テンプレートが目的の web サイトで使用できることを確認する必要があります。
例えば、AEM には、コンテンツページやホームページを含む、いくつかのテンプレートが付属しています。
デフォルトテンプレートの表示 displaying-default-templates
リポジトリ内のすべてのテンプレートのリストを確認するには、以下の手順を実行します。
-
CRXDE Lite で、ツール メニューを開いて、「クエリ」をクリックします。
-
「クエリ」タブで、
-
「タイプ」として「XPath」を選択します。
-
「クエリ」入力フィールドに次の文字列を入力します。
//element(*, cq:Template) -
「実行」をクリックします。結果ボックスにリストが表示されます。
通常は、既存のテンプレートを使用し、独自の用途に新しいテンプレートを開発します。詳しくは、ページテンプレートの開発を参照してください。
既存のテンプレートを各自の web サイト用に有効にし、web サイト コンソールから「Web サイト」のすぐ下にページを作成するときに ページを作成 ダイアログにそのテンプレートを表示する場合は、テンプレートノードの allowedPaths プロパティを次のように設定します。/content(https://experienceleague.adobe.com/.&?lang=ja#42;)?
テンプレートデザインの適用方法 how-template-designs-are-applied
UI でスタイルがデザインモードを使用して定義されている場合、デザインは、スタイルが定義されているコンテンツノードの正確なパスに保持されます。
デザインがデザインモードを使用してのみ適用される場合、次のセクションは、 デザインパスの解像度、デシジョンツリー、および例は適用されません。
デザインパスの解像度 design-path-resolution
静的テンプレートに基づいてコンテンツをレンダリングする場合、AEM は コンテンツ階層のトラバーサルに基づいて、最も関連性の高いデザインとスタイルをコンテンツに適用しようとします。
AEM は次の順序で、コンテンツノードに最も関連性の高いスタイルを決定します。
- (デザインモードでデザインが定義されている場合と同様に)コンテンツノードのフルパスと正確なパスのデザインがある場合には、そのデザインを使用します。
- 親のコンテンツノードにデザインがある場合は、そのデザインを使用します。
- コンテンツノードのパス上に任意のノードのデザインがある場合は、そのデザインを使用します。
最後の 2 つのケースで、適用可能なデザインが複数ある場合は、コンテンツノードに最も近いものを使用します。
デシジョンツリー decision-tree
これはデザインパスの解像度を図で表現したものです。
例 example
デザインを任意のノードに適用できる場合、シンプルなコンテンツ構造を次のように考えてみます。
/root/branch/leaf
AEM がデザインを選択する方法を次の表に示します。
ページテンプレートの開発 developing-page-templates
AEM のページテンプレートは、ページの作成に使用されるモデルにすぎません。初期コンテンツは必要に応じて増減できます。テンプレートの役割は、編集やレンダリングが可能なように必要なプロパティ(主に sling:resourceType)が設定された、正しい初期ノード構造を作成することです。
テンプレートの作成(既存のテンプレートを使用) creating-a-new-template-based-on-an-existing-template
新しいテンプレートは完全にゼロから作成できますが、多くの場合は、既存のテンプレートをコピーし更新して、時間と労力を節約します。例えば、Geometrixx 内のテンプレートを使用して作業を開始できます。
既存のテンプレートに基づいてテンプレートを作成するには:
-
既存のテンプレート(作成したいテンプレートに定義が最も近いものが望ましい)を、新しいノードにコピーします。
テンプレートは /apps/<web サイト名>/templates/<テンプレート名> に格納されています。
note note NOTE 使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。詳しくは、使用可能なテンプレートを参照してください。 -
新しいテンプレートノードの jcr:title を、新しい役割を反映するものに変更します。また、必要に応じて jcr:description も更新します。必要に応じて、ページの使用可能なテンプレートを必ず変更してください。
note note NOTE Web サイト コンソールから Web サイト のすぐ下にページを作成するときに ページを作成 ダイアログにテンプレートを表示する場合は、 allowedPaths
テンプレートノードのプロパティを、/content(/.*)?
に設定します。 -
テンプレートの基礎となっているコンポーネント(テンプレート内の jcr:content ノードの sling:resourceType プロパティで示される)をコピーして、インスタンスを作成します。
コンポーネントは、/apps/<web サイト名>/components/<コンポーネント名> に格納されています。
-
新しいコンポーネントの jcr:title と jcr:description を更新します。
-
テンプレート選択リストに新しいサムネール画像を表示する場合は、thumbnail.png を置き換えます(サイズは 128 x 98 px)。
-
テンプレートの jcr:content ノードの sling:resourceType を、新しいコンポーネントを参照するように更新します。
-
テンプレートとその基になるコンポーネントのいずれか一方または両方について、機能やデザインをさらに変更します。
note note NOTE /apps/<web サイト>/templates/<テンプレート名> ノードに対する変更は、テンプレートインスタンスに影響します(選択リストの場合と同様)。 /apps/<web サイト>/components/<コンポーネント名> ノードに対する変更は、テンプレート使用時に作成されるコンテンツページに影響します。 これで、新しいテンプレートを使用して web サイト内にページを作成できます。
cq.shared
名前空間が存在することを前提としています。名前空間が存在しない場合は、JavaScript エラー「Uncaught TypeError: Cannot read property 'shared' of undefined
」が発生します。cq.shared
が含まれているので、それらをベースとするコンテンツには自動的に cq.shared
が含められます。ただし、サンプルコンテンツをベースとせず、ゼロから独自のコンテンツページを作成する場合は、cq.shared
名前空間を含める必要があります。既存のテンプレートを使用可能にする making-an-existing-template-available
この例では、特定のコンテンツパスにテンプレートを使用できるようにする方法を示しています。ページ作成者がページの作成時に使用できるテンプレートは、使用可能なテンプレートで定義されたロジックによって決まります。
-
CRXDE Lite で、ページに使用するテンプレート(ニュースレターテンプレートなど)に移動します。
-
allowedPaths
プロパティおよび使用可能なテンプレートに使用する他のプロパティを変更します。例えばallowedPaths
:/content/geometrixx-outdoors/[^/]+(/.*)?
は、このテンプレートが/content/geometrixx-outdoors
以下の任意のパスで許可されることを意味します。