November 21, 2008 1:49 AM
繰り返し処理をするブロックタグの中でopモディファイアを使ってnの倍数毎にhogeする
Category:Movable Type > Movable Type 4.2
Tags:Movable Type MTタグ
RedLine Magazineのこの記事を読んで以来、archives.html(アーカイブインデックス・テンプレート)を5件毎に区切りを入れたいとうずうずしてたんですが、ようやくできたのでメモ。
参考にしたのはこの記事です。
MT4.1/MTOSでFizzBuzz。 (Junnama Online (Mirror))
<MTArchiveList archive_type="Individual">
<MTArchiveListHeader>
<div class="archive-content">
<ul class="archive-list">
</MTArchiveListHeader>
<li class="<mt:setvarblock name="count_5"><mt:var name="__counter__" value="5" op="%"></mt:setvarblock><mt:if name="count_5" eq="0">separator </mt:if>archive-list-item"><$MTArchiveDate format="%Y.%m.%d"$>: <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter>
</ul>
</div>
</MTArchiveListFooter>
</MTArchiveList>
わかりにくいのでポイントだけ抜き出します。
<MTArchiveList archive_type="Individual">
<li class="archive-list-item"><$MTArchiveDate format="%Y.%m.%d"$>: <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList>
MTArchiveListというアーカイブのリストを繰り返し出力するブロックタグの中でli要素が繰り返されます。このli要素には元々"archive-list-item"というclass名が付けられているのですが、今回実現したいことは「5件目ごとに新たにclass名を与えたい」というものです。区切り線を入れる目的なので"separator"というclass名を与えることにします。
そこで以下のコードを挿入します(見易さのため適宜改行・インデントを施してあります)
<mt:setvarblock name="count_5">
<mt:var name="__counter__" value="5" op="%">
</mt:setvarblock>
<mt:if name="count_5" eq="0">
separator
</mt:if>
「count_5」という名前の変数の値を、「繰り返し処理の回数を5で割った剰余(余り)」に設定します。「count_5」が「0」と等しくなるときに「separator 」(半角スペースに注意!)と入力するといった意味です。
これで実際にHTMLで出力されるコードはこういった感じになります
<li class="archive-list-item">2008.11.18: <a href="http://tadateto.net/2008/11/18/0151.html">MTPaginateで分割したテンプレートの1ページ目の1件目だけhogeする</a></li> <li class="archive-list-item">2008.11.14: <a href="http://tadateto.net/2008/11/14/1704.html">Kaspersky Internet Security 2009へのバージョンアップと、ライセンスの更新を行いました/サポートへも電話してみた</a></li> <li class="archive-list-item">2008.11.11: <a href="http://tadateto.net/2008/11/11/1703.html">[ニコニコ動画/IOSYS/東方]"チルノのパーフェクトさんすう教室"発MADの出来が中々中々</a></li> <li class="archive-list-item">2008.10.29: <a href="http://tadateto.net/2008/10/29/1521.html">iStockPhotoの規約についてSupportにメールをしてみた</a></li> <li class="separator archive-list-item">2008.10.28: <a href="http://tadateto.net/2008/10/28/0611.html">[Willcom 03/タッチパネル対応ゲーム]「ぷよぷよフィーバー PocketPC」(※注 動作保証外)</a></li>
5件目のli要素のclassに"separator"が追加されています。以下10件目、15件目、20件目、、、といった5の倍数毎に同様に追加されます
あとは.separatorにスタイルを設定してやれば目的は達成です!こういった感じに。
.separator {
padding-bottom: 0.5em;
border-bottom: 1px dotted #aaa;
margin-bottom: 0.5em;
}
上記のCSSはあくまで一例なのでそれぞれアレンジしてみてください。実際にできたページがこちらです。
ただてとてとと歩きだす: アーカイブ

Leave Your Words