ページとテンプレート pages-and-template

GitHubの tutorial/pages-templates-start ブランチをチェックアウトします。

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Maven スキルを使用して、ローカル AEM インスタンスにコードベースをデプロイします。

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

ページテンプレートタイプ ​を使用して、記事ページ ​という名前のテンプレートを作成します。

構造 ​モードに切り替えます。

テンプレートの上部に、ヘッダー ​として機能する​ エクスペリエンスフラグメント ​コンポーネントを追加します。

• コンポーネントが /content/experience-fragments/wknd/us/en/site/header/master を指すように設定します。
• ポリシーを​ ページヘッダー ​に設定して、デフォルトの要素 ​が header に設定されているようにしてください。次の章では、header 要素のターゲット設定を CSS で指定します。

テンプレートの最下部で、フッター ​として機能する​ エクスペリエンスフラグメント ​を追加します。

• コンポーネントが /content/experience-fragments/wknd/us/en/site/footer/master を指すように設定します。
• ポリシーを​ ページフッター ​に設定して、デフォルトの要素 ​が footer に設定されているようにしてください。次の章では、footer 要素のターゲット設定を CSS で指定します。

テンプレートが最初に作成されたときに含まれていた​ メイン ​コンテナをロックします。

• ポリシーを​ メインページ ​に設定して、デフォルトの要素 が main に設定されているようにしてください。次の章では、main 要素のターゲット設定を CSS で指定します。

画像 ​コンポーネントを​ メイン ​コンテナに追加します。

• 画像 ​コンポーネントをロック解除します。

メインコンテナの​ 画像 ​コンポーネントの下に​ パンくず ​コンポーネントを追加します。

• パンくず ​コンポーネントに​ 記事ページ - パンくず ​という名前のポリシーを作成します。ナビゲーション開始レベル ​を 4 に設定します。

コンテナ ​コンポーネントを​ パンくず ​コンポーネントの下かつ​ メイン ​コンテナの内側に追加します。これは、テンプレートの​ コンテンツコンテナ ​として機能します。

• コンテンツ ​コンテナをロック解除します。
• ポリシーを​ ページコンテンツ ​に設定します。

別の​ コンテナ ​コンポーネントを​ コンテンツコンテナ ​の下に追加します。これはテンプレートの​ サイドパネル ​コンテナとして機能します。

• サイドパネル ​コンテナをロック解除
• 記事ページ - サイドレール ​という名前のポリシーを作成します。
• WKND Sites プロジェクト - コンテンツ ​の下の​ 許可されたコンポーネント ​を設定して、ボタン、ダウンロード、画像、リスト、セパレーター、ソーシャルメディア共有、テキスト、タイトル ​を含めます。

ページルートコンテナのポリシーを更新します。これは、テンプレートの最も外側にあるコンテナです。ポリシーを​ ページルート ​に設定します。

• コンテナ設定 ​で、レイアウト ​を​ レスポンシブグリッド ​に設定します。

コンテンツコンテナ ​をレイアウトモードにします。ハンドルを右から左にドラッグし、コンテナを 8 列幅に縮小します。

サイドレールコンテナ ​のレイアウトモードを有効にします。ハンドルを右から左にドラッグし、コンテナを 4 列幅に縮小します。次に、左側のハンドルを左から右へ 1 列ドラッグしてコンテナを 3 列幅にし、コンテンツコンテナ ​の間に 1 列の間隔を残します。

モバイルエミュレーターを開き、モバイルブレークポイントに切り替えます。レイアウトモードを再度有効にし、コンテンツコンテナ ​と​ サイドパネルコンテナ ​をページの全幅にします。これにより、モバイルのブレークポイントにコンテナが垂直に積み重なります。

コンテンツコンテナ ​で​ テキスト ​コンポーネントのポリシーを更新します。

• ポリシーを​ コンテンツテキスト ​に設定します。
• プラグイン／段落スタイル ​で、段落スタイルを有効にする ​にチェックを入れ、Quote Block が有効になっていることを確認します。

初期コンテンツ ​モードに切り替えます。

タイトル ​コンポーネントを​ コンテンツコンテナ ​に追加します。これは記事のタイトルとして機能します。空のままにすると、現在のページのタイトルが自動的に表示されます。

最初のタイトルコンポーネントの下に、2 番目の​ タイトル ​コンポーネントを追加します。

• 「By Author」というテキストを使用してコンポーネントを設定します。これはテキストのプレースホルダーです。
• タイプを H4 に設定します。

By Author タイトルコンポーネントの下に、テキスト ​コンポーネントを追加します。

サイドパネルコンテナ ​に​ タイトル ​コンポーネントを追加します。

• 「このストーリーを共有」というテキストを使用してコンポーネントを設定します。
• タイプを H5 に設定します。

このストーリーを共有 ​タイトルコンポーネントの下に、ソーシャルメディア共有 ​コンポーネントを追加します。

ソーシャルメディア共有 ​コンポーネントの下に​ セパレーター ​コンポーネントを追加します。

セパレーター ​コンポーネントの下に​ ダウンロード ​コンポーネントを追加します。

ダウンロード ​コンポーネントの下に​ リスト ​コンポーネントを追加します。

テンプレートの​ 初期ページプロパティ ​を更新します。

• ソーシャルメディア／ソーシャルメディア共有 ​で、Facebook と Pinterest にチェックを入れます。

http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd に移動して、テンプレートコンソールでテンプレートを表示します。

記事ページテンプレートを​ 有効 ​にします。

記事ページテンプレートのプロパティを編集し、次のサムネールをアップロードして、記事ページテンプレートを使用して作成したページを素早く特定します。

サンプルコンテンツパッケージ WKND-PagesTemplates-Content-Assets.zip をダウンロードします。

http://localhost:4502/crx/packmgr/index.jsp でパッケージマネージャーを使用して、コンテンツパッケージをアップロードしてインストールします。

Web バリエーションテンプレートを更新します。これは、http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html でエクスペリエンスフラグメントに使用されるテンプレートです。

• テンプレートの​ コンテナ ​コンポーネントのポリシーを更新します。
• ポリシーを XF ルート ​に設定します。
• 許可されたコンポーネント ​で、コンポーネントグループ WKND Sites プロジェクト - 構造 ​を選択し、言語ナビゲーション、ナビゲーション、クイック検索 ​コンポーネントを含めます。

http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html でヘッダーをレンダリングするエクスペリエンスフラグメントを開きます。

フラグメントのルート​ コンテナ ​を設定します。これが一番外側の コンテナ ​です。

• レイアウト ​を​ レスポンシブグリッド ​に設定します。

コンテナ ​の上部に WKND ダークロゴ ​を画像として追加します。ロゴは前の手順でインストールしたパッケージに含まれています。

• WKND ダークロゴ ​のレイアウトを 2 列の幅に変更します。ハンドルを右から左にドラッグします。
• ロゴの​ 代替テキスト ​を「WKND ロゴ」に設定します。
• ロゴが /content/wknd/us/en ホームページに​ リンク ​するように設定します。

既にページに配置されている​ ナビゲーション ​コンポーネントを設定します。

• ルートレベルを除外 ​を 1 に設定します。
• ナビゲーション構造の深さ ​を 1 に設定します。
• ナビゲーション ​コンポーネントのレイアウトを変更して、8 列幅にします。ハンドルを右から左にドラッグします。

言語ナビゲーション ​コンポーネントを削除します。

検索 ​コンポーネントのレイアウトを変更して 2 列幅にします。ハンドルを右から左にドラッグします。すべてのコンポーネントが、1 行に対して水平方向に整列しているはずです。

フッターをレンダリングするエクスペリエンスフラグメントを http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html で開きます。

フラグメントのルート​ コンテナ ​を設定します。これが一番外側の コンテナ ​です。

• レイアウト ​を​ レスポンシブグリッド ​に設定します

WKND ライトロゴ ​を​ コンテナ ​の上部に画像として追加します。ロゴは前の手順でインストールしたパッケージに含まれています。

• WKND ライトロゴ ​のレイアウトを変更して 2 列幅にします。ハンドルを右から左にドラッグします。
• ロゴの​ 代替テキスト ​を「WKND ロゴライト」に設定します。
• ロゴを /content/wknd/us/en ホームページに​ リンク ​するように設定します。

ロゴの下に​ ナビゲーション ​コンポーネントを追加します。ナビゲーション ​コンポーネントを設定します。

• ルートレベルを除外 ​を 1 に設定します。
• 「すべての子ページを収集」のチェックをオフにします。
• ナビゲーション構造の深さ ​を 1 に設定します。
• ナビゲーション ​コンポーネントのレイアウトを変更して、8 列幅にします。ハンドルを右から左にドラッグします。

Sites コンソール（http://localhost:4502/sites.html/content/wknd/us/en/magazine）に移動します。

WKND／US／EN／Magazine の下にページを作成します。

• 記事ページ ​テンプレートを選択します。
• プロパティ ​で、タイトル ​を「Ultimate Guide to LA Skateparks」に設定します。
• 名前 ​を「guide-la-skateparks」に設定します。

By Author タイトルを「By Stacey Roswells」というテキストで置き換えます。

テキスト ​コンポーネントを更新して、記事に入力する段落を含めます。コピーとして、テキストファイル la-skate-parks-copy.txt を使用できます。

別の​ テキスト ​コンポーネントを追加します。

• コンポーネントを更新して、「There is no better place to shred than Los Angeles.」という引用を含めます。
• フルスクリーンモードでリッチテキストエディターを編集し、上記の引用を変更して​ 引用ブロック ​要素を使用します。

続けて記事の本文を入力し、モックアップに一致させます。

ダウンロード ​コンポーネントを設定して、記事の PDF 版を使用できるようにします。

• ダウンロード／プロパティ ​で、チェックボックスをクリックして DAM アセットからタイトルを取得します。
• 説明 ​を「全文を読む」に設定します。
• アクションテキスト ​を「Download PDF」に設定します。

リスト ​コンポーネントを設定します。

• リスト設定／次を使用してリストを作成 ​で、子ページ ​を選択します。
• 親ページ ​を /content/wknd/us/en/magazine に設定します。
• 項目設定 ​で、「項目をリンク」および「日付を表示」にチェックを入れます。

CRXDE-Lite を開き、ツリーナビゲーションを使用して /content/wknd/us/en/magazine/guide-la-skateparks に移動します。

la-skateparks ページの下にある jcr:content ノードをクリックして、プロパティを表示します。

cq:template の値に注目してください。これは、以前に作成した記事ページテンプレートの /conf/wknd/settings/wcm/templates/article-page を指しています。

また、sling:resourceType の値にも注目してください。これは、wknd/components/page を指しています。これは、AEM プロジェクトアーキタイプによって作成されたページコンポーネントであり、テンプレートに基づいてページをレンダリングします。

/content/wknd/us/en/magazine/guide-la-skateparks/jcr:content の下にある jcr:content ノードを展開し、ノード階層を表示します。

作成したコンポーネントに各ノードを大まかにマップできます。プレフィックスに container が付いたノードを検査して、使用されている様々なレイアウトコンテナを識別できるかどうかを確認します。

次に、/apps/wknd/components/page でページコンポーネントを検査します。CRXDE Lite でコンポーネントのプロパティを表示します。

ページコンポーネントの下には、customfooterlibs.html と customheaderlibs.html の 2 つの HTL スクリプトしかありません。それでは、このコンポーネントはページをどのようにレンダリングするのでしょうか。

sling:resourceSuperType プロパティは、core/wcm/components/page/v2/page を指しています。このプロパティにより、WKND のページコンポーネントはコアコンポーネントページコンポーネントの​ すべて ​の機能を継承できます。これは、プロキシコンポーネントパターンと呼ばれるものの最初の例です。詳しくは、こちらを参照してください。

WKND コンポーネント内の別のコンポーネントである /apps/wknd/components/breadcrumb の Breadcrumb コンポーネントを検査します。同じ sling:resourceSuperType プロパティが見つかりますが、今回は core/wcm/components/breadcrumb/v2/breadcrumb を指していることに注目してください。これは、プロキシコンポーネントパターンを使用してコアコンポーネントを含める別の例です。実際、WKND コードベースのすべてのコンポーネントは、AEM コアコンポーネントのプロキシです（カスタムデモの HelloWorld コンポーネントを除く）。カスタムコードを記述する​ 前 ​に、コアコンポーネントの機能をできるだけ再利用することをお勧めします。

次に、CRXDE Lite を使用して、/libs/core/wcm/components/page/v2/page にあるコアコンポーネントページを検査します。

このページの下には、多くのスクリプトファイルが含まれています。コアコンポーネントページには、多数の機能が含まれています。この機能は、メンテナンスや読みやすさを容易にするために、複数のスクリプトに分割されています。page.html を開いて data-sly-include を探すことで、HTL スクリプトが含まれているかどうかを追跡できます。

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

HTL を複数のスクリプトに分割するもう 1 つの理由は、プロキシコンポーネントが個々のスクリプトを上書きしてカスタムビジネスロジックを実装できるようにするためです。HTL スクリプトの customfooterlibs.html および customheaderlibs.html は、プロジェクトを実装することによって明示的に上書きされるように作成されています。

この記事を読むと、コンテンツページのレンダリングに編集可能なテンプレートが影響する方法について詳しく理解できます。

/libs/core/wcm/components/breadcrumb/v2/breadcrumb にあるパンくずリストなど、別のコアコンポーネントを検査します。パンくずコンポーネントのマークアップが最終的にどのように生成されるかを理解するには、breadcrumb.html スクリプトを表示します。

VSCode で aem-guides-wknd プロジェクトを開きます。

プロジェクトエクスプローラーで、ui.content モジュールを展開します。src フォルダーを展開して、/conf/wknd/settings/wcm/templates に移動します。

templates フォルダーを右クリックし、AEM サーバーから読み込む ​を選択します。

article-page を読み込んで、page-content テンプレートおよび xf-web-variation テンプレートも更新する必要があります。

コンテンツを読み込む手順を繰り返しますが、/conf/wknd/settings/wcm/policies から​ ポリシー ​フォルダーを選択します。

ui.content/src/main/content/META-INF/vault/filter.xml から filter.xml ファイルを検査します。

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

filter.xml ファイルは、パッケージと共にインストールされるノードのパスを識別する役割を果たします。各フィルターの mode="merge" に注目してください。これは、既存のコンテンツは変更されず、新しいコンテンツのみが追加されることを示しています。コンテンツ作成者がこれらのパスを更新する可能性があるので、コードのデプロイメントでは、コンテンツを上書き​ しません。フィルター要素の操作の詳細については、FileVault ドキュメントを参照してください。

ui.content/src/main/content/META-INF/vault/filter.xml と ui.apps/src/main/content/META-INF/vault/filter.xml を比較して、各モジュールによって管理される様々なノードを理解します。