linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

DynamicMTMLをつかってページ分割をしてみる

みなさん、こんにちは、まーしーです。
Wimbledonはフェデラーの優勝でしたね。マレーは残念でした。。。
今月末にはオリンピックがありますが、そこでは誰が優勝するんでしょうね??

さて、先日の勉強会で、DynamicMTMLを使ったページ分割の話を少し聞いたので、試しに作ってみました。

表示例

全件

まず、全件というか20件を表示させた状態がこんな感じです。

120709-01.png

とりあえず3件ずつに分けてみます。

1ページ目

120709-02.png

2ページ目

120709-03.jpg

20件のエントリーを3つずつなので7ページになってますね。

テンプレート

ではテンプレートを考えていきます。
(DynamicMTMLがインストールされてる必要があります)

もうすこし上手い方法がありそうなきがしますが、全体はこんなかんじでしょうか。

全体のテンプレート

<MTDynamicMTML>
<mt:SetVarBlock name="page"><MTQuery key="page" escape="html"></mt:SetVarBlock>
<mt:If name="page" eq=""><mt:SetVar name="page" value="1"></mt:If>
<mt:SetVar name="limit" value="3">
<mt:SetVarBlock name="offset"><mt:SetVar name="page" op="-" value="1"><mt:GetVar name="page" op="*" value="$limit"></mt:SetVarBlock>
<mt:Entries limit="$limit" offset="$offset"><MTEntriesHeader><h2>page分割</h2><ul></MTEntriesHeader>
<li><mt:EntryTitle></li>
<MTEntriesFooter></ul></MTEntriesFooter></mt:Entries>
<mt:SetVar name="total" value="20">
<mt:SetVarBlock name="pager"><mt:GetVar name="total" op="/" value="$limit"></mt:SetVarBlock>
<mt:SetVarBlock name="pager2"><mt:GetVar name="total" op="%" value="$limit"></mt:SetVarBlock>
<mt:If name="pager2" ne="0"><mt:SetVar name="pager" op="++"></mt:If>
<p><a href="./test.html">1</a><mt:for from="1" to="$pager"><mt:Unless name="__first__"> | <a href="./test.html?page=<mt:GetVar name="__counter__">"><mt:GetVar name="__counter__"></a></mt:Unless></mt:for></p>
</MTDynamicMTML>

全体を<MTDynamicMTML>でくくっておきます。

次に表示させるための計算をしていきます。

page数の取得と1ページ当たりの表示数を指定する

今回は「test.html?page=2」といったかんじで、pageのパラメータの値で何ページ目かを指定します。

<mt:SetVarBlock name="page"><MTQuery key="page" escape="html"></mt:SetVarBlock>
<mt:If name="page" eq=""><mt:SetVar name="page" value="1"></mt:If>
<mt:SetVar name="limit" value="3">
<mt:SetVarBlock name="offset"><mt:SetVar name="page" op="-" value="1"><mt:GetVar name="page" op="*" value="$limit"></mt:SetVarBlock>

まず、MTQueryでpageの値を受け取って、変数pageに入れます。
1ページ目は「test.html」となっている可能性があるので、このMTQueryで値をとれない場合は1ページ目なので、pageが空の場合1をセットします。
(ここは他の条件が色々ありそうです。数字以外が入ったときとか予想外の数字がはいるとか。。。)

あと、limitに1ページあたりの表示件数を指定します。

1ページ目は1〜3番目が表示されます。2ページ目は3つ分が表示されず、4〜6番目が表示されます。
なのでpageの値から1を引いて1ページ当たりの表示件数をかけたものがoffsetされます。
この値を変数offsetに入れておきます。

指定した件数毎に表示させる

実際に表示させる部分を見てみます。

<mt:Entries limit="$limit" offset="$offset"><MTEntriesHeader><h2>page分割</h2><ul></MTEntriesHeader>
<li><mt:EntryTitle></li>
<MTEntriesFooter></ul></MTEntriesFooter></mt:Entries>

mt:Entriesのlimitモディファイアにlimitの値を。offsetモディファイアにoffsetの値をセットします。

これだけでいいのでMTQueryの力は偉大ですね。。。

ページリンク部分の表示

次に、各ページへのリンク部分を見ていきます。

<mt:SetVar name="total" value="20">
<mt:SetVarBlock name="pager"><mt:GetVar name="total" op="/" value="$limit"></mt:SetVarBlock>
<mt:SetVarBlock name="pager2"><mt:GetVar name="total" op="%" value="$limit"></mt:SetVarBlock>
<mt:If name="pager2" ne="0"><mt:SetVar name="pager" op="++"></mt:If>
<p><a href="./test.html">1</a><mt:for from="1" to="$pager"><mt:Unless name="__first__"> | <a href="./test.html?page=<mt:GetVar name="__counter__">"><mt:GetVar name="__counter__"></a></mt:Unless></mt:for></p>

ひとまず、20件の中から表示するので、変数totalに20をセットします。
実際に使う場合は<$MTBlogEntryCount$>の値などを使う感じになるでしょう。

変数totalの値を1ページ当たりの件数で割って総頁数を出します。ひとまずpagerにセットしておきます。
totalをlimitで割って割り切れればそのまま頁数となるのですが、割り切れない場合もあります。
変数pager2にひとまず剰余をセットしておきます。pager2が0じゃないときはもう1ページ余計にあることになるので、pagerに1を足しておきます。

それらが揃ったところで、各ページへのリンクを表示させます。

1ページ目は必ず表示させる事にしておきます。2ページ目からの表示をmt:forを使って考えます。

mt:forでは1ページ目から変数pagerに入ってる頁数分繰り返します。
ただ、1ページ目は表示させているので、__first__以外ということでセットしています。
forのなかでの繰り返し分については__counter__で取得出来るので「?page=」 の部分やリンクテキストの部分に使用しています。
ここはfromを2からにしてpagerの値が2以上の時のみ、みたいな判定の方がいいのかもしれないです

ということでザックリこんなかんじで作ってみたのですが、まだ相当無駄がありそうです。
(あとは考えられる条件の漏れとか)
リンクを作る部分とかもっとスマートに計算できそうな気がします。

スタティックにページ分割させてもいいですが、こんな形で動的にページ分割させるのも良さそうですね。
DynamicMTMLはまだまだ奥が深そうです。。。