「コンテンツを一覧表示する」で埋め込んだコンテンツリストをもとに、コンテンツ詳細を埋め込む手順を説明します。
[完成例]
埋め込み方法を確認する
- タグ埋め込みの方法をSpearly CMS側で確認します。
ヘッダーの「チーム名」からコンテンツを管理するチームを選択します。
- 「記事」をクリックします。
サイトに埋め込みたいコンテンツを選択します。
今回は「記事」というコンテンツタイプを埋め込んでいきます。.png)
- 「埋め込み方法」タブをクリックします。
コンテンツの埋め込み方法やオプションについてはこちらの「埋め込み方法」からも確認できます。
右側の目次を参考になさってください。.png)
共通スクリプトタグを確認する
Spearly CMSの提供するカスタムタグを用いる場合、headタグ内に「共通スクリプトタグ」を設置する必要があります。共通スクリプトタグはチームごとに発行され、「埋め込み方法」の「共通スクリプトタグの設置」から確認できます。そのためプロジェクトごとにチームを作成することをお勧めします。
- 「埋め込み方法」を開きます。
- 「埋め込みタグを使う＞共通スクリプトタグ」に共通スクリプトタグが記載されています。
使用する場合はこちらからコピーしてご利用ください。.png)
詳細ページの表示方法を確認する
<spearly-list>...</spearly-list>のようなカスタムタグを用いて表示したコンテンツリストに詳細ページへのリンクを生成し、コンテンツ詳細ページを作成します。- 「埋め込み方法」を開きます。
- 「埋め込みタグを使う＞フィールドコートの埋め込み」の下に、詳細ページへのリンクを実装する方法が書いてあります。
こちらを参考にこの章は進みます。
コンテンツを埋め込む
詳細ページを作成する
詳細ページ(article.html)を作成します。- 詳細ページとしてarticle.htmlを作成します。
今回はindex.htmlと同じ階層に作成します。
今回は記事なので「article.html」としましたが、「article」の部分は任意です。
- article.htmlにコードを書く
次のコードをコピーして貼り付けてください。<!DOCTYPE HTML> <!-- Strata by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)--> <html> <head> <title>Spearly CMS & CLOUD tutorial</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> <!-- ↓ここにscriptタグを埋め込む↓ --> <!-- ↑ここにscriptタグを埋め込む↑ --> </head> <body class="is-preload"> <!-- Header --> <header id="header"> <div class="inner"> <a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a> <h1><strong>I am Spearly</strong>, a super simple<br /> responsive site template freebie<br /> crafted by <a href="http://html5up.net">HTML5 UP</a>.</h1> </div> </header> <!-- Main --> <div id="main"> <!-- One --> <section id="two"> <h2>Recent Picture</h2> <!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ --> <!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ --> <ul class="actions"> <li><a href="index.html" class="button">戻る</a></li> </ul> </section> </div> <!-- Footer --> <footer id="footer"> <div class="inner"> <ul class="icons"> <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li> <li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li> <li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li> </ul> <ul class="copyright"> <li>© unimal_</li> <li>Design: <a href="http://html5up.net">HTML5 UP</a></li> <li>Photo: <a href="https://www.flickr.com/photos/sople112911/page1">sp9611</a></li> </ul> </div> </footer> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.poptrox.min.js"></script> <script src="assets/js/browser.min.js"></script> <script src="assets/js/breakpoints.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html> - ブラウザで確認すると次のように表示されます。
.png)
共通スクリプトタグを埋め込んであるか確認する
共通スクリプトタグをheadに埋め込まないとコンテンツが表示されないのでお気をつけください。- 埋め込みタグをhead内に挿入する。
埋め込みタグはindex.htmlのものと同じで構いません。
生成された埋め込みタグは、「埋め込み方法」から確認できます。
[article.html]
カスタムタグを埋め込む
コンテンツを単体で埋め込みます。リスト表示でなく、コンテンツ単体で表示する際は、<article-item>のようなカスタムアイテムタグを用います。カスタムアイテムタグは、「埋め込み方法」の「コンテンツの表示」から確認できます。
「埋め込み方法 > コンテンツの表示」のサンプルコード、もしくは次のコードをコピーして、article.htmlに貼り付けてください。 ...
<!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ -->
<article-item>
<h1>{%= article_title %}</h1>
<img src="{%= article_image %}" class="image fit"/>
<!-- <div style="background: url('{%= article_image %}');"></div> -->
<p>{%= article_description %}</p>
</article-item>
<!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ -->
...詳細ページへのリンクを作成する
詳細ページへのリンクはSpearly CMSのリスト埋め込みの場合、生成することができます。- 埋め込み方法を参考にindex.htmlのカスタムリストタグに属性を指定する。
今回はarticle.htmlを詳細ページとしたので、
を index.html に埋め込みます。data-item-page-path="article.html"
埋め込んだものがこちらです。
[ index.html ]... <article-list data-item-page-path="article.html"> <h3>{%= article_title %}</h3> <img src="{%= article_image %}" class="image fit"/> <!-- <div style="background: url('{%= article_image %}');"></div> --> <p>{%= article_description %}</p> </article-list> ... - imgにリンクを作成する。
SperlyCMSでは、カスタムリストタグのhref属性に{%= article_#url %}を指定することにより、
指定した詳細ページへのリンクを生成することができます。
それでは、次のようにindex.htmlのimgにリンクを設定します。# 詳細ページリンクの書き方の例 <a href="{%= article_#url %}" ></a>
実際に詳細ページへ遷移できるかブラウザで確認してください。... <article-list data-item-page-path="article.html"> <h3>{%= article_title %}</h3> <a href="{%= article_#url %}"> <img src="{%= article_image %}" alt="" class="fit image"/> </a> <!-- <div style="background: url('{%= article_image %}');"></div> --> <p>{%= article_description %}</p> </article-list> ...
これにてSpearly CMSを用いてコンテンツリストに詳細ページを埋め込むことができました。
最後にフィールドタイプを設定しようで追加したリッチテキストのコンテンツも、詳細ページのarticle.htmlに埋め込んでいきましょう。
リッチテキスト コンテンツを埋め込む
「フィールドタイプを設定しよう」でリッチテキストフィールドを追加したのを覚えていますでしょうか。埋め込み方法に生成されるサンプルコードには、追加されたコードは含まれないので、aticle.htmlに追加したフィールドデータを埋め込みます。
埋め込み方法を確認する。
今回のように新規で追加したコンテンツのカスタムタグは、「埋め込み方法」の「利用可能な埋め込みタグ」から確認できます。
追加したフィールドデータを埋め込む
このチュートリアルでは、「フィールドタイプを設定しよう」で追加した{%= article_content %}を詳細ページにのみ追加します。- 確認した埋め込み方法から、追加したコンテンツのカスタムタグを確認し、article.htmlに追加します。
チュートリアル通りに進んでいる場合、以下のようになります。
コードはこちらをコピーしても構いません。... <!-- ↓カスタムタグを用いてここにコンテンツを追加していきます。↓ --> <article-item> <h1>{%= article_title %}</h1> <img src="{%= article_image %}" class="image fit"/> <!-- <div style="background: url('{%= article_image %}');"></div> --> <p>{%= article_description %}</p> {%= article_content %} </article-item> <!-- ↑カスタムタグを用いてここにコンテンツを追加していきます。↑ --> ... - ブラウザで確認する。
これでリッチテキストを埋め込むことができました。
今回のチュートリアルでは触れていませんが、Spearly CMSにはリッチテキスト用にcssを描くこともできます。Spearly CMSで設定したcssファイルを適用するには、以下のcssファイルを読み込んでください。
リッチテキストについてはこちらで詳しく説明しております。<link rel="stylesheet" href="https://static.spearly.com/css/spearly-richtext.min.css" type="text/css">
制作したWEBサイトを実際に配信しよう
コンテンツは表示されましたか？ある程度サイトとしての機能が整ったので、このWebサイトをデプロイして公開しましょう。
Spearlyは今回作成したWEBサイトを配信することができるSpearly CLOUDというサービスも提供しております。
長かったチュートリアルも次で一段落。
「Spearly CLOUDでデプロイする」から、最速のコンテンツ配信を体験しましょう。