ページテンプレート - 静的 page-templates-static
テンプレートは、ページの作成に使用され、選択した範囲内で使用できるコンポーネントを定義します。 テンプレートは、作成するページと同じ構造を持ち、実際のコンテンツを持たないノードの階層です。
各テンプレートには、使用可能なコンポーネントが選択されて表示されます。
- テンプレートは コンポーネント;
- コンポーネントはウィジェットを使用し、ウィジェットにアクセスできます。ウィジェットはコンテンツのレンダリングに使用されます。
テンプレートのプロパティと子ノード properties-and-child-nodes-of-a-template
テンプレートは、タイプが cq:Template のノードで、次のプロパティと子ノードを持ちます。
テンプレートは、ページの基盤です。
ページを作成するには、テンプレート(ノードツリー /apps/<myapp>/template/<mytemplate>
)をサイトツリーの対応する位置にコピーする必要があります。「Web サイト」タブを使用してページを作成する場合も、この処理がおこなわれています。
また、このコピーアクションは、ページの初期コンテンツ(通常はトップレベルコンテンツのみ)と、ページのレンダリングに使用されるページコンポーネントのパス(子ノード jcr:content 内のすべて)を示す sling:resourceType プロパティも提供します。
テンプレートの構造 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 の場合
- は、定義された content-definition を保持する構造化ノードタイプです
- コンテンツのレンダリングに使用する 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)?
テンプレートデザインの適用方法 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/<website-name>/templates/<template-name>.
note note NOTE 使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。 詳しくは、 Template Availability. -
を jcr:title 新しい役割を反映する新しいテンプレートノードを作成します。 また、 jcr:description 必要に応じて。 ページの使用可能なテンプレートを必要に応じて変更してください。
note note NOTE Web サイト コンソールから Web サイト のすぐ下にページを作成するときに ページを作成 ダイアログにテンプレートを表示する場合は、 allowedPaths
テンプレートノードのプロパティを、/content(/.*)?
に設定します。 -
テンプレートの基になるコンポーネントをコピーします ( これは sling:resourceType プロパティ jcr:content ノードを使用 ) 新しいインスタンスを作成します。
コンポーネントは通常、 /apps/<website-name>/components/<component-name>.
-
を更新します。 jcr:title および jcr:description 新しいコンポーネントの
-
新しいサムネール画像をテンプレート選択リストに表示する場合は、thumbnail.png を置き換えます(サイズ 128 x 98 px)。
-
を更新します。 sling:resourceType テンプレートの jcr:content 新しいコンポーネントを参照するノード。
-
テンプレートやその基になるコンポーネントの機能やデザインに、さらに変更を加えます。
note note NOTE 変更: /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
名前空間を含める必要があります。詳しくは、クライアントサイドライブラリの使用を参照してください。
既存のテンプレートを使用可能にする making-an-existing-template-available
この例では、特定のコンテンツパスに対してテンプレートを使用する方法を示します。 ページ作成者が新しいページの作成時に使用できるテンプレートは、使用可能なテンプレートで定義されたロジックによって決まります。
-
CRXDE Lite で、ページに使用するテンプレート(ニュースレターテンプレートなど)に移動します。
-
allowedPaths
プロパティおよびテンプレートの可用性に使用する他のプロパティを変更します。例えばallowedPaths
:/content/geometrixx-outdoors/[^/]+(/.*)?
は、このテンプレートが/content/geometrixx-outdoors
以下の任意のパスで許可されることを意味します。