ページテンプレート - 静的 page-templates-static

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

各テンプレートには、使用可能なコンポーネントが表示されます。

  • テンプレートは、 コンポーネント;
  • コンポーネントはウィジェットを使用し、ウィジェットにアクセスできます。ウィジェットはコンテンツのレンダリングに使用されます。
NOTE
編集可能なテンプレート も使用できますが、これは最も柔軟性が高く、最新の機能を実現するために推奨されるタイプのテンプレートです。

テンプレートのプロパティと子ノード properties-and-child-nodes-of-a-template

テンプレートは、タイプが 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 サイト」タブを使用してページを作成する場合も、この処理がおこなわれています。

また、このコピーアクションは、ページの初期コンテンツ(通常はトップレベルコンテンツのみ)と、ページのレンダリングに使用されるページコンポーネントのパス(子ノード jcr:content 内のすべて)を示す sling:resourceType プロパティも提供します。

テンプレートの構造 how-templates-are-structured

考慮すべき 2 つの側面があります。

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

テンプレートの構造 the-structure-of-a-template

テンプレートは、タイプのノードの下に作成されます。 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

テンプレートによって作成されるコンテンツ the-content-produced-by-a-template

テンプレートは、cq:Page タイプのページを作成するのに使用します(前述のように、ページは特別なタイプのコンポーネントです)。各 AEM ページには構造化ノード jcr:content があります。この特徴は次のとおりです。

  • タイプが cq:PageContent の場合
  • は、定義された content-definition を保持する構造化ノードタイプです
  • コンテンツのレンダリングに使用する Sling スクリプトを保持するコンポーネントを参照するための sling:resourceType プロパティを持つ。

デフォルトのテンプレート default-templates

AEMには、すぐに使用できる様々なデフォルトテンプレートが付属しています。 場合によっては、テンプレートをそのまま使用することもできます。 その場合は、テンプレートが Web サイトで使用できることを確認する必要があります。

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

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

デフォルトのテンプレートの表示 displaying-default-templates

リポジトリ内のすべてのテンプレートのリストを表示するには、次の手順を実行します。

  1. CRXDE Liteで、 ツール メニューとクリック クエリ.

  2. 「クエリ」タブで、

  3. As タイプ ​を選択します。 XPath.

  4. Adobe Analytics の クエリ 入力フィールドに次の文字列を入力します。 //element(*, cq:Template)

  5. クリック 実行. 結果ボックスにリストが表示されます。

通常は、既存のテンプレートを使用し、独自のテンプレート用に新しいテンプレートを開発します。 詳しくは、 ページテンプレートの開発 を参照してください。

既存のテンプレートを各自の web サイト用に有効にし、web サイト ​コンソールから「Web サイト」のすぐ下にページを作成するときに​ ページを作成 ​ダイアログにそのテンプレートを表示する場合は、テンプレートノードの allowedPaths プロパティを次のように設定します。/content(https://experienceleague.adobe.com/.&?lang=ja#42;)?

テンプレートデザインの適用方法 how-template-designs-are-applied

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

CAUTION
Adobeでは、デザインモード を介してのみデザインを適用することをお勧めします。
例えば、CRXDE Liteでのデザインの変更はベストプラクティスではなく、そのようなデザインの適用は期待される動作とは異なる場合があります。

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

デザインパスの解像度 design-path-resolution

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

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

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

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

デシジョンツリー decision-tree

これはデザインパスの解像度を図で表現したものです。

design_path_resolution

example

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

/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 つ下のものを選択します。

これは常に適用できるが、ツリーの上の方は具体的すぎる可能性があると仮定します。

ページテンプレートの開発 developing-page-templates

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

テンプレートの作成(既存のテンプレートに基づく) creating-a-new-template-based-on-an-existing-template

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

既存のテンプレートに基づいてテンプレートを作成するには:

  1. 既存のテンプレート(できれば、目的の定義にできるだけ近い定義を持つ)を新しいノードにコピーします。

    テンプレートは、に保存されます。 /apps/<website-name>/templates/<template-name>.

    note note
    NOTE
    使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。 詳しくは、 Template Availability.
  2. 次を変更: jcr:title 新しい役割を反映する新しいテンプレートノードを作成します。 また、 jcr:description 必要に応じて。 ページの使用可能なテンプレートを必要に応じて変更してください。

    note note
    NOTE
    Web サイト コンソールから Web サイト のすぐ下にページを作成するときに ページを作成 ダイアログにテンプレートを表示する場合は、 allowedPathsテンプレートノードのプロパティを、/content(/.*)?に設定します。

    chlimage_1-88

  3. テンプレートの基になるコンポーネントをコピーします ( これは、 sling:resourceType のプロパティ jcr:content ノードを使用して ) インスタンスを作成します。

    コンポーネントは、に格納されます。 /apps/<website-name>/components/<component-name>.

  4. を更新します。 jcr:title および jcr:description 新しいコンポーネントの

  5. 新しいサムネール画像をテンプレート選択リストに表示する場合は、thumbnail.png を置き換えます(サイズ 128 x 98 px)。

  6. を更新します。 sling:resourceType テンプレートの jcr:content 新しいコンポーネントを参照するノード。

  7. テンプレートの機能やデザイン、基になるコンポーネント、またはその両方に追加の変更を加えます。

    note note
    NOTE
    に対する変更 /apps/<website>/templates/<template-name> ノードは、(選択リストのように)テンプレートインスタンスに影響を与えます。
    に対する変更 /apps/<website>/components/<component-name> ノードは、テンプレートを使用する際に作成されるコンテンツページに影響を与えます。

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

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

既存のテンプレートを使用可能にする making-an-existing-template-available

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

  1. CRXDE Lite で、ページに使用するテンプレート(ニュースレターテンプレートなど)に移動します。

  2. 次を変更: allowedPaths プロパティおよび使用するその他のプロパティ テンプレートの可用性. 例えば allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? は、このテンプレートが /content/geometrixx-outdoors 以下の任意のパスで許可されることを意味します。

    chlimage_1-89

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2