ブログページを作成する(ブログトップ)

自身で用意したブログ用のテンプレートを使用してブログページを作成します。

今回はBootstrapのテンプレートを組み込みます。

同じテンプレートで試してみたい方は下記のリンクからダウンロードしてください。

https://getbootstrap.com/docs/3.3/examples/blog/



作成したサイトにログインして、



ページの新規作成でページの種類をブログページにして作成します。

この時、ブログページのみのサイトの場合はURIを空にすれば良いです。

プログページ以外のトップページやお問い合わせページを持つ場合はblogといったURIにすると良いです。



ページが作成できたら、投稿のリンクからテストの記事を投稿しておきます。





サンプル記事が準備できたら、HTMLテンプレートを組み込みます。



作成したブログページの詳細であればどのページにもあるテンプレートのリンクをクリックし、



ブログトップのテンプレート編集画面が表示されていることを確認した後、

ご用意したブログトップ用のHTMLを何も加工せずに貼り付けます。


更新後、ブログの確認を行うと、



貼り付けたHTMLそのままの内容が表示されます。

※画像やCSSといった外部ファイルはHTMLに記述されているパスの通りにサーバに配置してください。

※SOY CMS内で用意されているファイルマネージャからでもサーバへアップロードが可能です。

SOY CMSで利用しているelFinderでjsファイルのアップロードを許可する - saitodev.co


この段階ではエディタに貼り付けた生のHTMLをそのまま表示しているだけなので、

ブログの機能は動いていません。


これからブログの機能をHTMLに追加していきます。



はじめに繰り返し表示されている記事に該当する箇所を一つだけ探して、

下記の様に繰り返しの開始と終了にブログ用のタグを記述します。


<!-- b_block:id="entry_list" -->
<div class="blog-post">
<h2 class="blog-post-title" >Sample blog pos</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>本文</p>
</div><!-- /.blog-post -->
<!-- /b_block:id="entry_list" -->

これで記事の投稿数だけ、b_block:id="entry_list"で囲った箇所が表示されます。

※SOY CMSでCMSにテンプレートを組み込む際はコメント形式、もしくはタグの属性値として指定します。


b_block:id="entry_list"で囲っていない記事のHTMLはそのまま表示されてしまいますので、

削除しておくなり、

下記のコードのように表示の際に無視するエリアの指定をしておきましょう。


<!-- cms:ignore -->
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p> <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post --> <div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->
<!-- /cms:ignore -->

ここまで対応した上で、改めて表示を確認してみると、



投稿した記事分だけ表示されるようになりました。


続いて、



最初にサンプルとして投稿した記事の内容を記事エリアに表示できるようにします。


b_block:id="entry"で囲った箇所に更にタグを追加していきます。


<!-- b_block:id="entry_list" -->
<div class="blog-post">
<h2 class="blog-post-title" cms:id="entry_link"><!-- cms:id="title_plain" -->Sample blog post<!-- /cms:id="title_plain" --></a></h2>
<p class="blog-post-meta" cms:id="create_date" cms:format="Y/m/d">January 1, 2014 by <a href="#">Mark</a></p>
<div class="contents" cms:id="content">
<p>本文</p>
</div><!-- /.blog-post -->
</div>
<!-- /b_block:id="entry_list" --> <nav class="blog-pagination" ">
<a class="btn btn-outline-primary" href="#" b_block:id="prev_link">Older</a>
<a class="btn btn-outline-secondary" href="#" b_block:id="next_link">Newer</a>
</nav>

太字で囲った箇所が追加箇所です。

このテンプレートを保存して、ブログページの表示を確認してみると、



記事の内容が反映されています。

左側のサムネイル画像は何もしていないのでそのまま表示されています。




タグについて

SOY CMSでテンプレートをCMSに組み込む時、

生のHTMLをテンプレートエディタに貼り付けて、そのHTMLにコメントもしくはタグの属性として表示したい内容を指定します。


ブログで記事を繰り返したい箇所を<!-- b_block:id="entry_list"で囲いました。


記事タイトルを表示したい箇所を

<a href="" cms:id="entry_link"><!-- cms:id="title_plain" -->記事のタイトル<!-- /cms:id="title_plain" --></a>

のように

アンカータグでは属性値の指定のようにcms:id="entry_link"を挿入し、

記事のタイトルでは<!-- cms:id="title_plain" -->記事のタイトル<!-- /cms:id="title_plain" -->のようにHTMLのコメントタグでcms:idの前にスラッシュ無しを開始タグ、スラッシュのあるものを終了タグのように使って記事を出力する箇所を指定しました。

<!-- cms:id="title_plain" /-->とコメントの閉じる箇所の前にスラッシュをつけることで、一つのタグで表示の指定を行うことも可能です。


記事の投稿時刻も

<span cms:id="create_date" cms:format="Y/m/d">2016/09/19</span>

cms:id="create_date"で記事の投稿時刻の表示を指定して、cms:format="Y/m/d"で表示のフォーマットを指定しています。

cms:formatはPHPのdate関数で使用できるフォーマットと同じものが使用出来ます。

http://php.net/manual/ja/function.date.php


b_block:idとcms:idはたくさん種類がありますが、

それは順を追って紹介していきます。


b_block:id="entry_list"で囲った箇所で使用できるcms:idは下記のページをご覧ください。

b_block:id="entry_list"内で使用できるcms:idタグ


追記



記事一覧で本文からHTMLタグを除いて200文字を表示したい場合は、

<div class="contents" cms:id="content" cms:length="200"><p>ブログのコンテンツはここに抜粋で表示されます。<br></p></div>

cms:id="content"で本文の取得の指定をした直後にcms:length="文字数"でタグ無しの本文を取得出来ます。

Tweet Follow @saitodev
戻る

操作方法の追加リクエスト

リクエスト受け付けは終了しました

SOY CMS/Shopの読み物

SOY Shop開発秘話

開発元で働いていた時に発表したスライドです。

売りたいものがあるならば、まずはネットショップのCMSを開発しましょう from Tsuyoshi Saito