ページ リスト、改ページ、ページ コンテンツ、タイトル などのレンダリングを追加する

概要

ページ コンテンツ レンダリングの使用

SXA ツールボックスの [ページ コンテンツ] セクションは、コンテンツをページに追加するのに役立つさまざまなレンダリングを含んでいます。これには、リスト、改ページ、タイトルを表示するレンダリングなどがあります。

ページ リスト レンダリングは、定義済みの Sitecore クエリによってサイト上のページの階層ツリー リストを表示します。たとえば、ページ リスト レンダリングを使用して、サイトのサイトマップを表示したり、製品タイプの概要を一覧で表示したり、ブログ投稿内のページ リストを表示したりできます。

リストに表示するページを設定し、ゴールごとに異なるスタイル オプションを選択できます。たとえば、サイトマップにある全ページの単純なネストされたリストが必要な場合があります。

2360F548A3014A0CB44B95D2FDAC2608.png

タイトル、説明、サムネイル、詳細を表示するより詳細なリストを作成することもできます。

83AE2DAC095A4A0583BE79118DD1144D.png

ページ リスト レンダリングの追加と設定を行うには、次の手順に従います。

  1. ツールボックスから、ページ リスト レンダリングをページにドラッグします。

  2. フローティング ツールバーで、[コンポーネント プロパティを編集] をクリックします。

  3. [一般] セクションで、次のフィールドを編集して、リストに表示するアイテムとその外観を決定します。

    • [ソース タイプ]Sitecore クエリ (同じテンプレートを使用している []、[兄弟]、または [アイテム]) をクリックします。

      既定では、ページ リスト レンダリングはそれ自体の子を表示します。

      FD3B6EA3D1BA4F599A15CB30C316AD7F.png
    • [ページサイズ] – 表示するページ数を入力します。たとえば、アイテムの膨大なリストから最初の 15 件のアイテムのみを表示する場合は、「15」と入力します。

  4. いくつかの表示オプションを使用できるようにするには、[コントロールのプロパティ] ダイアログ ボックスの [スタイル] セクションで (またはフローティング ツールバーから)、ページ リスト レンダリングのバリアントの 1 つを選択します。

    たとえば、入れ子のリストを表示する単純なバリアント、ページ タイトルと説明をリストするバリアント、またはサムネイルも表示するより詳細なバリアントを選択します。

    00A3BBDC683C4B36A12ACFC63B631951.png

[ページ リスト] ツールバーから直接バリアントを選択することもできます。[コンポーネントのバリアントを選択] ドロップ ダウンをクリックして、バリアントのプレビューを表示します。

4FC2B0B647224B8482E842704FD214B6.png

既定では、ページ リスト コンポーネントは現在のページに表示されます。たとえば、異なるページのタグなどのコンテキストを切り替える場合は、プレースホルダーを含むページ リスト バリアントを作成する必要があります。このプレースホルダーでは、ユーザーがプレースホルダー内でレンダリング コンテキストの切り替えができるようにすることができます。

改ページ レンダリングを使用すると、ページ リスト、イベント リスト、およびファイル リスト レンダリングに改ページを追加できます。ページ数を反映し、ページに直接ナビゲートするか、追加のボタン ([先頭]、[]、[]、[最後]) を使ってページに直接ナビゲートすることができます。

ページ リストに改ページを追加するには、[リストのシグネチャ] フィールドを使って既存のリスト レンダリングを改ページでマッピングする必要があります。既定では、改ページ レンダリングはページ番号なしの既定のリストを表示します。

注記

複数の改ページ レンダリングをリストに添付できます。

改ページを追加するには、次の手順に従います。

  1. ページに改ページ レンダリングをドラッグ アンド ドロップします。

  2. フローティング ツールバーで、[コンポーネント プロパティを編集] をクリックします。

  3. 次のフィールドを編集して、改ページの表示方法を指定します。

    • [ページ サイズ] – 表示するリスト アイテムの数を定義する数値を入力します。

    • [折りたたみ済み改ページのしきい値] – 改ページを折りたたむページ数を入力します。ページのリストが長い場合は、ページ ツリーを折りたたむことをお勧めします。たとえば、[リストのシグネチャ] フィールドを [折りたたみ済み改ページ] に設定し、[折りたたみ済み改ページのしきい値] フィールドに「3」を入力します。

      CAEB56484725415FBD8CF6F3292B72EA.png

    注記

    すべてのページを表示するには、「-1」を入力します。ページ番号を表示しないで [次/前] ボタンのみを表示するには、「0」を入力するか、このフィールドを空のままにします。

    • [リストのシグネチャ] – 固有のシグネチャを入力して、改ページを [折りたたみ済み改ページ] など、特定のリスト レンダリングにマップします。

      076296397FE140929D8858A750C29BCD.png
    • [オフセット] – スキップするアイテムの数を入力します。

タイトル レンダリングは、現在のページのタイトルまたはサブタイトルを表示します。ツールボックスからページにタイトルをドラッグすることで、ページの任意の場所にタイトル レンダリングを追加できます。既定では、[タイトル] フィールドはそのページの名前になりますが、別のレンダリングのバリアントを追加したり、別のデータ ソースを選択したりできます。

タイトル レンダリングを追加および設定するには、次の手順に従います。

  1. ツールボックスから、タイトル レンダリングをページにドラッグします。

  2. 別のデータ ソースを選択するか、バリアントを使用するには、フローティング ツールバーにナビゲートし、[コンポーネント プロパティを編集] をクリックします。

    たとえば、フォールバック機能付きのレンダリング バリアントを選択するには、[バリアント] フィールドで、[フォールバック付きのページ タイトル] をクリックします。これは、すべてのページにタイトルが含まれていない場合に便利です。タイトルが定義されていない場合は、ナビゲーション タイトルが表示されます。このフィールドも空の場合は表示名が表示され、それが失敗した場合はカスタム テキスト メッセージが表示されます。

    3361A34DE2144185ADAF0C1F7757B54C.png
    762DE0CC50BC4A81BA7DACFFB27ABEEC.png

ページのコンテンツは、[タイトル]、[ヘッダー]、[フッター]、[画像] などのフィールドとして Sitecore に格納されます。ページ コンテンツ レンダリングを使用すると、コンテンツをドラッグ アンド ドロップして、最適と思われる場所に移動できます。また、レンダリング バリアントにより、ドロップダウン リストから表示する適切なフィールドを簡単に選択できます。

注記

既定では、ページ コンテンツのレンダリングにはデータ ソースが指定されていません。ページ テンプレートに応じて、レンダリングにはドロップ先のページのフィールドが表示されます。

ページ コンテンツのレンダリングはコンテキスト アイテムに存在するフィールドを表示し、現在のページにはデータが含まれているため、マッピングは必要ありません。データ ソースを別のページにポイントすると、代わりにそのページのフィールドが使用されます。

ページ コンテンツ レンダリングの追加と設定を行うには、次の手順に従います。

  1. ツールボックスから、ページ コンテンツ レンダリングをページにドラッグします。

  2. フローティング ツールバーで、[コンポーネント プロパティを編集] をクリックします。既定では、ページ コンテンツ レンダリングは最初に利用可能なレンダリング バリアントを使用します。

  3. データ ソースとバリアントを選択して、必要なコンテンツを決定します。ツールバーからバリアントを直接選択することもできます。

    3A236EE46C0C45A4B55359464F5E3A32.png

注記

パーシャル デザインでページ コンテンツ レンダリングを使用する場合、どのページからでもフィールドをレンダリングできます。