SXA レンダリングとレンダリング バリアント
Sitecore Experience Accelerator (SXA) では、標準コンポーネントを必要な場所に直接ドラッグ アンド ドロップしてページを構築できます。これらのコンポーネントはレンダリングと呼ばれ、エクスペリエンス エディターのツールボックスに一覧表示されます。単純なテキスト、画像、ビデオ、ソーシャル メディア プラグインなどのレンダリングを利用できます。
すぐに使えるバリアント セットは、それをサポートするレンダリングに付属しています。レンダリング バリアントをサポートするレンダリングをページに配置すると、エクスペリエンス ボタン ツールバーの下にあるドロップ ダウンからバリアントを選択できます。バリアントは、レンダリングの表示を変えたり、異なるコンテンツを表示したりできます。たとえば、リスト レンダリングには、詳細リスト、サムネイル リスト、カルーセルなどのバリアントがあります。
コンテンツ エディターで既定のレンダリングを設定し、レンダリング バリアントを作成できます。
コンポジット
レンダリング |
バリアント |
説明 |
---|---|---|
埋め込みレンダリングはバリアントをサポートできます |
折りたたみ可能なパネルを表示します。 | |
埋め込みレンダリングはバリアントをサポートできます |
画像、ビデオ、リンク、テキストなどを含むことができる一連のスライドを表示します。 | |
埋め込みレンダリングはバリアントをサポートできます |
タイトルとコンテンツ レンダリングの両方を持つ 2 つの側面を表示します。 | |
埋め込みレンダリングはバリアントをサポートできます |
ページにタブを追加します。 | |
埋め込みレンダリングはバリアントをサポートできます |
レンダリングの再利用可能なグループを作成するためのプレースホルダーを提供します。 |
コンテキスト
レンダリング |
説明 |
---|---|
言語セレクター |
異なる言語バージョンを切り替えるためのリンクを提供します。 |
サイト セレクター |
異なるテナント サイトを切り替えるためのリンクを提供します。 |
エンゲージメント
レンダリング |
説明 |
---|---|
Facebook のコメント |
Facebook のコメントを表示します。 |
Disqus |
最新のコメントを表示します。 |
イベント
レンダリング |
説明 |
---|---|
イベント リストまたは Google カレンダーからイベントを表示します。 | |
イベントのリストを名前、説明、場所、開始/終了時間、リンクなどとともに表示します。 |
フォーム
レンダリング |
説明 |
---|---|
Sitecore Forms モジュールを使用して作成されたフォームを埋め込みます。 | |
MVC フォーム |
フォーム モジュールを埋め込んだ後、ページに MVC フォームを追加できます。 |
マップ
レンダリング |
説明 |
---|---|
Google や Bing のマップを埋め込み、場所やルート、エリアをマークできます。このコンポーネントは、検索結果のソースに関連付けられている場合、POI の結果を表示することもできます。マップ上のポイントは、レンダリング バリアントを使ってフォーマットすることができます。 |
メディア
レンダリング |
バリアント |
説明 |
---|---|---|
ファイル リスト |
あり |
ダウンロード可能なファイルのリストを表示します。 |
Flash |
なし |
ページに SWF オブジェクトを埋め込みます。 |
なし |
画像やビデオのギャラリーを表示します。 | |
あり |
メディア ライブラリから選択した画像をページに追加します。 | |
あり |
メディア ライブラリから画像を保存して、再利用できるようにします。 | |
メディア リンク |
あり |
メディア ライブラリのアセットへのリッチ リンクを提供します。説明とプレビューを含みます。レンダリング バリアントをサポートします。 |
プレイリスト |
あり |
ビデオ コンポーネントのプレイリストを作成できます。レンダリング バリアントをサポートします。 |
なし |
ビデオを再生する HTML 5 プレーヤー (レガシー ブラウザー用の Flash フォールバック付き) を表示します。 |
ページ コンテンツ
レンダリング |
バリアント |
説明 |
---|---|---|
あり |
選択したデータ ソース アイテムからの特定のフィールドをページに表示します。 | |
あり |
定義済みまたは作成済みのクエリによりページのリストを表示します。 | |
なし |
ページ リスト レンダリングの改ページを追加します。 | |
なし |
HTML コードを埋め込みます。 | |
なし |
再利用を可能にする HTML コードを格納します。 | |
あり |
別のページからフィールドをレンダリングし、他のレンダリングのプレースホルダーとして機能します。アイコンまたはタイトルとリンクで構成されます。 | |
あり |
書式設定されたテキストをページに追加します。HTML タグを使用してテキストを記述できます。 | |
あり |
再利用できるようにリッチ テキストを格納します。 | |
タイトル |
あり |
現在のページのタイトルまたはサブタイトルを表示します。 |
ページ構造
レンダリング |
説明 |
---|---|
他のレンダリングのラッパーを使用して、CSS スタイルをさらに追加します。 | |
分割バー |
プレースホルダーを横に分割します。 |
編集モード パネル |
編集モードでのみ作成者に表示される他のレンダリングを埋め込むためのプレースホルダーを作成します。 |
IFrame |
外部ページを埋め込みます。 |
プレースホルダーを横に分割します。 | |
プレースホルダーを縦に分割します。 | |
切り替え |
切り替えたときに追加コンテンツを表示するボタンまたはリンクを表示します。 |
検索
レンダリング |
バリアント |
説明 |
---|---|---|
あり |
1 つのコンポーネント内でフィルターを結合します。 | |
なし |
ページにアクティブなフィルターを表示し、訪問者がそれらを 1 つずつまたはまとめて削除できるようにします。 | |
なし |
選択した値に基づいて検索結果をフィルター処理します。 | |
なし |
選択した日時で検索結果をフィルター処理します。 | |
なし |
フィルター (ドロップダウン) フィルターは、選択したファセットでタグ付けされたアイテムに基づいて検索結果をフィルター処理します。 | |
なし |
最小値と最大値で結果を指定します。 | |
なし |
現在のユーザーの場所からの距離、または場所フィルター レンダリングで提供される場所に基づいて、検索結果をフィルター処理します。 | |
なし |
ファセットに基づいて検索結果をフィルター処理して、訪問者が選択した値以下、またはそれ以上にします。 | |
なし |
フィルター (スライダー) コンポーネントは、選択した範囲内の特定のファセットに基づいて検索結果をフィルター処理します。 | |
なし |
検索結果を段階的に読み込みます。 | |
なし |
ユーザーの場所を指定します。 | |
なし |
検索結果のページング機能を提供します。このレンダリングは、結果をさらに表示レンダリングと相互に排他的です。 | |
なし |
訪問者が一度に表示される結果の数を切り替えることができるようにします。 | |
なし |
訪問者に表示される結果の数を指定することができます。 | |
なし |
訪問者が、検索結果のレンダリングで動的に使用されるレンダリング バリアントを変更できるようにします。 | |
あり |
訪問者が提供したテキストに基づいて検索結果をフィルター処理します。 注記 コンテンツは SXA 検索サービスによって生成されるため、検索ボックス コンポーネント内でプレースホルダーを表示または編集することはできません。 | |
あり |
検索クエリの結果を表示します。 注記 コンテンツは SXA 検索サービスによって生成されるため、検索結果コンポーネント内でプレースホルダーを表示または編集することはできません。 | |
なし |
ユーザーが検索結果の並べ替え基準を切り替えることができるようにします。 |
セキュリティ
レンダリング |
説明 |
---|---|
ログイン |
ログイン フォームを表示します。 |
ログアウト |
ログアウト ボタンを表示します。 |
ソーシャル ログイン ラッパー |
Social Connected モジュールのログイン フォームをページに埋め込みます。 |
ソーシャル
レンダリング |
説明 |
---|---|
AddThis |
AddThis のパーソナライズされたウィジェットを統合します。 |
フィード |
RSS フィードと ATOM フィードを表示します。 |
ソーシャル メディア共有 |
ソーシャル ネットワーク (Facebook、Twitter、Google+) のリンクを表示します。 |
|
Twitter に投稿された最新のツイートを表示します。 |