作成したコンテンツを埋め込みタグで表示する

Spearly CMS から提供されるJavaScriptライブラリを用いると、簡単にコンテンツを埋め込むことができます。
シンプルにコンテンツの情報を表示したい場合におすすめです。

より高度な埋め込み、表示の設定をしたい場合は、APIをご利用ください。(詳しくはこちら)

Spearly CMSのコンテンツの表示方法

タグ埋め込みでは、下記のような書き方で、Spearly CMSで作成、登録したコンテンツを表示することができます。

自動でページネーションのつく一覧表示やその詳細ページ、フォーム埋め込みなど、Spealyは様々なコンテンツに合わせた埋め込み方法を用意しています。

このチュートリアルでは、一覧表示と、その詳細ページの作成を行います。

[完成例]
コンテンツ一覧ページ

コンテンツ詳細ページ

Spearly CMSのコンテンツ埋め込み例

コンテンツを実際に埋め込むチュートリアルを進める前に、
Spearly CMSの埋め込みタグの活用例をざっくり紹介します。

一覧表示

Spearly CMSで作成したコンテンツをリスト表示します。
以下のようなカスタムタグをコードの中に記述することで、対応するデータが埋め込まれます。

# articleというコンテンツタイプのコンテンツを作成した場合
<article-list>
  <h1>{%= article_title %}</h1>
  <img src="{%= article_image %}" />
  <div style="background: url('{%= article_image %}');"></div>
  <p>{%= article_description %}</p>
</article-list>

参考画像

単体埋め込み/詳細ページ

もちろんリスト表示だけでなく、コンテンツ単体で埋め込むこともできます。
コンテンツリスト機能には、各コンテンツの詳細ページへのリンクを生成する機能もあります。

フォーム埋め込み

Spearly CMSで作成したフォームを埋め込むことができます。
以下のようなカスタムタグをコードの中に記述することで、フォームが作成され、その回答データはSpearly CMSで確認ができます。

<spearly-form data-api-key='' data-form-id=''>
  <h1>{%= form_title %}</h1>
    <p>{%= form_description %}</p>
    ...
    <div>
      <h3>{%= form_label_message %}</h3>
      <p>{%= form_description_message %}</p>
      {%= form_message %}
    </div>
    ...
<button type="submit">送信</button>
</spearly-form>

それでは早速、コンテンツリストの埋め込みから実践していきましょう。

「コンテンツを一覧表示する」へ

最終更新日: 2022.02.28