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

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

テンプレートは、ページの作成に使用され、選択した範囲内で使用できるコンポーネントを定義します。 テンプレートは、作成するページと同じ構造を持ち、実際のコンテンツを持たないノードの階層です。

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

  • テンプレートは コンポーネント;
  • コンポーネントはウィジェットを使用し、ウィジェットにアクセスできます。ウィジェットはコンテンツのレンダリングに使用されます。
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. 形式 タイプ ​を選択します。 XPath.

  4. クエリ」入力フィールドに次の文字列を入力します。

    //element(*, cq:Template)

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

多くの場合、既存のテンプレートを使用して、各自の用途に合わせて新しいテンプレートを開発します。詳しくは、ページテンプレートの開発を参照してください。

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

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

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

CAUTION
Adobeでは、デザインモード を介してのみデザインを適用することをお勧めします。
例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインの適用は、意図したビヘイビアーとは異なることがあります。

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

NOTE
この節では、AEM 6.4.2.0 以降のデザインパス解決の動作について説明します。

デザインパスの解像度 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-251

  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

この例では、特定のコンテンツパスに対してテンプレートを使用する方法を示します。 ページ作成者が新しいページの作成時に使用できるテンプレートは、使用可能なテンプレートで定義されたロジックによって決まります。

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

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

    chlimage_1-252

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e