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

[リンク ターゲットとして使用されるフィールド]: 対象アイテムのフィールド名を入力します。このクラスは、リストとナビゲーション アイテムのマークアップ (li HTML要素) に追加されます。このリンクは、[リンク]、[プリフィックスをリンクにする]、[サフィックスをリンクにする] チェック ボックスが選択されている場合にすべてのリンクを上書きするために使用されます。

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

[互換性のあるレンダリング]: レンダリング バリアントを他のレンダリングで使用できるようにします。たとえば、ページ コンテンツのレンダリング バリアントの場合、"互換性のあるレンダリング" フィールドで Title を指定すると、Title レンダリングにもレンダリング バリアントを使用できます。

[CSS クラス]: レンダリング コンテンツ要素にレンダリングするクラスを指定します。例:

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

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

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

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

[編集フレーム]: 編集モードで使用できるバリアント アイテム。

[HTML タグ]: ユーザーが HTML の終了タグをレンダリングできるようにします。

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

[モデル反復子]: モデルのリストからプロパティを表示します。

[プレースホルダー]: ユーザーがレンダリングを追加できるようにするプレースホルダーをレンダリングします。ユーザーがこのプレースホルダー内のレンダリングのコンテキストを切り替えられるようにするには、[バリアント詳細] セクションに移動し、[コンポーネント コンテキストを現在レンダリングされているアイテムに切り替え] チェックボックスをオンにします。

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

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

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

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

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

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

[トークン]: SXA は次のトークンをサポートします: $id (アイテムの ID をレンダリングする)、$size (添付されるアセットのサイズを整える), $name (アイテムの場合は名前をレンダリングする)、$FileTypeIcon (ファイル拡張子と同じクラスの css の span をレンダリングする)。カスタム パイプラインである resolveVariantTokens を使用して、バリアント トークンのセットを拡張できます。

[コンポーネント]: コンポーネントを埋め込むことができます。たとえば、News heading の場合、Breadcrumb とタグのレンダリングを含むバリアントを作成できます。ページネーション コンポーネントの埋め込みはサポートしていません。

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

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