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

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

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

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

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

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

[アプリケーションルート]\src\componentss]

コード例:

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

export const Default = (props: PromoProps): JSX.Element => { if (props.fields) { return (

); }

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

export const Link = (props: PromoProps): JSX.Element => { if (props.fields) { return (

); }

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

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

コンテンツエディターでサイトをクリックし、「プレゼンテーション/ヘッドレスバリアント」フォルダを開きます。このフォルダには、バリアントを許可するすべてのコンポーネントが一覧化されています。

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

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

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