MovableTypeのMTVarまわりで変わったリストを作る

先日、MovableTypeで図のような、各カテゴリーのリストが左右二段になり、連番を振ったサイトマップを作りました。

HTMLだと、このような感じです。

</p> <div class="numlist"> <ul> <li><span class="num">1.</span>エントリー１０</li> <li><span class="num">2.</span>エントリー９</li> <li><span class="num">3.</span>エントリー８</li> <p>・・・ </ul> <ul> ・・・</p> <li><span class="num">9.</span>エントリー１</li> <li><span class="num">10.</span>エントリー０</li> </ul> <p>

※数字もデザインしたかったので、olではなくulでコーディングしています。
olだった場合、連番の代わりにstart属性を与えることになります。

一般に横並びのリストの場合、普通にリスティングしてから、それぞれの<li>要素をCSSのfloatで流すのですが、それだと視線が左右に流れて、あまり見通しが良くありません。
サイトマップがトップページになるデザインだったこともあり、もっと工夫して、新しいパターンを考えたいと思ったのです。

リストを作るにあたって、以下のように考えました。

1. 出力される件数を調べる
2. 件数を２で割る
3. 剰余（１）が出たら前半のリストの件数に加える
4. 二回に分けてリスティング
5. 併せて通し番号も振る

PHPを使って、前もって配列にリストを入れ込めばそんなに難しい処理ではありません。
ですが、静的ページへの出力を考えて、できるだけMovableTypeのタグだけでできないものかと思いました。

結局、できたのがこれです。

※改行と、MTIgnoreのコメントを加えています
※2009/01/08 mtIfNonZeroのtagモディファイアを間違って書いてたので修正

</p> <div class="numlist"> <p><mt:IfArchiveTypeEnabled archive_type="Category"><br /> <mt:TopLevelCategories></p> <p><mt:IfNonZero tag="CategoryCount"></p> <h3 id="cat-<$mt:CategoryID$>“><a href="<$mt:CategoryArchiveLink$>“><$mt:CategoryLabel$></a></h3> <p><mt:Ignore>### 出力されるエントリーの件数を取得</mt:Ignore><br /> <mt:Entries sort_order="ascend"><br /> <mt:SetVarBlock name="index_cnt"><$mt:EntriesCount$></mt:SetVarBlock><br /> </mt:Entries></p> <p><mt:Ignore>### 何件目で左右に分割するか計算して変数に代入</mt:Ignore></p> <p><mt:Ignore>### 総件数を２で割った剰余を出す</mt:Ignore><br /> <mt:SetVarBlock name="index_amari"><$mt:GetVar name="index_cnt" op="%" value="2"$></mt:SetVarBlock></p> <p><mt:Ignore>### 総件数から剰余を引く→2の倍数になる</mt:Ignore><br /> <mt:SetVarBlock name="index_half"><$mt:GetVar name="index_cnt" op="-" value="$index_amari"$></mt:SetVarBlock></p> <p><mt:Ignore>### 上記結果を２で割る</mt:Ignore><br /> <mt:SetVarBlock name="index_half"><$mt:GetVar name="index_half" op="/" value="2"$></mt:SetVarBlock></p> <p><mt:Ignore>### 上記結果に剰余（1か0）を加えて前半の件数とする</mt:Ignore><br /> <mt:SetVarBlock name="index_mae"><$mt:GetVar name="index_half" op="+" value="$index_amari"$></mt:SetVarBlock></p> <p><mt:Ignore>### 総件数から前半を引いて後半の件数を取得</mt:Ignore><br /> <mt:SetVarBlock name="index_ushiro"><$mt:GetVar name="index_cnt" op="-" value="$index_mae"$></mt:SetVarBlock></p> <p><mt:Ignore>### 左半分（前半）のリストを表示する</mt:Ignore><br /> <mt:SetVar name="index_num" value="0"></p> <ul class="children"> <mt:Entries sort_order="ascend" limit="$index_mae"><br /> <mt:SetVarBlock name="index_num"><$mt:GetVar name="index_num" op="++"$></mt:SetVarBlock></p> <li id="entry-<$mt:EntryID pad="1"$>“><span class="num"><$mt:GetVar name="index_num"$>. </span><a href="<$mt:EntryPermaLink$>“><$mt:EntryTitle encode_html="1"$></a></li> <p></mt:Entries> </ul> <p><mt:Ignore>### 総件数が2件以上なら右半分（後半）のリストを表示する</mt:Ignore><br /> <mt:Ignore>### その際、offsetモディファイアで前半分をカットする</mt:Ignore><br /> <mt:If name="index_ushiro" ge="1"></p> <ul class="children"> <mt:Entries sort_order="ascend" limit="$index_ushiro" offset="$index_mae"><br /> <mt:SetVarBlock name="index_num"><$mt:GetVar name="index_num" op="++"$></mt:SetVarBlock></p> <li id="entry-<$mt:EntryID pad="1"$>“><span class="num"><$mt:GetVar name="index_num"$>. </span><a href="<$mt:EntryPermaLink$>“><$mt:EntryTitle encode_html="1"$></a></li> <p></mt:Entries> </ul> <p></mt:If></p> <p><mt:Ignore>### 総件数が0件ならカテゴリータイトルだけを出力する</mt:Ignore><br /> <mt:Else></p> <h3 id="cat-<$mt:CategoryID$>“><span class="empty"><$mt:CategoryLabel$></span></h3> <p></mt:IfNonZero><br /> <mt:SubCatsRecurse></p> <p></mt:TopLevelCategories><br /> </mt:IfArchiveTypeEnabled></p> <p><!-- /.numlist--></div> <p>

興味がある方は、上のをコピペして、実際に試してみてください。

うーん…
MTVarだけで処理しようとすると、複雑すぎます…（´～｀；

MovableTypeは4.1以降、配列が登場するので、出力結果を配列に入れ込んで__loop__で繰り返し処理する方法があったかもしれませんが、リストを半分に割ってオフセットしなければならない点は変わりません。

MTIfのtestモディファイアを使うと、Perlの式での条件分岐ができます。
それをうまく利用すれば、前半の計算はいらないかもしれません。

見た目の割に複雑なことはしていないので再構築のパフォーマンスが悪くなることはないのですが、拡張性を考えるともっと改良が必要みたいです。