「Spearly CMSのコンテンツを単体で埋め込む方法まとめ」
目的
Spearly CMSのチュートリアルを一通りこなして、自分のサイトを作ってみました。
しかし、 一覧表示ではなく特定の記事のみを埋め込む部分の記載がわかりづらくつまづいたので、ここに詳細な記録を残したいと思います。
※この内容は、チュートリアルではなく、各コンテンツの埋め込み方法に書いてあります
0. Spearlyとは？
いい感じのヘッドレスCMS
カスタムタグという機能で、記事や画像をサイトに簡単に埋め込むことができます。
1. Spearly CMSのコンテンツを埋め込む準備
Spearly CMSのカスタムタグを書き込んでいく、ソースファイルを用意します。
- index.htmlを用意する
- 埋め込み方法を確認する(共通スクリプトタグ)
- 共通スクリプトタグをheadに挿入する
- 埋め込み方法を確認する(カスタム)
詳しくは、こちらの手順を確認してみてください
2. コンテンツ単体埋め込みの基本の方法
特定のコンテンツを埋め込む際にはコンテンツIDを指定することで解決することができます。
上記の画像の矢印のようにdeta-idとdeta-lock=`true’を指定することで特定のコンテンツを埋
め込んだ状態になります。
コンテンツ idはコンテンツ一覧ページで確認できます
3. 異なるコンテンツタイプの単体埋め込み
同一ページでも、記事とプロフィールなど、異なるコンテンツタイプを埋め込む時は、特段何もせずそれぞれのコンテンツを埋め込むことができます。
それはコンテンツタイプidが違うため、そもそもカスタムタグが違うためです。
< article-item > , < profile-item >
4. 同一ページに同一のコンテンツタイプを複数埋め込む方法
2の方法で同一ページに同一のコンテンツタイプを複数埋め込もうとすると、Spearlyがうまく読み取ってくれないため、サフィックスというものをつけて、カスタムタグを書き換える必要があります。
やり方としてはカスタムタグの後ろに任意の名称を追加します。（例：first, second…など）
<{コンテンツタイプID}-item> → <{コンテンツタイプID}-item-{サフィックス}>
これによって同じコンテンツタイプでも複数埋め込めます。
5. 記事など、コンテンツの一覧から、コンテンツ詳細を作成する場合
チュートリアルをするとわかりますが、一覧からコンテンツ詳細へのリンクを生成する際、2のような、id指定は行いません。
リスト表示を行う時にidを指定する必要がないのは、URL内のidを読み込む処理を行っているからです。
< article-item data-id =””>
ではなくて
< article-item >
画像で示したサイトの詳細はこちら
まとめ
単にリスト表示するだけでなく、記事一つ一つの詳細ページへの埋め込みも少ない手順で実行できました。今後は他の埋め込み方法についても記事を書いていきたいと思います。
お疲れ様でした。
次はフォームも埋め込んでみたいと思います。
Discussion