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はあくまで一例なのでそれぞれアレンジしてみてください。実際にできたページがこちらです。
ただてとてとと歩きだす: アーカイブ

Tweetbacks

No Tweets Found About This Entry.

Leave Your Words




Trackback URL