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

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

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

  • テンプレートは、次の要素で構成されています Components;
  • コンポーネントでは、ウィジェットを使用し、ウィジェットへのアクセスを許可します。このウィジェットはコンテンツのレンダリングに使用されます。
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 サイト」タブを使用してページを作成する場合も、この処理がおこなわれています。

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

テンプレートの構造 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 タイプです
  • 定義済みのコンテンツ定義を保持する構造化ノードタイプ
  • コンテンツのレンダリングに使用する 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. が含まれる クエリ 入力フィールドに次の文字列を入力://element (*, cq:Template)

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

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

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

テンプレートデザインの適用方法 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
    使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。 参照: テンプレートの可用性.
  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. 新しいサムネール画像をテンプレート選択リスト(サイズ 128 x 98 ピクセル)に表示する場合は、thumbnail.png を置き換えます。

  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-89

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