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

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

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

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

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

  1. コンポーネントとそのすべてのバージョンを埋め込むには、Get embedding codeをクリックしてください。このボタンはさまざまな場所で見つかります:

    • Componentビルダーで埋め込みコードを入手したいバージョンの右側の をクリックしてください。

    • Componentビルダーで、コンポーネントキャンバス以外のどこかのUIをクリックしてOverviewペインを開きます。

  2. Embedding codeダイアログのドロップダウンメニューで、埋め込みコードが得られるすべてのバージョンやバンドルを見ることができます。以下のいずれかをクリックしてください:

    • Specific version - スタンドアロンの特定バージョンのコードを表示すること。

    • Bundle - コンポーネントのすべてのバージョンのコードを異なるブレークポイントに表示すること。

  3. 埋め込みたいコードを選択するには、以下のいずれかをクリックしてください。

    • Published - これは現在Sitecore Edgeに保存されているコンポーネントです。

    • Staged - これは現在Pagesで利用可能なコンポーネントのコードです。

  4. コードの使い方を選択するには、ReactReact ServerWeb Component、またはDOM APIのいずれかをクリックしてください。

  5. データソースを使用するコンポーネントについては、データの使い方を決めることができます:

    • Sample dataをクリックすると、コード内にデータソースからのデータをパッケージ化できます。つまり、データはもはや自己更新されなくなります。

    • Fetchをクリックすると、サーバーやネットワークの場所からデータを取得するコードを生成できます。

    • No dataをクリックすると、データなしで埋め込みコードを得られます。

  6. typescriptを埋め込みコードから削除するには、Typescriptスイッチオフをクリックしてください。typescriptコードを削除するとは、typescriptポストプロセッサがない場所(例えばウェブページやコンテンツ管理システムに直接)コンポーネントコードを貼り付けることを意味します。

  7. リソース取得(スタイルシートおよび/またはJavaScript)は、挿入されたページが読み込まれている間に行われます。これにより、動的なクライアントサイドのみのレンダリングがより高速になります。ただし、JSSを使っている場合は、Preload resourcesスイッチを切ってリソース取得を無効にできます。JSS内のすべてがサーバー上でレンダリングされ、スタイルシートはページの一部として読み込まれます。

  8. オプションとして、CodepenのコンポーネントをPreviewしてください。

  9. クリックCopy code

Screenshot of the Embedding code dialog

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

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、