本文へジャンプ

Movable Typeプラグイン「PageBute」でページ分割!!

こんにちはスズキです。 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ライフを。

Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。