ページテンプレート

この章では、ページテンプレートとページの関係を調べます。 以下のモックアップに基づいて、スタイル設定されていない Magazine 記事テンプレートを作成します。 AdobeXD. テンプレートの構築プロセスでは、コアコンポーネントと高度なポリシー設定について説明します。

前提条件

これは複数のパートから成るチュートリアルで、 コンテンツのオーサリングと変更の公開 チャプターが完了しました。

目的

  1. ページテンプレートの詳細と、ページコンテンツを詳細に制御するためにポリシーを使用する方法について説明します。
  2. テンプレートとページがリンクされている方法を説明します。
  3. 新しいテンプレートを作成し、ページを作成します。

作成する内容

このチュートリアルのこの部分では、新しい雑誌記事の作成に使用でき、共通の構造に合わせて調整できる新しい雑誌記事ページテンプレートを作成します。 このテンプレートは、AdobeXD で作成されたデザインと UI キットに基づいて作成されます。 この章では、テンプレートの構造またはスケルトンの構築にのみ焦点を当てます。 スタイルは実装されませんが、テンプレートとページは機能します。

マガジン記事ページテンプレートの作成

ページを作成するとき、テンプレートを選択する必要があります。これは新しいページを作成するための基本として使用されます。テンプレートは、作成されるページの構造、初期コンテンツ、許可されるコンポーネントを定義します。

主に次の 3 つの領域があります。 ページテンプレート:

  1. 構造 — テンプレートの一部であるコンポーネントを定義します。 コンテンツ作成者はこれらを編集できません。
  2. 初期コンテンツ — テンプレートの開始点となるコンポーネントを定義します。コンテンツ作成者は、これらのコンポーネントを編集または削除できます
  3. ポリシー — コンポーネントの動作方法と作成者が使用できるオプションに関する設定を定義します。

次に、モックアップの構造に合った新しいテンプレートをAEMで作成します。 これは、AEMのローカルインスタンスで発生します。 次のビデオの手順に従います。

次のサムネールを使用して、テンプレートを特定できます(または独自のをアップロードできます)。

記事ページテンプレートのサムネール

ソリューションパッケージ

完了 マガジンテンプレートの解決方法 は、パッケージマネージャーからダウンロードしてインストールできます。

エクスペリエンスフラグメントを使用したヘッダーとフッターの更新

ヘッダーやフッターなどのグローバルコンテンツを作成する場合の一般的な方法は、 エクスペリエンスフラグメント. エクスペリエンスフラグメントを使用すると、複数のコンポーネントを組み合わせて、1 つの参照可能なコンポーネントを作成できます。 エクスペリエンスフラグメントには、複数サイトの管理と 局在.

Site テンプレートにより、ヘッダーとフッターが生成されました。 次に、モックアップと一致するようにエクスペリエンスフラグメントを更新します。 次のビデオの手順に従います。

以下のビデオの概要手順:

  1. サンプルコンテンツパッケージをダウンロードします。 WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. パッケージマネージャーを使用して、コンテンツパッケージをアップロードしインストールします。
  3. WKND ロゴを使用するようにヘッダーおよびフッターエクスペリエンスフラグメントを更新する

雑誌記事ページの作成

次に、「雑誌記事ページ」テンプレートを使用して新しいページを作成します。 サイトのモックアップと一致するようにページのコンテンツを作成します。 次のビデオの手順に従います。

以下を使用: 提供されたテキスト を使用して、記事の本文を入力します。

おめでとうございます。

これで、Adobe Experience Manager Sitesで新しいテンプレートとページが作成されました。

次の手順

この時点で、雑誌記事ページとサイトが WKND のブランドスタイルと一致しません。 フォロー: テーマ設定 グローバルスタイルをサイトに適用する際に使用する CSS および JavaScript フロントエンドコードの更新のベストプラクティスについて説明するチュートリアルです。

ソリューションパッケージ

この章のソリューションパッケージをダウンロードできます。 WKND-Magazine-Template-SOLUTION-1.0.zip.

このページ