Show Menu
トピック×

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

テンプレートはページを作成するための雛形として使用され、選択した範囲内で使用できるコンポーネントを定義します。テンプレートは、そこから作成されるページと同じ構造を持つノードの階層ですが、実際のコンテンツは含みません。
テンプレートごとに、使用可能なコンポーネントが提示されます。
  • テンプレートは コンポーネント で構成されています。
  • コンポーネントによって使用され、アクセスが許可されるウィジェットを使用して、コンテンツがレンダリングされます。
編集可能なテンプレート も利用でき、最も柔軟性の高い最新の機能を利用するために推奨されるタイプのテンプレートです。

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

テンプレートは、タイプが cq:Template のノードであり、以下のプロパティおよび子ノードが含まれます。
名前 タイプ 説明
. cq:Template 現在のテンプレート。 テンプレートのノードタイプは cq:Template です。
allowedChildren 文字列[] このテンプレートの子となることが許可されているテンプレートのパス。
allowedParents 文字列[] Path of a template that is allowed to be a parent of this template.
allowedPaths 文字列[] このテンプレートをベースとすることが許可されているページのパス。
jcr:created 日付 テンプレートの作成日。
jcr:description 文字列 テンプレートの説明。
jcr:title 文字列 テンプレートのタイトル。
ranking Long テンプレートのランク。 ユーザーインターフェイスにテンプレートを表示する際に使用します。
jcr:content cq:PageContent テンプレートのコンテンツを含むノード。
thumbnail.png nt:file テンプレートのサムネール。
icon.png nt:file テンプレートのアイコン。
テンプレートはページの基礎です。
To create a page, the template must be copied (node-tree /apps/<myapp>/template/<mytemplate> ) to the corresponding position in the site-tree: this is what happens if a page is created using the Websites tab.
このコピー処理により、ページには、初期コンテンツ(通常はトップレベルコンテンツのみ)と sling:resourceType プロパティ、ページのレンダリングに使用するページコンポーネントのパス(子ノード jcr:content に含まれるすべてのもの)が与えられます。

テンプレートの構造

以下の 2 つの側面について考慮する必要があります。
  • テンプレート自体の構造
  • テンプレート使用時に作成されるコンテンツの構造

テンプレートの構造

テンプレートは cq:Template タイプのノードの下に作成されます。
様々なプロパティを設定できます。具体例は以下のとおりです。
  • jcr:title - テンプレートのタイトル。ページ作成時にダイアログに表示されます。
  • jcr:description - テンプレートの説明。ページ作成時にダイアログに表示されます。
このノードには jcr:content(cq:PageContent)ノードが含まれており、結果ページのコンテンツノードの基礎として使用できます。これが、sling:resourceType を使用して、新しいページの実際のコンテンツをレンダリングする際に使用するコンポーネントを参照します。
このコンポーネントは、新しいページを作成する際に、コンテンツの構造およびデザインを定義するために使用します。

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

テンプレートは、タイプのページの作成に使 cq:Page 用されます(前述のように、ページは特別なタイプのコンポーネントです)。 各AEMページには構造化されたノードがありま jcr:content す。 このクライアントライブラリは:
  • タイプが cq:PageContent である。
  • 定義済みのコンテンツ定義を保持する構造化ノードタイプである。
  • has a property sling:resourceType to reference the component holding the sling scripts used for rendering the content

デフォルトテンプレート

AEM にはそのまま使用できるデフォルトのテンプレートが多数付属しています。テンプレートをそのまま使用したほうがよい場合もあります。その場合は、実際の Web サイトでテンプレートが使用可能であることを確認する必要があります。
例えば、AEM には、コンテンツページやホームページを含む、いくつかのテンプレートが付属しています。
タイトル
コンポーネント
場所
目的
ホームページ
homepage
geometrixx
Geometrixx ホームページテンプレート。
コンテンツページ
contentpage
geometrixx
Geometrixx コンテンツページテンプレート。

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

リポジトリ内のすべてのテンプレートのリストを確認するには、以下の手順を実行します。
  1. CRXDE Lite で、 ツール ​メニューを開いて、「 クエリ 」をクリックします。
  2. 「クエリ」タブで、
  3. タイプ 」で、「 XPath 」を選択します。
  4. クエリ 」入力フィールドに、次の文字列を入力します。 //element(*, cq:Template)
  5. 実行 」をクリックします。結果ボックスにリストが表示されます。
多くの場合、既存のテンプレートを使用して、各自の用途に合わせて新しいテンプレートを開発します。詳しくは、 ページテンプレートの開発 を参照してください。
To enable an existing template for your website and you want it to be displayed in the Create Page dialog when creating a page right under Websites from the Websites console, set the allowedPaths property of the template node to: /content(/.*)?

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

デザインモードを使用してUIでスタイルを定 義する場合 、そのスタイルが定義されているコンテンツノードの正確なパスでデザインが維持されます。
デザインモードでのみデザインを適用するこ とをお勧めします
例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインのアプリケーションは、意図した動作とは異なることがあります。
デザインモードを使用してのみデザインが適用される場合は、次のセクショ ン、「 Design Path Resolution 」、「 Decision Tree 」および「 Example」は適用されません。

デザインパスの解像度

静的テンプレートに基づいてコンテンツをレンダリングする場合、AEMは、コンテンツ階層のトラバースに基づいて、最も関連性の高いデザインとスタイルをコンテンツに適用しようとします。
AEMは、コンテンツノードに最も関連のあるスタイルを次の順序で決定します。
  • コンテンツノードの完全で正確なパスにデザインがある場合(デザインモードでデザインを定義する場合など)、そのデザインを使用します。
  • 親のコンテンツノードにデザインがある場合は、そのデザインを使用します。
  • コンテンツノードのパス上のノードにデザインがある場合は、そのデザインを使用します。
最後の2つのケースで、適用可能なデザインが複数ある場合は、コンテンツノードに最も近いデザインを使用します。

デシジョンツリー

これは、デザインパスの解像度ロジック をグラフィカルに表示します

次のような単純なコンテンツ構造を考えてみましょう。任意のノードにデザインを適用できます。
/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
完全一致がない場合は、ツリーの下の方を選択します。
これは常に適用可能ですが、ツリーの上の方には特定しすぎる可能性があります。

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

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

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

言うまでもなく、新しいテンプレートは完全にゼロから作成することもできますが、多くの場合は、既存のテンプレートをコピーして更新したほうが、時間と労力を節約できます。例えば、Geometrixx 内のテンプレートを使用して作業を開始できます。
既存のテンプレートに基づいた新しいテンプレートの作成手順
  1. 既存のテンプレート(作成したいテンプレートに定義が最も近いものが望ましい)を、新しいノードにコピーします。
    テンプレートは、通常、 /apps/<website-name>/templates/<template-name> に格納されています。
    使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。 使用可能なテンプレート を参照してください。
  2. 新しいテンプレートノードの jcr:title を、新しい役割を反映するように変更します。適宜、 jcr:description も更新できます。ページで使用可能なテンプレートは、適宜変更してください。
    If you want your template to be displayed in the Create Page dialog when creating a page right under Websites from the Websites console, set the allowedPaths property of the template node to: /content(/.*)?
  3. テンプレートの基礎となっているコンポーネント(テンプレート内の jcr:content ノードの sling:resourceType プロパティを参照)をコピーして、新しいインスタンスを作成します。
    コンポーネントは、通常、 /apps/<website-name>/components/<component-name> に格納されています。
  4. 新しいコンポーネントの jcr:title jcr:description を更新します。
  5. テンプレート選択リストに新しいサムネール画像を表示する場合は、thumbnail.png を置き換えます(サイズは 128 x 98 px)。
  6. テンプレートの jcr:content ノードの sling:resourceType を、新しいコンポーネントを参照するように更新します。
  7. テンプレートとその基になるコンポーネントのいずれかまたは両方に関して、機能やデザインをさらに変更します。
    /apps/<website>/templates/<template-name> ノードに対する変更は、テンプレートインスタンスに影響します(選択リストの場合と同様)。 /apps/<website>/components/<component-name> ノードに対する変更は、テンプレート使用時に作成されるコンテンツページに影響します。
    これで、新しいテンプレートを使用して Web サイト内にページを作成できます。
The editor client library assumes the presence of the cq.shared namespace in content pages, and if it is absent the JavaScript error Uncaught TypeError: Cannot read property 'shared' of undefined will result. すべてのサンプルコンテンツページには cq.shared が含まれているので、それらをベースとするコンテンツには自動的に cq.shared が含められます。ただし、サンプルコンテンツをベースとせず、ゼロから独自のコンテンツページを作成する場合は、 cq.shared 名前空間を含める必要があります。 詳しくは、 クライアント側ライブラリの使用 を参照してください。

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

この例では、特定のコンテンツパスにテンプレートを使用できるようにする方法を示しています。The templates that are available to the page author when creating new pages are determined by the logic defined in Template Availability .
  1. CRXDE Lite で、ページに使用するテンプレート(Newsletter テンプレートなど)に移動します。
  2. テンプレートの利 allowedPaths 用に使用するプロパティおよびその他のプ ロパティを変更 する For example, allowedPaths : /content/geometrixx-outdoors/[^/]+(/.*)? means that this template is allowed in any path under /content/geometrixx-outdoors .