ウォークスルー

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

レンダリングバリアント参照項目は、参照された項目のフィールドを表示できます。このウォークスルーでは、ブログ記事に著者情報を追加する方法を説明しています。ウォークスルーで説明されているシナリオと同じです

この例では、ブログ記事の著者フィールドに行き、リンクされたアイテムを順に行ってそれらの項目からフィールドをレンダリングするレンダリングバリアント参照アイテムの作成方法を説明しています。

シナリオと最終結果

シナリオは以下の通りです:

  • ブログ記事を掲載するサイト。

  • 著者の名前、姓、経歴、写真、関連メディアアイテムを含むサイトデータフォルダー:

    SXA-blog-author-list.png
  • クエリを用いてこのデータソースを参照するページテンプレート:

    SXA-blog-author-query.png
  • ブログページには、リストから選ばれた関連商品が掲載されています:

    SXA-blog-author-selected.png

最終的な仕上がりは次のようになります。

SXA-blog-end-result.png

このウォークスルーでは、以下の方法を説明します:

レンダリングバリアントの参照項目を作成する

レンダリングバリアント参照項目は参照された項目のフィールドを表示します。参照項目のフィールドを表示したい場合は、パススルーフィールド フィールドでそのフィールドを定義できます。

レンダリングバリアント参照項目を作成するには:

  1. Presentation/Rendering Variantsに移動し、ページコンテンツを右クリックして「挿入」→「バリアント定義」をクリックします。

  2. Post Authorを入力して**「OK」**をクリックします。

  3. 次に、ブログ記事の著者フィールドに行き、そのフィールドの内容をレンダリングするレンダリングバリアント参照項目を作成します。

    Post Authorバリアントを右クリックし、「 Insert」をクリックし、「Reference」をクリックし、「Enter」をAuthors、「OK」をクリックします。 Pass through fieldフィールドは、入れ子されたアイテムからフィールド名を定義します。レンダリングバリアントは今後、Authorsフィールドを通過します。

    SXA-blog-pass-through-field.png

フィールドをレンダリングする

これで著者のフィールドをレンダリングし始められます。

フィールドをレンダリングするには:

  1. まず、セクションを追加してラッパーを作成します。 「投稿者」を右クリックし、「 セクション」をクリックし、「 HeadingWrapper 」を入力して「 **OK」**をクリックします。

  2. レンダリングバリアントが表示するフィールドを定義するには、子項目を追加できます。

    右クリックでHeadingWrapperを選び、挿入をクリックしてから該当するアイテムをクリックします。この例では、以下の項目を追加しましょう。

    アイテム

    フィールド名

    タグ

    接頭辞

    フィールド

    名前

    スパン

    フィールド

    スパン

    フィールド

    写真

    ディビジョン

    フィールド

    経歴

    ディビジョン

レンダリング関連メディア

サンプルサイトの著者には写真に加え、他のメディア資料も添付されています。

SXA-blog-related-media.png

レンダリングバリアントに作者に関連付けられた関連メディアをレンダリングさせるために、リファレンスアイテムを使ってレスポンシブな画像アイテムをレンダリングします。

関連メディアの表示:

  1. 投稿者バリアントを右クリックし、「参考文献」をクリックし、RelatedMediaを入力して**「OK」**をクリックしてください。
  2. RelatedMediaを右クリックし、「レスポンシブ画像」をクリックして「**OK」**をクリックします。
  3. フィールド名フィールドを空にします。
  4. デフォルトサイズ欄に64を入力してください。
この記事を改善するための提案がある場合は、 お知らせください!