Components

コンポーネントのバリアントを作成する

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

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

SitecoreAIにはデフォルトのコンポーネントセットが付属しています。再利用を促進するために、設計者やフロントエンド開発者はバリアントを作成することもできます。バリアントはデフォルトのコンポーネントをカスタマイズ可能な適応です。これにより、著者はコンテンツの提示方法に選択肢が増えます。

バリアントの作成は二段階のプロセスです。まず、関連するコンポーネントTSXファイル(例えばPromo.tsx)でバリアントのコードを作成します。その後、Content Editorでバリアントを作成し、コードで定義されたバリアントを参照します。

構成要素のTSXファイルは以下のディレクトリにあります:

[application root]\src\components

コード例:

以下の例は、Promoコンポーネントの2つのバリアント、DefaultとLinkを示しています。 Defaultバリアントはテキストフィールドをレンダリングし、Linkバリアントはテキストフィールドとリンクをレンダリングします。

export const Default = (props: PromoProps): JSX.Element => {
  if (props.fields) {
    return (
      <div className={`component promo ${props.params.styles}`}>
        <div className="component-content">
          <div className="field-promoicon">
            <JssImage field={props.fields.PromoIcon} />
          </div>
          <div className="promo-text">
            <div>
              <div className="field-promotext">
                <JssRichText field={props.fields.PromoText} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return <PromoDefaultComponent {...props} />;
};

export const Link = (props: PromoProps): JSX.Element => {
  if (props.fields) {
    return (
      <div className={`component promo ${props.params.styles}`}>
        <div className="component-content">
          <div className="promo-text">
            <div>
              <div className="field-promotext">
                <Text className="promo-text" field={props.fields.PromoText} />
              </div>
            </div>
            <div className="field-promolink">
              <JssLink field={props.fields.PromoLink} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  return <PromoDefaultComponent {...props} />;
};

Content Editorでバリアントを作成するには:

Content Editorでサイトをクリックし、Presentation/Headless Variantsフォルダを開きます。このフォルダには、バリアントを許可するすべてのコンポーネントが一覧です。

注記

フォルダにコンポーネントを追加するには、管理者に連絡してください。
バリアントを追加したいコンポーネントを右クリックし、Insertを選択し、Variant Definitionを選択します。
コード内のバリアント名と一致する名前を入力し、OKクリックします。例えばLink。
Variant Detailsセクションで、バリアントが利用可能なページテンプレートを指定します。該当するページテンプレートをダブルクリックして選択したアイテムのリストに移動し、その後Saveをクリックします。テンプレートが選択されていない場合は、すべてのページでバリアントが利用可能です。
オプションで、Appearanceセクションでバリアントのサムネイル画像を追加することもできます。
変更を保存してください。

ページ内のバリエーションを使います:

ページビルダーで、ページキャンバス内のコンポーネントを選択します。
右側のペイン、Designタブで最初のドロップダウンメニューを開きます。
ドロップダウンメニューから使いたいバリアントをクリックしてください。

Selecting a component variant in the Page builder

この記事を改善するための提案がある場合は、お知らせください!