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

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

テンプレートごとに、使用可能なコンポーネントが提示されます。

  • テンプレートはコンポーネントで構成されています。
  • コンポーネントによって使用され、アクセスが許可されるウィジェットを使用して、コンテンツがレンダリングされます。
メモ

編集可能なテンプレート (Editable Templates)も利用でき、最も柔軟性の高い最新の機能を実現するために推奨されるテンプレートタイプです。

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

テンプレートは、タイプが cq:Template のノードであり、以下のプロパティおよび子ノードが含まれます。

名前

説明
.
cq:Template 現在のテンプレート。 テンプレートのノードタイプは cq:Template です。
allowedChildren String[] このテンプレートの子となることが許可されているテンプレートのパス。
allowedParents String[] Path of a template that is allowed to be a parent of this template.
allowedPaths String[] このテンプレートをベースとすることが許可されているページのパス。
jcr:created 日付 テンプレートの作成日。
jcr:description String テンプレートの説明。
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 タイプのノードの下に作成されます。

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

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

テンプレートは、タイプのページの作成に使用され 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(/.*?lang=ja)?

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

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

注意

Adobeでは、 デザインモードでのみデザインを適用することをお勧めします

例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインのアプリケーションは、意図した動作とは異なることがあります。

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

デザインパスの解像度

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

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

  • コンテンツノードの完全で正確なパスのデザインがある場合(デザインモードでデザインを定義した場合など)、そのデザインを使用します。
  • 親のコンテンツノードのデザインがある場合は、そのデザインを使用します。
  • コンテンツノードのパス上のノードにデザインがある場合は、そのデザインを使用します。

最後の2つの場合、該当するデザインが複数ある場合は、コンテンツノードに最も近いデザインを使用します。

デシジョンツリー

これは、 デザインパスの解像度 (Design Path Resolution)ロジックをグラフィカルに表したものです。

design_path_resolution

任意のノードにデザインを適用できる単純なコンテンツ構造を次に示します。

/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(/.*?lang=ja)?

    chlimage_1-88

  3. テンプレートの基礎となっているコンポーネント(テンプレート内の jcr:content ノードの sling:resourceType プロパティを参照)をコピーして、新しいインスタンスを作成します。

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

  4. 新しいコンポーネントの jcr:titlejcr: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/[^/]+(/.*?lang=ja)? means that this template is allowed in any path under /content/geometrixx-outdoors.

    chlimage_1-89

このページ