先日、MovableTypeで図のような、各カテゴリーのリストが左右二段になり、連番を振ったサイトマップを作りました。
HTMLだと、このような感じです。
- 1.エントリー10
- 2.エントリー9
- 3.エントリー8
・・・
-
・・・
- 9.エントリー1
- 10.エントリー0
※数字もデザインしたかったので、olではなくulでコーディングしています。
olだった場合、連番の代わりにstart属性を与えることになります。
一般に横並びのリストの場合、普通にリスティングしてから、それぞれの<li>要素をCSSのfloatで流すのですが、それだと視線が左右に流れて、あまり見通しが良くありません。
サイトマップがトップページになるデザインだったこともあり、もっと工夫して、新しいパターンを考えたいと思ったのです。
リストを作るにあたって、以下のように考えました。
- 出力される件数を調べる
- 件数を2で割る
- 剰余(1)が出たら前半のリストの件数に加える
- 二回に分けてリスティング
- 併せて通し番号も振る
PHPを使って、前もって配列にリストを入れ込めばそんなに難しい処理ではありません。
ですが、静的ページへの出力を考えて、できるだけMovableTypeのタグだけでできないものかと思いました。
結局、できたのがこれです。
※改行と、MTIgnoreのコメントを加えています
※2009/01/08 mtIfNonZeroのtagモディファイアを間違って書いてたので修正
“><$mt:CategoryLabel$>
<$mt:CategoryLabel$>
興味がある方は、上のをコピペして、実際に試してみてください。
うーん…
MTVarだけで処理しようとすると、複雑すぎます…(´~`;
MovableTypeは4.1以降、配列が登場するので、出力結果を配列に入れ込んで__loop__で繰り返し処理する方法があったかもしれませんが、リストを半分に割ってオフセットしなければならない点は変わりません。
MTIfのtestモディファイアを使うと、Perlの式での条件分岐ができます。
それをうまく利用すれば、前半の計算はいらないかもしれません。
見た目の割に複雑なことはしていないので再構築のパフォーマンスが悪くなることはないのですが、拡張性を考えるともっと改良が必要みたいです。