1. レンダリングバリアント

チュートリアル: レンダリング バリアント参照アイテムを使用して、リンクされたアイテムのフィールドを表示する

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

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

レンダリング バリアント参照アイテムを使用すると、参照アイテムのフィールドを表示できます。このチュートリアルでは、ブログ投稿に作成者情報を追加する方法について説明します。「 チュートリアル: ブログ投稿のレンダリング バリアントの作成」で説明されているのと同じシナリオを使用します。

この例では、ブログ投稿のauthorフィールドに移動し、リンクされているアイテムを調べて、それらのアイテムからフィールドをレンダリングするレンダリング バリアント参照アイテムを作成する方法について説明します。

シナリオと最終結果

このシナリオには、次のものが含まれます。

  • ブログの投稿を含むサイト。

  • 著者のリストを含むサイト データ フォルダ (名、姓、略歴、写真、および関連メディア項目を含む)。

  • クエリを使用してこのデータソースを参照するページテンプレート:

  • ブログページには、リストから選択された関連製品があります。

最終結果は次のようになります。

このチュートリアルでは、次の方法について説明します。

レンダリング バリアント参照アイテムを作成する

レンダリング バリアント参照アイテムは、参照アイテムのフィールドを表示します。参照されたアイテムのフィールドを表示する場合は、このフィールドをPass through fieldフィールドで定義できます。

レンダリング バリアント参照アイテムを作成するには:

  1. コンテンツ エディタでPresentation/Rendering Variantsに移動し、Page Contentを右クリックしてInsertをクリックします。Variant Definition.

  2. Post Authorと入力し、Okをクリックします。

  3. 次に、ブログ投稿のauthorフィールドに移動し、そのフィールドのコンテンツをレンダリングするレンダリング バリアント参照アイテムを作成しましょう。

    Post Authorバリアントを右クリックし、InsertReferenceの順にクリックし、「Authors」と入力して、Okをクリックします。Pass through fieldフィールドは、ネストされたアイテムのフィールドの名前を定義します。レンダリングバリアントは、authorsフィールドを通過するようになりました。

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

これで、作成者からのフィールドのレンダリングを開始できます。

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

  1. まず、セクションを追加してラッパーを作成します。 Post Authorを右クリックし、Sectionをクリックし、「 HeadingWrapper 」と入力してOKをクリックします。

  2. レンダリング バリアントが表示するフィールドを定義するために、子アイテムを追加できるようになりました。

    HeadingWrapperを右クリックし、Insertをクリックして、該当する項目をクリックします。この例では、次の項目を追加しましょう。

    アイテム

    フィールド名

    タグ

    接頭辞

    名前

    全長

    名字

    全長

    画像

    ディビジョン

    バイオ

    ディビジョン

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

サンプル サイトの作成者には、写真だけでなく、他のメディア項目も添付されています。

レンダリング バリアントで作成者に関連付けられた関連メディアをレンダリングするには、参照アイテムを使用してレスポンシブ イメージ アイテムをレンダリングしてみましょう。

関連メディアをレンダリングするには:

  1. Post Authorバリアントを右クリックし、Referenceをクリックし、「RelatedMedia」と入力してOKをクリックします。

  2. RelatedMediaを右クリックし、Responsive Imageをクリックして、OKをクリックします。

  3. Field Nameフィールドを空にします。

  4. Default sizeフィールドに64と入力します。

この記事を改善するための提案がある場合は、 お知らせください!