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

レンダリングバリアントを作成する

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

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

SXAにはデフォルトのレンダリングとレンダリングバリアントのセットが付属しています。レンダリングバリアントは、デフォルトのレンダリングをカスタマイズ可能な適応形です。再利用性を促進するために、デザイナーやフロントエンド開発者は新しいレンダリングバリアントを作成することもできます。これにより、著者はコンテンツの提示方法により多くの選択肢が生まれます。

コンテンツエディターでバリエーションを追加することで、自分だけのレンダリングバリエーションを作成できます。

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

  1. コンテンツエディターでサイトをクリックし、「プレゼンテーション/レンダリングバリアント」フォルダを開きます。このフォルダにはバリアントを許可するすべてのレンダリングが一覧化されています。

    !注フォルダにレンダリングを追加するには、管理者に連絡してください。

  2. バリアントを追加したいレンダリングを右クリックし、その後「 挿入」→ 「バリアント定義」をクリックします。

    Insert a variant definition

  3. 名前を入力してOKをクリックします。

  4. バリアント詳細セクションでは、以下のフィールドに情報を指定してください:

    • リンクターゲットとして使用されるフィールド - ターゲット項目のフィールド名を提供します。このクラスはリストおよびナビゲーション項目マークアップ(要素li HTML)に追加されます。このリンクは 、Isリンク、Isn接頭辞リンク、またはIs接尾 辞リンク のチェックボックスが選択されたすべてのリンクを上書きするために使われます。

    • テンプレートで許可 - バリアントが利用可能なページを指定します。該当するページテンプレートをクリックし、右矢印をクリックして選択アイテムのリストに移動し、その後 **保存をクリックします。**テンプレートが選択されていなければ、バリアントはすべてのページで利用可能です。

    • Compatible renderings - レンダリングバリアントを他のレンダリングに利用可能にする。例えば、ページコンテンツレンダリングバリアントのCompatible RenderingsフィールドでTitleを指定する場合、Titleレンダリングにもそのレンダリングバリアントを使えます。

    • CSSクラス

      。例えば:

      S

    • Item Css クラスフィールド

      ・クラス属性にレンダリングするレンダリングアイテムのフィールド名を指定します。ナビゲーションレンダリングのみをサポートしています

  5. オプションで、外観 セクションでバリアントのサムネイル画像を追加できます。この画像は バリアント のドロップダウンボックスに表示され、コンテンツエディターが目的に最適なバリアントを選ぶのに役立ちます。

    コンテンツエディター

    エクスペリエンスエディター

    In the Appearance section add a thumbnail for the variant
    Choose a rendering variant after viewing thumbnails.

    名前だけが表示されたサムネイル表示なしのレンダリングバリアント。

    If no thumbnail is specified, the variant displays the name only.

  6. フィールドを表示するには、子項目をレンダリングバリアントに追加し、バリアントを右クリックして **挿入をクリックし、**その後該当するアイテムをクリックできます。

    レンダリングバリアントで利用可能な子項目は以下の通りです:

    • Field - フィールド名やその他のフィールド値を表示します。

    • Date - データと時刻をカスタム形式で表示する。カスタム形式で日付と時刻を表示するには、Date項目を使用する必要があります。この項目はField項目に似ていますが、日付と時間のフォーマットを選択できる追加のフィールド「 Date format 」があります。 Field項目と同様に、Date項目もフォールバックアイテムとして使用でき、独自のフォールバックアイテムを定義できます。

      !注フィールドとバリアントの詳細は以下の表に説明されています。

    • Edit Frame - 編集モードで使用できるバリアントアイテム。

    • HTML Tag - ユーザーがHTMLの自己閉鎖タグをレンダリングできるようにします。

    • Model - 現在のモデルからプロパティを表示する。SXAレンダリングモデルはSitecore.XA.Foundation.Mvc.Models.RenderingModelBaseから継承しています。 Property pathフィールドで、表示したいプロパティへのパスを入力できます。

    • Model Iterator - モデルリストからプロパティを表示すること。

    • Placeholder - ユーザーが追加のレンダリングを追加できるプレースホルダーをレンダリングします。このプレースホルダー内でレンダリングのコンテキストを切り替えたい場合は、VariantDetailsセクションに行き、「 コンポーネントコンテキストを現在レンダリング済みアイテムに切り替え る」チェックボックスを選択してください。

      Enable switching context for renderings within the placeholder.

    • Reference - 参照項目のフィールドを表示する。参照項目のフィールドを表示したい場合は、PassThroughFieldでこのフィールドを定義できます。このバリアントフィールドは以下のフィールドに使用できます: LinkField (GeneralLink, DropLink)、FileField (File)、ImageField (Image)、ReferenceField (Droptree)。参照項目は子項目として別の参照項目を持つことができます。これは参照項目の木を作成し、参照項目で参照される項目からフィールドを表示する際に便利です。

    • Responsive Image - 画像のデフォルトサイズだけでなく、許容されるサイズや幅も定義できます。画像をレスポンシブにするには、ページ上の画像のサイズや画面解像度に応じて、ブラウザが異なるサイズの画像を表示します。 バリアント詳細 セクションに入力された値はsrcset属性で統合されます。以下のスクリーンショットの値は以下のimgタグを生成します:

      Variant details will be combined in a srcset attribute.
    Simple description of the image

    • Query - 現在のコンテキスト項目に対して実行するクエリを指定することができます。これにより子項目にクエリを問い合わせたり、SXAトークンを利用できます。例えば、レンダリングバリアントを特定のテンプレートの子項目だけに表示したい場合などです。クエリはクエリから始め、その後標準Sitecoreクエリ構文を使う必要があります。Sitecoreクエリは$homeや$siteなどのSXAトークンと組み合わせることができます。

    • Section - グループ作成に使用されます。セクションにはTag(セクションのラップ要素(例:「div」)やCssClass(ラップタグにcssクラスを追加する)などのフィールドが含まれています。セクションアイテムをネストしてより複雑なバリアント構造を作成できます。

    • Template - ユーザーがHTMLの一部をレンダリングするためのテンプレートを定義できます。

    • Text - テキストを表示する。例えば説明文のカスタム文字列をレンダリングするために使用されます。以下のフィールドを使用できます: Text、Tag (テキストをラップする追加タグを定義)、CssClass (タグに追加されるCSSクラス)、IsLink (選択するとカスタムテキストはハイパーリンクで現在のアイテムにラップされます)。

    • Token - SXAは、トークン $id (アイテムのIDをレンダリング)、$size (付属アセットのサイズをフォーマット)、, $name (アイテム名をレンダリング)、および $FileTypeIcon (CSSがファイル拡張子と等しいクラスでレンダリングされるレンダリング)をサポートしています。カスタムパイプラインresolveVariantTokensは、バリアントトークンのセットを拡張するために使用できます。

    • Component - コンポーネントの埋め込みが可能です。例えば、ニュース見出しの場合は、Breadcrumbやタグレンダリングを含むバリアントを作成できます。 Paginationコンポーネントの埋め込みはサポートしていません。

      SXA-component-rendering-variant.png

      Rendering itemフィールドでレンダリングを選択できます。Rendering パラメータフィールドでデータソースを選択できます。データソースを空にすると、通常フィールドのレンダリングに使われるアイテムがコンポーネントのデータソースとして提供されます。レンダリングパラメータを設定する前に、Rendering Itemを指定して保存する必要があります。

    • Scriban - ユーザーがHTMLの一部をレンダリングするために使用するScribanテンプレートを定義できるようにします。

    !注Scribanアイテムの下でコンポーネントバリアントを使用する場合、コンポーネント内でコンポジットやページネーションコンポーネントは使用できません。また、Scribanテンプレート内でプレースホルダー付きのコンポーネントは使用しないことをお勧めします。これらのコンポーネントはページ上で正しくレンダリングされない可能性があります。

    追加するアイテムに応じて、以下のフィールドを設定できます:

    • フィールド: バリアント詳細

    • タグ

      。例えば: div空のままの場合、フィールドコンテンツはラップされていないままです。選択したタグが無効なHTMLマークアップにつながらないように注意しなければなりません。HTMLマークアップが無効だと、エクスペリエンスエディターは正しく動作しなくなり、コンテンツページのアイテムフィールドを編集できなくなります。例えば、ネストされたコンポーネントを含むアイテムプレゼンテーションが両方をレンダリングする場合

      タグ。

      My

      text

      which gives trouble

    • フィールド名

      。

    • プレフィックス

      。

    • 接尾辞

      。

    • is link:フィールド内容をラップするハイパーリンクの有無を選択する:アンラップ – フィールドがリンクでラップされていない(<a href="" ... /> HTML要素)。ラップ – フィールドは常にリンクでラップされる (<a href="" ... />;HTML element)Wrapped If Not Empty – フィールドは空でない場合にのみリンク(<a href="" ... /> HTML 要素)でラップされます。

    • is prefix link:フィールド内容をラップするハイパーリンクを選びます:Unwrapped – フィールドがリンクでラップされない(<a href="" ... /> HTML要素)Wrapped – フィールドが常にリンクでラップされる (<a href="" ... />;HTML element)Wrapped If Not Empty(空でない場合)– フィールドはリンク(<a href="" ... /> HTML要素)でラップされます。空でない場合のみです。

    • is sadd link:フィールド内容をラップするハイパーリンクを選びます:Unwrapped – フィールドがリンクでラップされていない (<a href="" ... /> HTML element) Wrapped – フィールドは常にリンクでラップされます (<a href="" ... />;HTML element)Wrapped If Not Empty – フィールドは空でない場合にのみリンク(<a href="" ... /> HTML 要素)でラップされます。

    • ダウンロードリンク

      。

    • cssクラス

      。 タグ フィールドが指定されていない場合、 CSSクラス はレンダリングされません。

    • 編集可能か

      。

    • 日付フォーマット

      。

    • 空の場合はレンダリング

      。

    • パススルーフィールド

      。

    • テキスト

      。

    • テンプレート

      Scribanテンプレート を定義します。

    • トークン

      。サポートされているトークンは以下の通りです:$Size
      。$FileTypeIcon
      。

    • クエリ

      。例えば:すべての子項目を取得するために:query:./*現在の項目の下から Page template のすべての項目を取得するには:query:..//*@@templatename='Page'現在のサイトのホーム項目の下にあるすべての Page template 項目を取得するには:query:$site/*@@name='Home'//*@@templatename='Page'

    • **最大結果数:**返却されるアイテム数を制限するために数字を入力してください。

    • プロパティパス: Property path フィールドで、表示したいプロパティへのパスを入力します。例えば、 Item.Paths.Path はまず ModelからItemプロパティにアクセスし、さらに深く掘り下げてPathsプロパティにアクセスし、最後にPath文字列にアクセスします。The Property path fieldItem.Paths.Path example

    • データ属性

      。

    • **リンク属性:**レンダリングバリアントによって生成されたリンク要素にリンク属性を追加します。

    • ボタン

      。ボタンを選択するには、/sitecore/content/Applications/WebEdit/Edit Frame Buttonsにアクセスしてください。

    • プレースホルダーキー

      。

    • RenderingItem

      。

    • RenderingParameter

      。

    • DefaultSize

      。レスポンシブ画像構文を生成するために使用されます。例えば、

    img srcset="photo-author1-320w.jpg 320w, photo-author1-480w.jpg 480w, photo-author1-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px,800px" src="photo-author1-800w.jpg" alt="Blog author 1"

    • サイズ
      、最適な画像サイズを示します。レスポンシブ画像構文を生成するために使用されます。例えば、

    img srcset="photo-author1-320w.jpg 320w, photo-author1-480w.jpg 480w, photo-author1-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px,800px" src="photo-author1-800w.jpg" alt="Blog author 1"

    • 幅
      。レスポンシブ画像構文を生成するために使用されます。例えば、

    img srcset="photo-author1-320w.jpg 320w, photo-author1-480w.jpg 480w, photo-author1-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px,800px" src="photo-author1-800w.jpg" alt="Blog author 1"

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