SOY CMS/Shopでblock:id="***"で囲った箇所は指定した分だけデータが表示される。
ブログの記事一覧や商品一覧ページなどがそうで、
記事詳細や商品詳細ページは表示件数が1で決まっている。
それでは早速本題で、
表題の通り、SOY CMSのユーザから記事の繰り返し表示で、一件目とそれ以外で表示の仕方を変えたいとの要望がありました。
今回はそれに応えるためのコードの書き方を紹介します。
この要望はSOY CMSの正式な機能ではないのですが、SOY CMSのブロックの表示の際に利用しているSOY2HTMLのHTMLListというクラスの機能を活用します。
SOY CMSのブログで記事表示順番号（通し番号）を出力させたい
サンプルとして、
こんな感じで、
一件目の記事のサムネイルのみ200pxにして、
二件目移行は150pxにするコードを書きます。
表示速度も加味して、隠し機能のサーバ側で画像圧縮の指定を出し分けるという対応で書きます。
SOY CMSの画像のリサイズでJPEGのロスレス圧縮を追加した
これらを踏まえた上で書いたコードは下記の通り。
<!-- b_block:id="entry_list" --> <div> <header> <h2 cms:id="title"></h2> <div class="post-info"> <time cms:id="create_date" cms:format="Y-m-d">March 26, 2012</time> <!-- cms:id="category_list" --> <a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a> <!-- /cms:id="category_list" --> </div> </header><!--.header--> <div class="content"> <a cms:id="entry_link"> <!-- soy:id="at_first" --> <div class="thumbnail" cms:id="thumbnail_path_visible"><img src="https://saitodev.co/site/im.php?src=<!-- cms:id="thumbnail_path" /-->&width=200"></div></a> <!-- /soy:id="at_first" --> <!-- soy:id="not_first" --> <div class="thumbnail" cms:id="thumbnail_path_visible"><img src="https://saitodev.co/site/im.php?src=<!-- cms:id="thumbnail_path" /-->&width=150"></div></a> <!-- /soy:id="not_first" --> <p cms:id="content" cms:length="250">Content</p> <p class="more"><a cms:id="entry_link*">Read More…</a></p> </div> </div> <!-- /b_block:id="entry_list" -->
ブロック内で繰り返し表示をするとき、
soy:id="at_firstとsoy:id="not_first"を追加して200pxと150pxの画像の出し分けを行っています。
タグの説明ですが、
at_firstで囲った箇所は一番目の記事(soy:id="index"で1と表示される記事)でのみ表示され、
not_firstで囲った箇所は二番目移行の記事(indexが1より大きい記事)で表示されます。
このタグをうまく使うことで面白い表現ができるようになりますが、
それはそのうち書くことにしよう。
追記
cms:id="content"の後にcms:length="250"というSOY CMSの属性がありますが、
これはcms:id="content"で出力される本文からHTMLのタグを取り除いた後に250文字にして表示するという機能です。
