Spearly CMS へ接続する方法

Spear は Spearly CMS からデータをフェッチできます。近年、ヘッドレス CMS を使ってジャムスタックサイトを構築するのは大変人気があります。
Spear は Spearly CMS をサポートしています。

Spearly CMS を使ったサイトを構築する前に、Spearly CMS にサインアップする必要があります。

コンテンツタイプ・コンテンツ・フィールドを学ぶ

Spearly CMS は公式ドキュメントを公開しています。

以下のリソースから学習することができます。

フェッチ設定

通常、Spearly の設定はウィザードで「Use Spearly CMS」の質問に対して Yes と回答すれば、Spearly に関する設定も質問されます。

ウィザードが終了した後でも、フェッチ設定を変更することができます。設定ファイルの詳細については、インストールガイド を参照してください。

コンテンツリストをサイトに埋め込む

埋め込み方法は簡単です。詳細は埋め込み基本ガイドを参照してください。

  • /src/index.html
...
<body>
  <div cms-loop cms-content-type="blog">
    <h1>{%= blog_title %}</h1>
  </div>
</body>

上記サンプルの {%= blog_title %} は埋め込み文法です。Spear はこの埋め込み文法の文字列をフェッチしたデータに置換します。このケースでは、Spear はコンテンツのタイトルに置換し、cms-loop 属性のある要素を繰り返し出力します。

Spear は最終的に以下の HTML を生成します。

  • /dist/index.html
...
<body>
  <div>
    <h1>First blog post</h1>
  </div>
  <div>
    <h1>Second post</h1>
  </div>
</body>

コンテンツをサイトへ埋め込む

1つのコンテンツを埋め込むことも可能です！埋め込み方法はリストの埋め込みと同じです。

  • /src/index.html
...
<body>
  <div cms-item cms-content-type="blog" cms-content="c-N2np7l945FMzCimfKuPP">
    <h1>{%= blog_title %}</h1>
  </div>
</body>

このサンプルは、cms-item と cms-content 属性があるため、Spear は Spearly CMS から1つのコンテンツをフェッチします。

最終的に、Spear は以下の HTML を生成します。

  • /dist/index.html
...
<body>
  <div>
    <h1>Second post</h1>
  </div>
</body>

ルーティング

Spear はコンテンツごとに HTML ファイルを生成します。例えば、ブログサイトを作る場合、詳細ページを作る必要があります。

  • /src/blog/[alias].html
...
<body>
  <div cms-item cms-content-type="blog" cms-content="c-N2np7l945FMzCimfKuPP">
    <h1>{%= blog_title %}</h1>
    <section>
      {%= blog_body %}
    </section>
  </div>
</body>
...以前の例と少し異なる書き方になります。ファイル名は `[alias].html` です。この `alias` は Spearly のエイリア名かコンテンツIDとリンクしています。このエイリアスは WordPress の slug と似たものです。Spearly CMS でユニークなものです。Spear はそれぞれのコンテンツページを作ります。(もし、 [A/B/C]というコンテンツがあった場合、Spearは [`A.html`/`B.html`/`C.html`]を生成します。)もしコンテンツリストのページからこのエイリアスページを参照したい場合、 埋め込み文法である `{%= blog_#alias %}` が利用できます。詳細については、[embed basic guide](/jp/embed/basic.html)を参照してください。