MTでopモディファイアを利用して複雑なレイアウトを行う

このエントリーをはてなブックマークに追加

MTのテンプレートでopモディファイアを利用して複雑なレイアウトを行う方法です。

例えば、エントリーの一覧画面で、商品画像掲載のページ構成CSSのようなエントリー3個づつをブロックレベル要素で包んで出力することなどが可能です。

基本的な使い方

まずは簡単なサンプルでopモディファイアの利用方法を説明します。

エントリーの変わりに数字を出力するテンプレートタグは以下のようになります。

<MTsetVar name="no" value="0">
<MTEntries>
<MTSetVar name="no" value="1" op="+">
<mtgetvar name="no">
</MTEntries>

12345といった感じにエントリーの数だけ、数字をひたすら出力する記述です。

1行目でnoという変数に0を代入し、

<MTsetVar name="no" value="0">

2行目でentoryのループに入り

<MTEntries>

3行目でopモディファイアを利用してnoという変数の数値に1足してます。

<MTSetVar name="no" value="1" op="+">

4行目でnoを取り出し出力しています。

<mtgetvar name="no">

このように変数の数値をコントロールすることが可能なのがopモディファイアになります。

li要素3個ごとにul要素で包んで出力する

opモディファイアを利用してサンプルに近いhtml構造を出力します。

<MTsetVar name="no" value="0">
<MTEntries>
<MTSetVar name="no" value="1" op="+">
<mtif test="$no%3 == 1"><ul></mtif>
<li>エントリー内容</li>
<mtif test="$no%3 == 0"></ul></mtif>
</MTEntries>
<mtif test="$no%3 != 0"></ul></mtif>

このMTテンプレートが出力するは以下のようなXHTMLソースになります。

<ul>
<li>エントリー内容</li>
<li>エントリー内容</li>
<li>エントリー内容</li>
</ul>
<ul>
<li>エントリー内容</li>
<li>エントリー内容</li>
<li>エントリー内容</li>
</ul>
<ul>
<li>エントリー内容</li>
<li>エントリー内容</li>
</ul>

ポイントはmtifタグで利用しているtestモディファイアです。

testモディファイアは条件分岐にperlの条件式を利用できる機能です。

例えば4行目のmtifタグは、

<mtif test="$no%3 == 1"><ul></mtif>

変数noを3で割ったときに1余る場合はul要素を出力するという条件文になります。

つまりnoの値が1,4,7の時、ようするに1つめと4つめと7つめのli要素の前にul要素が出力されることになります。

6行目のmtifタグは、

<mtif test="$no%3 == 0"></ul></mtif>

変数noを3で割ったときに余りがない場合(3,6)に、ul要素の閉じタグがli要素のあとに出力されるようになります。

8行目のmtifタグは、

<mtif test="$no%3 != 0"></ul></mtif>

noが3の倍数で終わっていない場合は最後にul要素の閉じタグが出力されていないので、変わりにul要素を出力するという条件になります。

1行ごとにclassを振る

サンプルのように1行ごとにclassを出力する場合は以下のように記述します。

<MTsetVar name="no" value="0">
<MTEntries>
<MTSetVar name="no" value="1" op="+">
<mtif test="$no%3 == 1"><ul<mtif test="$no%6 == 1"> class="odd"</mtif>></mtif>
<li>エントリー内容</li>
<mtif test="$no%3 == 0"></ul></mtif>
</MTEntries>
<mtif test="$no%3 != 0"></ul></mtif>

出力されるXHTMLソースは以下の通り。

<ul class="odd">
<li>エントリー内容</li>
<li>エントリー内容</li>
<li>エントリー内容</li>
</ul>
<ul>
<li>エントリー内容</li>
<li>エントリー内容</li>
<li>エントリー内容</li>
</ul>
<ul class="odd">
<li>エントリー内容</li>
<li>エントリー内容</li>
</ul>

4行目のmtifタグで

<mtif test="$no%3 == 1"><ul<mtif test="$no%6 == 1"> class="odd"</mtif>></mtif>

3で割って1余る場合はulタグを出力,、6で割って1余る場合はclassも出力と記述しています。

opモディファイアを利用すれば複雑なレイアウト(例えばテーブルレイアウト)なども表現することが可能になります。

【お知らせ】
4/26に大阪で無料のMovable Typeセミナーを行います。

スポンサードリンク

«Movable Type & SEO セミナーのご案内 | メイン | MTのカスタムフィールド(複数行)の改行をサイトに反映させる»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1094
コメント

記事のリストを3分割して表示するパーツに
こちらで紹介された考え方を利用させていただきました。

横向きに配列するのは比較的簡単ですが、
縦に進む内容を3段組みさせるのはなかなか大変だったので、
この記事の考え方・方法が大変参考になりました。

リンク先のサイトマップなどで使用中です。

投稿者:kaz | 2009年2月 2日 07:25
コメントを投稿