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

Field used as link target - 対象アイテムのフィールド名を入力します。このクラスは、リスト項目とナビゲーション項目のマークアップ (li HTML要素) に追加されます。このリンクは、Is link、Is prefix link、またはIs suffix linkチェック ボックスがオンになっている場合に、すべてのリンクを上書きするために使用されます。

Allowed in templates - バリアントを使用できるページを指定します。関連するページテンプレートをクリックし、右矢印をクリックして選択したアイテムのリストに移動し、Saveをクリックします。テンプレートが選択されていない場合、バリアントはすべてのページで使用できます。

Compatible renderings - レンダリングバリアントを他のレンダリングで使用できるようにします。たとえば、ページ コンテンツ レンダリング バリアントの場合、Compatible Renderingsフィールドで タイトル を指定した場合、そのレンダリング バリアントを タイトル レンダリングにも使用できます。

Css Class: レンダリング コンテンツ要素にレンダリングするクラスを指定します。例えば：

<div class="component title customClass col-xs-12">
    <div class="component-content">
<div class="field-title">S</div>    
</div>
</div>

Item Css class field: CSSクラスを取得してclass属性にレンダリングする、レンダリングされたアイテムのフィールド名を指定します。ナビゲーションレンダリングでのみサポート

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セクションに移動し、Switch component context to currently rendered itemチェック ボックスをオンにします。

Reference - 参照されたアイテムのフィールドを表示します。参照されたアイテムのフィールドを表示する場合は、このフィールドをPassThroughFieldで定義できます。このバリアント フィールドは、LinkField (GeneralLink、DropLink)、FileField (ファイル)、ImageField (イメージ)、ReferenceField (Droptree) のフィールドで使用できます。参照アイテムには、子アイテムとして別の参照アイテムを含めることができます。これは、参照アイテムのツリーを作成し、参照アイテムで参照されているアイテムからフィールドを表示する場合に便利です。

Responsive Image - デフォルトのサイズと、画像の許容サイズと幅を定義できます。画像をレスポンシブにするということは、ページ上の画像のサイズと画面の解像度に基づいて、ブラウザがその画像の異なるサイズのバージョンを提供することを意味します。 Variant Detailsセクションに入力された値は、srcset属性に結合されます。次のスクリーンショットの値により、次のimgタグが生成されます。

Query - 現在のコンテキストアイテムに対して実行するクエリを指定できます。これにより、子アイテムをクエリしたり、SXAトークンを使用したりできます。たとえば、レンダリング バリアントを特定のテンプレートの子アイテムにのみ表示する場合などです。クエリはqueryで開始し、標準の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 - コンポーネントを埋め込むことができます。たとえば、ニュース見出しの場合、ブレッドクラムとタグのレンダリングを含むバリアントを作成できます。 Paginationコンポーネントの埋め込みはサポートされていません。

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

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