コンテンツの埋め込み方法

SpearlyCMSではコンテンツの埋め込み方法を以下の2通り提供しています。

API呼び出し

アプリ側で、JavaScriptなどからAPIを呼び出してコンテンツを取得する方法です。
WEBページ以外からもご利用可能です。
また、リクエストパラメータが豊富なため、より高度な表示を実現したい場合はこちらがおすすめです。

具体的な使用方法はAPIリファレンスでご確認ください。

埋め込みタグ

SpearlyCMSが提供しているJavaScriptライブラリを読み込み
埋め込み用のタグを記述することでコンテンツを取得する方法です。
JavaScriptでAPI呼び出しの処理をコーディングする必要が無いため、プログラマーで無い方でも簡単にコンテンツを埋め込むことが可能です。

以下のような簡単な記述でコンテンツを読み込むことができます。

<sample-list>
  <h1>{%= sample_title %}</h1>
  <img alt="" src="{%= sample_image %}" />
</sample-list>

その他の実装例

コンテンツのリストを表示する例、特定のコンテンツを表示する例と、それぞれの例で使用可能なタグ、属性についての説明です。

• sample-list
  コンテンツを一覧で表示したい箇所に記述するタグです。
  「コンテンツタイプID-list」の形式で記述します。
• data-item-page-path
  特定のコンテンツの詳細ページへのリンクを設置したい時に設定する属性です。
  「item.html」や
  サブディレクトリがある場合は
  「article/item.html」といった形式で記述します。
• sample_#url
  特定のコンテンツへのURLを表示します。
  「sample-list」の内側で使用します。
  URLは
  https://example.com/item.html?contentId=コンテンツID
  または
  https://example.com/subdirectory/item.html?contentId=コンテンツID
  といった形式になります。(data-item-page-pathに設定した値で変化します。)
• data-perpage
  コンテンツを一覧で表示する時に設定可能な属性です。
  一覧表示するコンテンツ数を指定できます。
• sample-item
  特定のコンテンツの詳細ページなど、ある1つのコンテンツのフィールドの値を埋め込む時に記述するタグです。
  「コンテンツタイプID-item」の形式で記述します。
• sample_title/sample_thumbnail/sample_description
  フィールドの値を埋め込む時に記述します。
  sample-listやsample-itemの内側で使用します。
  「コンテンツタイプID-フィールドID」の形式で記述します。

コンテンツのリストを表示する例

<sample-list data-item-page-path="item.html" data-perpage="10" >
  <img alt="" src="{%= sample_thumbnail %}" />
  <a href="{%= sample_#url %}"> {%= sample_title %} </a>
</tutorials-list>

特定のコンテンツを表示する例

<sample-item>
  <h1>{%= sample_title %}</h1>
  <img alt="" src="{%= sample_thumbnail %}" />
  <p>{%= sample_description %}</p>
</sample-item>