1. 構成要素

レンダリングをコピーしてカスタマイズする

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SXAでは、クローンスクリプトを使ってSXAレンダリングのコピーを素早く作成できます。クローンレンダリングでは、レンダリング定義項目、レンダリングパラメータテンプレート、データソーステンプレート、ブランチの正確なコピーが手に入ります。既存のレンダリングをコピーし、名前やスタイルを変えます。例えば、異なるスタイルで多くのプロモレンダリングを使いたい場合など、これは便利です。

標準のSXAツールボックスセクションはSXAのアップデートで上書きされるため、派生レンダリング用のツールボックスセクションを別に作成することをお勧めします。これはSXAに新しいモジュールを追加することで可能です。

新しいモジュールの追加

新しいモジュールを追加するには:

  1. /sitecore/system/Settingsに移動し、FeaturesまたはFoundationを右クリックして新しいフォルダを挿入します。
  2. 新しいフォルダを右クリックし、「 挿入」をクリックし、「 モジュール」をクリックします。
  3. 名前を入力し、モジュールを新しいフォルダの下にまとめてください。

レンダリングをコピーしてカスタマイズする

レンダリングをコピーしてカスタマイズするには:

  1. 使いたいレンダリングをクローンするには、 /sitecore/Layout/Renderings/ に移動してクローンしたいレンダリングを右クリックしてください。
  2. スクリプト**をクリックして、「**クローンレンダリング」をクリックします。
  3. 派生レンダリングを作成する」 ダイアログボックスで、以下のフィールドを埋めてください:

タブ

フィールド

概要

一般

新しい名称

新しいレンダリングの名前を入力してください。

加算

新しいレンダリングが属するモジュールを選択します。標準のSXAツールボックスセクションはSXAのアップデートで上書きされるため、派生レンダリング用に独自のモジュールを追加することをお勧めします。

レンダリングCSSクラス

レンダリングのためにCSSクラスを導入します。

パラメータ

レンダリングパラメータ

レンダリングパラメータの選択 コピーモード:

  • 既存のレンダリングパラメータから継承する – 新しいアイテムを作成し、 __Base template を元のレンダリングパラメータテンプレートを指すように設定します。
  • 元のレンダリングパラメータのコピーを作成する – 元のレンダリングパラメータを新しい場所にコピー作成します。これによりパラメータの拡張、削除、順序変更が可能になります。

データソース

データソース

データソースコピーモードを選択してください:

  • 既存データソースから継承する – 新しいアイテムを作成し、その __Base template をソースデータソースのテンプレートに指すように設定します。レンダリングのスタイリングを変更したい時だけこのオプションを選択してください。
  • 元のデータソースのコピーを作成する – 新しい場所にソースデータソーステンプレートのコピーを作成します。標準データ項目に追加フィールドを加えたいときにこのオプションを選択します。例えば、画像フィールドを背景に使いたい場合などです。

眺め

眺め

コピーモードを選択してください:

  • 元のMVCビューファイルを使いましょう。事前に入力された パスからレンダリング用のビューフィールドへの ビューを使用します。 ビュー フィールドが指定されていない場合、 StandardController はアイテム名のレンダリングに基づいてビューを解決しようとします。スタイリングを変更したい場合だけにこのオプションを選択してください。
  • MVCビューファイルをコピー(下記にパス指定)—ソースビューを 「Path to rendering view 」フィールドで指定した場所にコピーします。既存のマークアップを拡張または修正したいときにこのオプションを選択してください。
  • 既存のMVCビューファイルを選択してください(下記にパスを指定します)。– レンダリングへのパス ビューフィールドで指定されたビューを使用しますが、コピーは作成しません。

レンダリングビューへのパス

ビューの位置を入力してください。例えば:

Path to the rendering view example.

これでレンダリングをサイトのツールボックスに表示させることができます。

ツールボックスにレンダリングを追加する

レンダリングをツールボックスに追加するには:

  1. サイトのプレゼンテーションフォルダに移動し、「 Available Renderings」を右クリックしてください。

  2. 挿入**をクリックして「**利用可能なレンダリング」をクリックしてください。

  3. 追加したいレンダリングのセクション名を入力してOKをクリックします。

  4. 作成した新しいセクションをクリックし、データ セクションで 編集をクリックします。

  5. アイテム選択 」ダイアログボックスのレンダリングフォルダで、該当するレンダリングをクリックし、右矢印をクリックして選択されたアイテムのリストに移動させます。 OKをクリックします。

    Select Item dialog box

    新しいレンダリングはエクスペリエンスエディターで利用可能になりました。

    Special Promo component now available in EE.
この記事を改善するための提案がある場合は、 お知らせください!