コンポーネントの埋め込みコードを入手してください

コンポーネントビルダーで組み込まれたコンポーネントを他のページビルダーで使うことが可能です。これはコンポーネントのコードをコピーして、好きな場所に貼り付けることで行います。

コンポーネントの埋め込みコードを取得するには:

1. コンポーネントとその全バージョンを埋め込むには、「 埋め込みコードを取得」をクリックしてください。このボタンはさまざまな場所で見つけることができます:
   • コンポーネントビルダーで、埋め込みコードを取得したいバージョンの右側にある をクリックしてください。
   • コンポーネントビルダーで、UIのコンポーネントキャンバス外のどこかをクリックすると 概要 ペインを開きます。
2. 埋め込みコードダイアログのドロップダウンメニューでは、埋め込みコードを入手できるすべてのバージョンやバンドルを見ることができます。以下のいずれかをクリックしてください:
   • 特定バージョン - スタンドアロンの特定バージョンのコードを表示するために。
   • Bundle - コンポーネントのすべてのバージョンのコードを異なるブレークポイントで表示します。
3. 埋め込みたいコードを選択するには、以下のいずれかをクリックしてください。
   • 公開済み - これは現在Sitecore Edgeに保存されているコンポーネントです。
   • ステージ - これは現在Pagesで利用可能なコンポーネントのコードです。
4. コードの使い方を選ぶには、 React、 React Server、 Web Component、 またはDOM APIのいずれかをクリックしてください。
5. データソースを使用するコンポーネントについては、データの使い方を決めることができます:
   • サンプル データ をクリックすると、コード内でデータソースからのデータをパッケージ化できます。つまり、データはもはや自己更新しません。
   • 「 Fetch 」をクリックすると、サーバーやネットワークの場所からデータを取得するコードを生成できます。
   • 「 データなし 」をクリックすると、データなしで埋め込みコードを取得できます。
6. typescriptを埋め込みコードから削除するには、 Typescript スイッチオフをクリックしてください。typescriptコードを削除するということは、typescriptポストプロセッサがない場所(例えばウェブページやコンテンツ管理システムに直接)にコンポーネントコードを貼り付けることを意味します。
7. リソース取得(スタイルシートおよび/またはJavaScript)は、挿入されたページの読み込み中に行われます。これにより、コンポーネントのレンダリングがより速くなり、動的なクライアント側のみのレンダリングが可能になります。ただし、JSSを使う場合は、リソースフェッチを無効にするために Preload のリソーススイッチをオフにできます。JSSのすべてはサーバー上でレンダリングされ、スタイルシートはページの一部として読み込まれます。
8. オプションとして、Codepenでコンポーネントをプレビューすることもできます。
9. 「 コードをコピー」をクリックします。

コンポーネントの埋め込みコードを任意のページビルダーコードに貼り付けることができます。