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

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

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

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属性にレンダリングする、レンダリングされたアイテムのフィールド名を指定します。ナビゲーションレンダリングでのみサポート

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

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

Field: フィールド名とその他のフィールド値を表示します。

HTML Tag: HTMLの自己終了タグをレンダリングできます。

Model: 現在のモデルのプロパティを表示します。SXAレンダリング モデルはSitecore.XA.Foundation.Mvc.Models.RenderingModelBase.プロパティ パス フィールドには、表示するプロパティへのパスを入力できます。

Placeholder: ユーザーがレンダリングを追加できるようにするプレースホルダーをレンダリングします。ユーザーがこのプレースホルダー内のレンダリングのコンテキストを切り替えられるようにするには、Variant Detailsセクションに移動し、Switch component context to currently rendered itemチェックボックスをオンにします。

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

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

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

Template: HTMLの一部をレンダリングするために使用されるNVelocityテンプレートをユーザーが定義できるようにします。getVelocityTemplateRenderersパイプラインを使用して、後でNVelocityテンプレートで使用できるカスタム レンダラーを追加できます。

Text: テキストを表示します。説明などのカスタム文字列をレンダリングするために使用されます。次のフィールドを使用できます: テキスト、タグ (テキストを折り返す追加のタグを定義)、CssClass (タグに追加されるcssクラス)、IsLink (選択すると、カスタム テキストは現在のアイテムへのハイパーリンクによって追加で折り返されます)。

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

Query: 現在のコンテキストアイテムで実行されるクエリを指定できます。これにより、子アイテムをクエリしたり、SXAトークンを使用したりできます。たとえば、レンダリング バリアントを特定のテンプレートの子アイテムにのみ表示する場合などです。クエリはqueryで開始し、標準のSitecoreクエリ構文を使用する必要があります。Sitecoreクエリは、$homeや $siteなどのSXAトークンと組み合わせることができます。

Component: コンポーネントを埋め込むことができます。たとえば、ニュース見出しの場合、ブレッドクラムとタグのレンダリングを含むバリアントを作成できます。 Paginationコンポーネントの埋め込みはサポートされていません。

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