SXA レンダリングとレンダリング バリアント

概要

SXA は、モジュール式のコンポーネントを基盤とするデザインを実現するために、定義済みのレンダリング ライブラリを備えています。

Sitecore Experience Accelerator (SXA) では、標準コンポーネントを必要な場所に直接ドラッグ アンド ドロップしてページを構築できます。これらのコンポーネントはレンダリングと呼ばれ、エクスペリエンス エディターのツールボックスに一覧表示されます。単純なテキスト、画像、ビデオ、ソーシャル メディア プラグインなどのレンダリングを利用できます。

すぐに使えるバリアント セットは、それをサポートするレンダリングに付属しています。レンダリング バリアントをサポートするレンダリングをページに配置すると、エクスペリエンス ボタン ツールバーの下にあるドロップ ダウンからバリアントを選択できます。バリアントは、レンダリングの表示を変えたり、異なるコンテンツを表示したりできます。たとえば、リスト レンダリングには、詳細リスト、サムネイル リスト、カルーセルなどのバリアントがあります。

コンテンツ エディターで既定のレンダリングを設定し、レンダリング バリアントを作成できます。

レンダリング

バリアント

説明

アコーディオン

埋め込みレンダリングはバリアントをサポートできます

折りたたみ可能なパネルを表示します。

Carousel

埋め込みレンダリングはバリアントをサポートできます

画像、ビデオ、リンク、テキストなどを含むことができる一連のスライドを表示します。

反転

埋め込みレンダリングはバリアントをサポートできます

タイトルとコンテンツ レンダリングの両方を持つ 2 つの側面を表示します。

タブ

埋め込みレンダリングはバリアントをサポートできます

ページにタブを追加します。

スニペット

埋め込みレンダリングはバリアントをサポートできます

レンダリングの再利用可能なグループを作成するためのプレースホルダーを提供します。

レンダリング

説明

言語セレクター

異なる言語バージョンを切り替えるためのリンクを提供します。

サイト セレクター

異なるテナント サイトを切り替えるためのリンクを提供します。

レンダリング

説明

Facebook のコメント

Facebook のコメントを表示します。

Disqus

最新のコメントを表示します。

レンダリング

説明

イベント カレンダー

イベント リストまたは Google カレンダーからイベントを表示します。

イベント リスト

イベントのリストを名前、説明、場所、開始/終了時間、リンクなどとともに表示します。

レンダリング

説明

Sitecore Forms Wrapper

Sitecore Forms モジュールを使用して作成されたフォームを埋め込みます。

MVC フォーム

フォーム モジュールを埋め込んだ後、ページに MVC フォームを追加できます。

レンダリング

説明

マップ

Google や Bing のマップを埋め込み、場所やルート、エリアをマークできます。このコンポーネントは、検索結果のソースに関連付けられている場合、POI の結果を表示することもできます。マップ上のポイントは、レンダリング バリアントを使ってフォーマットすることができます。

レンダリング

バリアント

説明

ファイル リスト

あり

ダウンロード可能なファイルのリストを表示します。

Flash

なし

ページに SWF オブジェクトを埋め込みます。

ギャラリー

なし

画像やビデオのギャラリーを表示します。

画像

あり

メディア ライブラリから選択した画像をページに追加します。

画像 (再利用可能)

あり

メディア ライブラリから画像を保存して、再利用できるようにします。

メディア リンク

あり

メディア ライブラリのアセットへのリッチ リンクを提供します。説明とプレビューを含みます。レンダリング バリアントをサポートします。

プレイリスト

あり

ビデオ コンポーネントのプレイリストを作成できます。レンダリング バリアントをサポートします。

ビデオ

なし

ビデオを再生する HTML 5 プレーヤー (レガシー ブラウザー用の Flash フォールバック付き) を表示します。

レンダリング

バリアント

説明

アーカイブ

あり

ブログのアーカイブをツリーで表示します。レンダリング バリアントをサポートします。

階層リンク

なし

ルートから現在のアイテムまでのすべてのパス アイテムを示す階層リンクを生成します。また、レンダリング バリアントをサポートします。

リンク

あり

リンクを追加するには、次の手順に従います。

  • 兄弟または親ページ

  • 閲覧履歴からのページ

  • 任意のページまたはリソース

リンク リスト

あり

タイトル、リンク、およびテキストを含むアイテムのリストを表示します。

ナビゲーション

なし

ナビゲーション メニューを生成します。以下を選択できます。

  • メイン ナビゲーション - ドロップダウン垂直 – 標準のドロップダウン ナビゲーション

  • メイン ナビゲーション - ドロップダウン水平 – 子アイテムを 1 行で表示するドロップダウン ナビゲーション

  • サイドバー ナビゲーション – すべての子アイテムが縦に表示されます

  • サイトマップ ナビゲーション – すべての子アイテムが縦に表示されます.

  • ビッグ/ファット ナビゲーション –すべての子アイテムが横に表示されます。

  • モバイル ナビゲーション – モバイル用ナビゲーション

レンダリング

バリアント

説明

ページ コンテンツ

あり

選択したデータ ソース アイテムからの特定のフィールドをページに表示します。

ページ リスト

あり

定義済みまたは作成済みのクエリによりページのリストを表示します。

改ページ

なし

ページ リスト レンダリングの改ページを追加します。

プレーン HTML

なし

HTML コードを埋め込みます。

プレーン HTML (再利用可能)

なし

再利用を可能にする HTML コードを格納します。

プロモ

あり

別のページからフィールドをレンダリングし、他のレンダリングのプレースホルダーとして機能します。アイコンまたはタイトルとリンクで構成されます。

リッチ テキスト

あり

書式設定されたテキストをページに追加します。HTML タグを使用してテキストを記述できます。

リッチ テキスト (再利用可能)

あり

再利用できるようにリッチ テキストを格納します。

タイトル

あり

現在のページのタイトルまたはサブタイトルを表示します。

レンダリング

説明

コンテナー

他のレンダリングのラッパーを使用して、CSS スタイルをさらに追加します。

分割バー

プレースホルダーを横に分割します。

編集モード パネル

編集モードでのみ作成者に表示される他のレンダリングを埋め込むためのプレースホルダーを作成します。

IFrame

外部ページを埋め込みます。

スプリッター (列)

プレースホルダーを横に分割します。

スプリッター (行)

プレースホルダーを縦に分割します。

切り替え

切り替えたときに追加コンテンツを表示するボタンまたはリンクを表示します。

レンダリング

バリアント

説明

集計されたファセット フィルター

あり

1 つのコンポーネント内でフィルターを結合します。

ファセット要約

なし

ページにアクティブなフィルターを表示し、訪問者がそれらを 1 つずつまたはまとめて削除できるようにします。

フィルター (チェックリスト)

なし

選択した値に基づいて検索結果をフィルター処理します。

フィルター (日付)

なし

選択した日時で検索結果をフィルター処理します。

フィルター (ドロップダウン)

なし

フィルター (ドロップダウン) フィルターは、選択したファセットでタグ付けされたアイテムに基づいて検索結果をフィルター処理します。

フィルター (管理された範囲)

なし

最小値と最大値で結果を指定します。

フィルター (半径)

なし

現在のユーザーの場所からの距離、または場所フィルター レンダリングで提供される場所に基づいて、検索結果をフィルター処理します。

フィルター (範囲スライダー)

なし

ファセットに基づいて検索結果をフィルター処理して、訪問者が選択した値以下、またはそれ以上にします。

フィルター (スライダー)

なし

フィルター (スライダー) コンポーネントは、選択した範囲内の特定のファセットに基づいて検索結果をフィルター処理します。

結果をさらに表示

なし

検索結果を段階的に読み込みます。

Location Finder

なし

ユーザーの場所を指定します。

ページ セレクター

なし

検索結果のページング機能を提供します。このレンダリングは、結果をさらに表示レンダリングと相互に排他的です。

ページ サイズ

なし

訪問者が一度に表示される結果の数を切り替えることができるようにします。

検索結果数

なし

訪問者に表示される結果の数を指定することができます。

結果バリアント セレクター

なし

訪問者が、検索結果のレンダリングで動的に使用されるレンダリング バリアントを変更できるようにします。

検索ボックス

あり

訪問者が提供したテキストに基づいて検索結果をフィルター処理します。

注記

コンテンツは SXA 検索サービスによって生成されるため、検索ボックス コンポーネント内でプレースホルダーを表示または編集することはできません。

検索結果

あり

検索クエリの結果を表示します。

注記

コンテンツは SXA 検索サービスによって生成されるため、検索結果コンポーネント内でプレースホルダーを表示または編集することはできません。

結果の並べ替え

なし

ユーザーが検索結果の並べ替え基準を切り替えることができるようにします。

レンダリング

説明

ログイン

ログイン フォームを表示します。

ログアウト

ログアウト ボタンを表示します。

ソーシャル ログイン ラッパー

Social Connected モジュールのログイン フォームをページに埋め込みます。

レンダリング

説明

AddThis

AddThis のパーソナライズされたウィジェットを統合します。

フィード

RSS フィードと ATOM フィードを表示します。

ソーシャル メディア共有

ソーシャル ネットワーク (Facebook、Twitter、Google+) のリンクを表示します。

Twitter

Twitter に投稿された最新のツイートを表示します。

レンダリング

説明

タグ クラウド

検索結果の集計タグを、出現頻度に基づいて視覚的に重み付けして表示します。

タグ リスト

ページにタグ付けされているタクソノミー エントリを表示します。