Movable Type で n 個ずつ div で囲む場合の書き方

なんかいいタイトルが思いつかなかったのですが、要するに以下のような場合を想定したテンプレートの書き方です。

<div class="row">
    <div>hoge</div>
    <div>hoge</div>
</div>
<div class="row"> <div>hoge</div> <div>hoge</div> </div>
<div class="row"> <div>hoge</div> <div>hoge</div> </div>

この場合だと2個ずつの div を div.row で囲んでますね。Twitter Bootstrap を使ってるとちょくちょく直面したりするかも?

ここでは mt:Entries を例にしてやってみたいと思います。

完成したテンプレート

完成したテンプレートは以下のとおりです。変数 counter は __counter__ を使えばいいのですが、汎用性を考えてこうしてあります。

<mt:SetVar name="div_cond" value="close">
<mt:SetVar name="counter" value="1">
<mt:SetVar name="separate_count" value="2">
<mt:Entries>
<mt:Var name="counter" op="%" value="$separate_count" setvar="modulo">
<mt:If name="modulo" eq="1">
<mt:SetVar name="div_cond" value="open">
<div class="row">
</mt:If>
  <div class="item">
    <h2><mt:EntryTitle escape="html"></h2>
    <p><mt:EntryBody></p>
  </div>
<mt:If name="modulo" eq="0">
<mt:SetVar name="div_cond" value="close">
</div>
</mt:If>
<mt:EntriesFooter>
<mt:If name="div_cond" eq="open">
</div>
</mt:If>
</mt:EntriesFooter>
<mt:SetVar name="counter" op="++">
</mt:Entries>

解説

上から順に簡単に解説していきます。

<mt:SetVar name="div_cond" value="close">
<mt:SetVar name="counter" value="1">
<mt:SetVar name="separate_count" value="2">

はじめに、3つの変数を初期化しています。

  • div_cond : div の状態を保存。開始タグを出力したら open、終了タグを出力したら close をセットする。
  • counter : カウンター。1からはじめる。
  • separate_count : 何個ずつ div で包むか。この例の場合は 2 個ずつだから 2。

次に、mt:Entries で記事を取り出して行きます。

<mt:Var name="counter" op="%" value="$separate_count" setvar="modulo">

counter を separate_count 割った余りを、変数 modulo にセットします。

<mt:If name="modulo" eq="1">
<mt:SetVar name="div_cond" value="open">
<div class="row">
</mt:If>

変数 modulo(余り)が 1、つまり、

  • 1 ÷ 2 = 0 余り 1
  • 3 ÷ 2 = 1 余り 1
  • 5 ÷ 2 = 2 余り 1

など n 個ずつの開始のループに該当するときは <div class="row"> の開始タグを出力します。また、このときに div_cond に open をセットして開始タグが出力されたことを記録します。

そして、毎回出力する中身を書きます。

  <div class="item">
    <h2><mt:EntryTitle escape="html"></h2>
    <p><mt:EntryBody></p>
  </div>

今度は、変数 modulo(余り)が 0、つまり、

  • 2 ÷ 2 = 1 余り 0
  • 4 ÷ 2 = 2 余り 0
  • 6 ÷ 2 = 3 余り 0

など n 個ずつの終わりのループに該当するときは </div> の終了タグを出力します。また、このときに div_cond に close をセットして終了タグが出力されたことを記録します。

<mt:EntriesFooter>
<mt:If name="div_cond" eq="open">
</div>
</mt:If>
</mt:EntriesFooter>

さらに、mt:Entries のループの最後に div_cond が open のまま、つまり div の開始タグが出力されたのに終了タグが出力されていない状態のときは、div の終了タグを出力します。これは、最後の div.row の中身が 1 つだけなど半端なときに発生します。

<mt:SetVar name="counter" op="++">

カウンター変数を 1 ずつ増やして(インクリメントして)いきます。

以上です。

この考え方を使えば、mt:Entries 部分を mt:Loop にしたり mt:SubCategories にしたりと色々な場面で使えますので、是非お試しください〜。

  • このエントリーをはてなブックマークに追加
Just a second...