本文へジャンプ

Movable Typeケーススタディ:「記事一覧を、初期状態では5件表示して、それ以降は10件ごとに<div>で囲みたい」

Movable Typeケーススタディ: 「記事一覧を、初期状態では5件表示して、それ以降は10件ごとに <div> で囲みたい」

最初は数件だけ表示しておいて、それ以降はもっと読む、moreボタンなどをクリックで表示するパターンですね。

こういった場合では、◯件ごとにタグを差し込みたいので、いまループ処理の何回目かを知る必要があります。

ムーバブルタイプでは、あらかじめ何回目かという変数が用意されているので今回はそれを使います。
もちろん自分で値を用意して、カウントアップしても構いません。

ブロックタグに利用できる予約変数

ブロックタグにはあらかじめ用意されている変数(予約変数)があります。
以下以外の変数については「ブロックタグに利用できる予約変数 @Movable Typeドキュメント」を参照してください。

__counter__

ループの回数が格納されます。<mt:If>をつかって、今ループの何回目かを判断したりします。
値は1から始まります。

__first__

ループの最初。 <mt:Entries>内であれば、<mt:EntriesHeader>と同意。

__last__

ループの最後。 <mt:Entries>内であれば、<mt:EntriesFooter>と同意。

10記事ごとに特定の処理をしたい

まずは、10記事ごとに <div> で囲う処理を考えてみます。
カウント変数(__counter__)を「10」で割って、「余り」が「0」だったときというのは、ループの11回目の時になりますね。
11個目の記事を表示する前に、 <div> タグを挟み込めばいいということになります。

以下、例。



<$mt:Include module="ブログ記事の概要"$>

コード解説

「name="__counter__" op="mod" value="10" eq="0"」
「__counter__」変数を、
「value="10"」10で、
「op=mod」 割って、
「eq="0"」余りが0だった場合
となります。

ちなみに、変数を10で割った余り(剰余)は以下のようになります。

0~15の数字  : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
10で割った余り: 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6

上記の数字の並びを見ていくと、余りが5の時がちょうど間隔が5、10、10...と見えてきますね。
なので、「name="__counter__" op="mod" value="10" eq="5"」とすれば、命題の通り5件、10件、10件と <div> で囲うことができます。

もし、5件の部分を10件とはちがうタグで囲みたいならば以下のようにすれば可能です。



<$mt:Include module="ブログ記事の概要"$>

コード解説

まずカウント1の時に、5件用のタグが始まり、
カウントが5の時に、5件用のタグを閉じて10件用のタグを始めます。
それ以降は、「10で割って5余り」の処理を適用します。


それでは、また次回「Movable Typeケーススタディ」にて。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr