埋め込み方法を確認する
- タグ埋め込みの方法をSpearlyCMS側で確認します。
ヘッダーの「チーム名」からチームを選択します。
- 「記事」をクリックします。
サイトに埋め込みたいコンテンツを選択します。
今回は「記事」を埋め込んでいきます。.png)
- 「埋め込み方法」タブをクリックします。
コンテンツの埋め込み方法やオプションについても「埋め込み方法」からも確認できます。
右側の目次を参考になさってください。.png)
共通スクリプトタグを確認する
SpearlyCMSの提供するカスタムタグを用いる場合、headタグ内に「共通スクリプトタグ」を設置する必要があります。共通スクリプトタグはチームごとに発行され、「埋め込み方法」の「共通スクリプトタグの設置」から確認できます。そのためプロジェクトごとにチームを作成することをお勧めします。
- 「埋め込み方法」を開きます。
- 「埋め込みタグを使う＞共通スクリプトタグを使う」に共通スクリプトタグが記載されています。
使用する場合はこちらからコピーしてご利用ください。.png)
一覧表示方法を確認する。
<spearly-list>...</spearly-list>のようなカスタムタグを用いてコンテンツの一覧表示を埋め込みます。- 「埋め込み方法」を開きます。
- 「埋め込みタグを使う＞コンテンツリストの表示」にタグ埋め込みの記述例があります。
この生成された埋め込みタグを参考に埋め込みタグをコーディングしていきます。
コンテンツリストを埋め込む
WEBサイトにコンテンツのリストを埋め込んでいきます。適当なテキストエディタでプロジェクトを開きましょう。
TOPページのソースコードを開く
「プロジェクトを作成しよう」で作成したサンプルサイトにコンテンツを埋め込んでいきます。- index.htmlをテキストエディタで開く。
「プロジェクトを作成しよう」で作成したWEBサイトのフォルダの一番上の階層にindex.htmlがありますので、そちらを適当なテキストエディタで開いてください。
画像はVScodeで開いたものです。
- チュートリアル上の補足
ダウンロードしたサンプルサイトには、チュートリアルで書き込む、編集するところをあらかじめコメントで明示しておりますので、参考になさってください。
共通スクリプトタグをheadタグ内に埋め込む
先程確認した共通スクリプトタグをhead内に埋め込みます。共通カスタムタグはチームごとに生成されるので、SpearlyCMSの埋め込み方法を確認するのところからコピーして使用してください。
- 共通スクリプトタグをコピーする。
- 共通スクリプトタグをindex.htmlのhead内にコピーする。
- 共通スクリプトタグを<head>...</head>内に設置する。
[追加前]
[追加後]
カスタムタグを挿入して、コンテンツを表示する。
挿入場所を確認する。
2つ目のセクションにサンプルコンテンツを表示している部分があります。その部分を削除し、SpearlyCMSで置き換えていきます。
...
</ul>
</section>
<!-- Two -->
<section id="two">
<h2>Recent Picture</h2>
<!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ -->
<div class="row">
<article class="col-6 col-12-xsmall work-item">
<img src="images/thumbs/01.jpg" alt="" class="image fit"/>
<h3>Magna sed consequat tempus</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<img src="images/thumbs/02.jpg" alt="" class="image fit"/>
<h3>Ultricies lacinia interdum</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<img src="images/thumbs/03.jpg" alt="" class="image fit"/>
<h3>Tortor metus commodo</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<img src="images/thumbs/04.jpg" alt="" class="image fit"/>
<h3>Quam neque phasellus</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<img src="images/thumbs/05.jpg" alt="" class="image fit"/>
<h3>Nunc enim commodo aliquet</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<img src="images/thumbs/06.jpg" alt="" class="image fit"/>
<h3>Risus ornare lacinia</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
</div>
<!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ -->
<ul class="actions">
<li><a href="#" class="button">Full Portfolio</a></li>
</ul>
</section>
<!-- Three -->
<section id="three">
... ...
</ul>
</section>
<!-- Two -->
<section id="two">
<h2>Recent Picture</h2>
<!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ -->
<!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ -->
<ul class="actions">
<li><a href="#" class="button">Full Portfolio</a></li>
</ul>
</section>
<!-- Three -->
<section id="three">
...
カスタムタグをSpearlyCMSのサイトからコピーする。
埋め込み方法は色々ありますが、今回はリスト表示しましょう。- 「埋め込み方法を確認する」の「コンテンツリストの表示」を確認し、「フィールドコードの埋め込み」をコピーします。
- 先程削除したコンテンツ部分に貼り付けます。
... </ul> </section> <!-- Two --> <section id="two"> <h2>Recent Picture</h2> <!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ --> <article-list> <h1>{%= article_title %}</h1> <img src="{%= article_image %}" /> <div style="background: url('{%= article_image %}');"></div> <p>{%= article_description %}</p> </article-list> <!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ --> <ul class="actions"> <li><a href="#" class="button">Full Portfolio</a></li> </ul> </section> <!-- Three --> <section id="three"> ... - ビューを確認する。
これでコンテンツ追加が完了しました。
ブラウザで確認してみると、次の写真のように表示されます。
埋め込むことができましたが、見た目が崩れてしまっていますね。
Spearlyのカスタムタグに合わせてCSSを書いてありますので次項を参考にカスタムタグ内を編集しましょう。
- タグにクラスやidを当てる。
下記のコードをコピーし、カスタムタグ内を置き換えましょう。
[カスタムタグ]
[編集後]<article-list> <img src="{%= article_image %}" class="fit image"/> <h3>{%= article_title %}</h3> <p>{%= article_description %}</p> </article-list>... </ul> </section> <!-- Two --> <section id="two"> <h2>Recent Picture</h2> <!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ --> <article-list> <img src="{%= article_image %}" class="fit image"/> <h3>{%= article_title %}</h3> <p>{%= article_description %}</p> </article-list> <!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ --> <ul class="actions"> <li><a href="#" class="button">Full Portfolio</a></li> </ul> </section> <!-- Three --> <section id="three"> ... 再度サイトを表示していただくと、SpearlyCMSで保存したコンテンツがうまく表示されていると思います。.png)
次はコンテンツリストのそれぞれのコンテンツ詳細ページを作成していきましょう。
「詳細ページを作成する」へ