テンプレートはページを作成するための雛形として使用され、選択した範囲内で使用できるコンポーネントを定義します。テンプレートは、そこから作成されるページと同じ構造を持つノードの階層ですが、実際のコンテンツは含みません。
テンプレートごとに、使用可能なコンポーネントが提示されます。
編集可能なテンプレート も使用できますが、これは最も柔軟性が高く、最新の機能を実現するために推奨されるタイプのテンプレートです。
テンプレートは、タイプが 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 | テンプレートのアイコン。 |
テンプレートはページの基礎です。
ページを作成するには、テンプレート(ノードツリー /apps/<myapp>/template/<mytemplate>
)をサイトツリーの対応する位置にコピーする必要があります。「Web サイト」タブを使用してページを作成する場合も、この処理がおこなわれています。
このコピー処理により、ページには、初期コンテンツ(通常はトップレベルコンテンツのみ)と sling:resourceType プロパティ、ページのレンダリングに使用するページコンポーネントのパス(子ノード jcr:content に含まれるすべてのもの)が与えられます。
以下の 2 つの側面について考慮する必要があります。
テンプレートは cq:Template タイプのノードの下に作成されます。
様々なプロパティを設定できます。具体例は以下のとおりです。
このノードには jcr:content(cq:PageContent)ノードが含まれており、結果ページのコンテンツノードの基礎として使用できます。これが、sling:resourceType を使用して、新しいページの実際のコンテンツをレンダリングする際に使用するコンポーネントを参照します。
このコンポーネントは、新しいページを作成する際に、コンテンツの構造およびデザインを定義するために使用します。
テンプレートは、cq:Page
タイプのページを作成するのに使用します(前述のように、ページは特別なタイプのコンポーネントです)。各 AEM ページには構造化ノード jcr:content
があります。この特徴は次のとおりです。
sling:resourceType
プロパティを持つ。AEM にはそのまま使用できるデフォルトのテンプレートが多数付属しています。テンプレートをそのまま使用したほうがよい場合もあります。その場合は、実際の Web サイトでテンプレートが使用可能であることを確認する必要があります。
例えば、AEM には、コンテンツページやホームページを含む、いくつかのテンプレートが付属しています。
タイトル | コンポーネント | 場所 | 目的 |
---|---|---|---|
ホームページ | homepage | geometrixx | Geometrixx ホームページテンプレート。 |
コンテンツページ | contentpage | geometrixx | Geometrixx コンテンツページテンプレート。 |
リポジトリ内のすべてのテンプレートのリストを確認するには、以下の手順を実行します。
CRXDE Lite で、ツールメニューを開いて、「クエリ」をクリックします。
「クエリ」タブで、
「タイプ」で、「XPath」を選択します。
内 クエリ 入力フィールドに次の文字列を入力します。//element(*, cq:Template)
「実行」をクリックします。結果ボックスにリストが表示されます。
多くの場合、既存のテンプレートを使用して、各自の用途に合わせて新しいテンプレートを開発します。詳しくは、ページテンプレートの開発を参照してください。
既存のテンプレートを各自の web サイト用に有効にし、web サイトコンソールから「Web サイト」のすぐ下にページを作成するときにページを作成ダイアログにそのテンプレートを表示する場合は、テンプレートノードの allowedPaths プロパティを次のように設定します。/content(/.&?lang=ja#42;)?
UI でスタイルがデザインモードを使用して定義されている場合、デザインは、スタイルが定義されているコンテンツノードの正確なパスに保持されます。
Adobeでは、デザインモード を介してのみデザインを適用することをお勧めします。
例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインの適用は、意図したビヘイビアーとは異なることがあります。
デザインがデザインモードを使用してのみ適用される場合、次のセクションは、 デザインパスの解像度、デシジョンツリー、および例は適用されません。
静的テンプレートに基づいてコンテンツをレンダリングする場合、AEM は コンテンツ階層のトラバーサルに基づいて、最も関連性の高いデザインとスタイルをコンテンツに適用しようとします。
AEM は次の順序で、コンテンツノードに最も関連性の高いスタイルを決定します。
最後の 2 つのケースで、適用可能なデザインが複数ある場合は、コンテンツノードに最も近いものを使用します。
これはデザインパスの解像度を図で表現したものです。
デザインを任意のノードに適用できる場合、シンプルなコンテンツ構造を次のように考えてみます。
/root/branch/leaf
次の表に、AEM がデザインを選択する方法を示します。
デザインの検索 |
存在するデザイン |
選択したデザイン |
コメント |
leaf
|
|
leaf |
最も正確に一致するものが常に取得されます。 |
leaf |
|
branch |
ツリー下部の最も近いマッチにフォールバックします。 |
leaf |
root |
root |
他のすべてが失敗した場合は、残りのものを取得します。 |
branch |
branch |
branch |
|
branch |
|
branch |
|
branch |
|
branch |
|
branch |
|
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
名前空間を含める必要があります。
詳しくは、クライアントサイドライブラリの使用を参照してください。
この例では、特定のコンテンツパスにテンプレートを使用できるようにする方法を示しています。ページ作成者が新しいページの作成時に使用できるテンプレートは、使用可能なテンプレートで定義されたロジックによって決まります。
CRXDE Lite で、ページに使用するテンプレート(ニュースレターテンプレートなど)に移動します。
allowedPaths
プロパティおよびテンプレートの可用性に使用する他のプロパティを変更します。例えば allowedPaths
: /content/geometrixx-outdoors/[^/]+(/.*)?
は、このテンプレートが /content/geometrixx-outdoors
以下の任意のパスで許可されることを意味します。