MD-Blog_Web System

こんにちはスズキです。 MT使ってますか？？

今週末は、六本木で「MTDDC Meetup TOKYO 2014」がありますね。
たのしみですね～～。

さて、前回に引き続きページ分割ですが、
PowerCMSのプラグイン「Pager」ではなく、今回はSkyarc社のPageButeを使用します。

こちらのプラグインはオプションも豊富で、小回りが効いて使いやすく、PowerCMSではないノーマルのMTでサイト構築する際にはよく使われていますね。

最近は、記事一覧を非同期で追加読み込みする、そんな一覧系ページの出力をMTで管理するケースが多かったりします。
その際は、まるっと一覧ページ全体は出力せず、繰り返し部分だけをJSON形式などで書き出して、JavaScriptで読み込み処理を行います。

それでは、「繰り返し部分だけ」をアーカイブテンプレートで分割出力してみましょう。

<mt:entries>を分割する

アーカイブテンプレートに記事一覧を出力します。
下記の例だと5件（count="5"）ごとにページ部を分割、abs2rel="1"は内部のリンクを相対にします。
繰り返し出力される部分は、モジュールテンプレート<$mt:Include module="[mod]繰り返し部分"$>にまとめました。

<mt:PageContents count="5" abs2rel="1">
<mt:Entries>
<$mt:Include module="[mod]繰り返し部分"$>
<$mt:PageSeparator$>
</mt:Entries>
</mt:PageContents>

<mt:Ignore><!-- 記事が1件もなかった場合 --></mt:Ignore>
<mt:PageEmpty><p>記事は未登録です</p></mt:PageEmpty>

ちなみに、<$mt:PageSeparator$>の手前で改行しないと想定した結果になりません。

では、これをJSON形式にしてみましょう。

JSON形式で「繰り返し部分だけ」を出力してみる

前述のソースコードにあるモジュールテンプレート<$mt:Include module="[mod]繰り返し部分"$>の中身を、JSON形式の出力内容に差し替えれば、非同期でページングする際の読み込み用ファイルにもなります。

現在のページ（mt:PageCount）と、最大のページ数（mt:PageCount）を取得します。
その2つの変数を使って、次のページが有るかどうかを判別しています。

<mt:PageContents count="5" abs2rel="1">
<$mt:PageMaxCount setvar="TotalNum"$>
<$mt:PageCount setvar="CurrentNum"$>
<mt:SetVarBlock name="hasNext"><mt:If name="TotalNum" eq="$CurrentNum">false<mt:Else>true</mt:Else></mt:If></mt:SetVarBlock>

<mt:PageContentsHeader>
{
  "data": {
    "totalPage": "<$mt:Var name="TotalNum"$>",
    "currentPage": "<$mt:Var name="CurrentNum"$>",
    "hasNext": "<$mt:Var name="hasNext"$>",
    "unit_list": {
      "unit": [
</mt:PageContentsHeader>

<mt:Entries>
    <mt:If name="__counter__" ne="1">,</mt:If>{
     "title": "<$mt:EntryTitle remove_html="1" escape="js" replace="\'","'"$>",
     "lead": "<$mt:EntryExcerpt remove_html="1" escape="js" replace="\'","'"$>",
     "time": "<$mt:EntryDate format="%Y.%m.%d"$>",
     "category": "<$mt:EntryCategory escape="js" replace="\'","'"$>"
    }
<$mt:PageSeparator$>
</mt:Entries>

<mt:PageContentsFooter>
     ]
    }
  }
}
</mt:PageContentsFooter>
</mt:PageContents>

ページネーションを設置する

一方で、JSON形式ではなく、通常の一覧ページを出力するときに必要となるのが、ページ間を移動するナビゲーションです。
<mt:Pagination>～</mt:Pagination>で、作成します。
現在のページの数字はリンクなし、それ以外の数字にはリンクを付けるために、<mt:IfPaginationCurrent>～</mt:IfPaginationCurrent>で分岐処理をします。

<mt:Pagination>
<mt:PaginationHeader>
<div class="pagingNav">
<mt:IfPaginationPrev><a href="<$mt:PaginationPrev$>" class="prevLink"><span>< Prev Page</span></a></mt:IfPaginationPrev>
</mt:PaginationHeader>

<mt:IfPaginationCurrent>
<mt:Ignore><!-- 現在のページ --></mt:Ignore>
<strong class="curPage"><span><$mt:PaginationLink element="number"$></span></strong>
<mt:Else>
<mt:Ignore><!-- リンクあり --></mt:Ignore>
<a href="<$mt:PaginationLink$>" class="linkPage"><span><$mt:PaginationLink element="number"$></span></a>
</mt:Else>
</mt:IfPaginationCurrent>

<mt:PaginationFooter>
<mt:IfPaginationNext><a href="<$mt:PaginationNext$>" class="nextLink"><span>Next Page ></span></a></mt:IfPaginationNext>
</div>
</mt:PaginationFooter>
</mt:Pagination>

たったこれだけで、簡単にページを分割することができます。

あまり大量に記事がある場合は、<mt:Entries>にlimit="200"など付けて制限したほうがいいでしょう。
再構築に時間がかかりますしね。

それでは、ステキなMTライフを。