STUDIOへの埋め込み方法

次に、コンテンツを表示したい部分に、カスタムコードブロックを追加します。
左の追加メニューから、Embed内のBlankをお好きな場所に追加してください。

追加したブロックをダブルクリックし、設定パネルを開きます。

STUDIOのカスタムコードブロックにSpearly CMSの共通スクリプトタグと埋め込みタグを設置する

カスタムコードブロックにSpearly CMSの埋め込みタグを設置することで、ページ表示時にコンテンツも表示されます。

埋め込みタグのための共通スクリプトタグを確認する

STUDIOに埋め込みを行う場合、下記の手順に沿って共通スクリプトタグを修正する必要があります。

チームのAPIキーを確認し、下記コードのSPEARLY_CMS_API_KEYの部分をAPIキーの値で置き換えてください。

<script src="<https://static.spearly.xyz/js/cms.js>" defer></script>
<script>setTimeout(() => {const t = document.querySelectorAll(':not(:defined)');for (const e of t) {e.style.visibility = "hidden";}window.spearly.config.AUTH_KEY = "SPEARLY_CMS_API_KEY";window.spearly.firstLoad();}, 1);</script>

APIキーはサイドバーの チーム設定 > APIキー から確認できます。

埋め込みタグをカスタムコードブロックに記述する

Spearly CMSのコンテンツを表示するために、カスタムコードブロックに共通スクリプトタグと埋め込みタグを記述します。

埋め込みタグについては、共通スクリプトタグと同様に「埋め込み方法」をご覧ください。

<!--- 埋め込み例 --->
<!--- 前述によりSPEARLY_CMS_API_KEYを書き換えた共通スクリプトタグ --->
<script src="https://static.spearly.xyz/js/cms.js" defer></script>
<script>...</script>

<!--- 表示したい埋め込みタグ --->
<div cms-item cms-content-type="ab-sample" cms-content="c-asdf">
  <h1>{%= ab-sample_title %}</h1>
  <div>{%= ab-sample_description %}</div>
</div>

上記を参考に、カスタムコードブロックに共通スクリプトタグと埋め込みタグを記述します。

貼り付けた後に、デザインエディタのどこかをクリックすることでコンテンツがロードされ、コンテンツが表示されます。

以上でコンテンツを埋め込むための作業は完了です。ライブプレビューをクリックし、コンテンツが正常に埋め込まれているかを確認しましょう。