コンポーネント

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

Version:

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

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

SXAには、一連のデフォルトコンポーネントが付属しています。再利用性を促進するために、デザイナーやフロントエンド開発者もバリアントを作成できます。バリアントは、デフォルトのコンポーネントを構成可能な適応です。これにより、作成者はコンテンツの表示方法の選択肢が増えます。

バリアントの作成は、2段階のプロセスです。まず、バリアントのコードを関連コンポーネントのTSXファイル ( Promo.tsxなど) に作成します。次に、コンテンツエディタでバリアントを作成し、コードで定義されているバリアントを参照します。

コンポーネントの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} />;
};

コンテンツエディターでバリアントを作成するには:

コンテンツエディターで、サイトをクリックし、Presentation/Headless Variantsフォルダーを開きます。このフォルダには、バリアントを許可するすべてのコンポーネントが一覧表示されます。

メモ

フォルダにコンポーネントを追加するには、管理者に問い合わせてください。
バリアントを追加するコンポーネントを右クリックし、「 Insert」を選択してから、「 Variant Definition」を選択します。
コード内でのバリアントの命名方法と一致する名前を入力し、「 OK」をクリックします。例: Link。
Variant Detailsセクションで、バリアントを使用できるページテンプレートを指定します。関連するページテンプレートをダブルクリックして、選択したアイテムのリストに移動し、Saveをクリックします。テンプレートが選択されていない場合、バリアントはすべてのページで使用できます。

必要に応じて、Appearanceセクションで、バリアントのサムネイル画像を追加できます。この画像はVariantリストに表示され、コンテンツ編集者が目的に最適なバリアントを選択するのに役立ちます。

Content Editor	Experience Editor

変更を保存します。

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