Movable Type で n 個ずつ div で囲む場合の書き方
目次
なんかいいタイトルが思いつかなかったのですが、要するに以下のような場合を想定したテンプレートの書き方です。
hoge
hoge
hoge
hoge
hoge
hoge
この場合だと2個ずつの div を div.row で囲んでますね。Twitter Bootstrap を使ってるとちょくちょく直面したりするかも？
ここでは mt:Entries を例にしてやってみたいと思います。
完成したテンプレート
完成したテンプレートは以下のとおりです。変数 counter は __counter__ を使えばいいのですが、汎用性を考えてこうしてあります。
解説
上から順に簡単に解説していきます。
はじめに、3つの変数を初期化しています。
- div_cond : div の状態を保存。開始タグを出力したら open、終了タグを出力したら close をセットする。
- counter : カウンター。1からはじめる。
- separate_count : 何個ずつ div で包むか。この例の場合は 2 個ずつだから 2。
次に、mt:Entries で記事を取り出して行きます。
counter を separate_count 割った余りを、変数 modulo にセットします。
変数 modulo（余り）が 1、つまり、
- 1 ÷ 2 = 0 余り 1
- 3 ÷ 2 = 1 余り 1
- 5 ÷ 2 = 2 余り 1
など n 個ずつの開始のループに該当するときは の開始タグを出力します。また、このときに div_cond に open をセットして開始タグが出力されたことを記録します。そして、毎回出力する中身を書きます。
今度は、変数 modulo（余り）が 0、つまり、
- 2 ÷ 2 = 1 余り 0
- 4 ÷ 2 = 2 余り 0
- 6 ÷ 2 = 3 余り 0
など n 個ずつの終わりのループに該当するときは
の終了タグを出力します。また、このときに div_cond に close をセットして終了タグが出力されたことを記録します。
さらに、mt:Entries のループの最後に div_cond が open のまま、つまり div の開始タグが出力されたのに終了タグが出力されていない状態のときは、div の終了タグを出力します。これは、最後の div.row の中身が 1 つだけなど半端なときに発生します。
カウンター変数を 1 ずつ増やして（インクリメントして）いきます。
以上です。
この考え方を使えば、mt:Entries 部分を mt:Loop にしたり mt:SubCategories にしたりと色々な場面で使えますので、是非お試しください〜。
