Movable TypeでPagenateを使ってページ分割してみる

過去のblogをインポートしたときに、はてなとかso-netとかカテゴリをつけていたのですが大量に記事があるのでカテゴリで開いたときに大変なことになっていました。そこでページ分割のPlug-inであるPaginateを入れてみます。

http://www.nonplus.net/software/mt/MTPaginate.htm
上の方にあるDownloadをクリック。

ライセンスは個人利用は無料、商用利用にはお金がかかるので注意。

This plugin is free for personal use. For commercial use a $20 license is required.

MTPaginate-1.28.zipがDLをして解凍してできた

mt-static/plugins/MTPaginate
plugins/MTPaginate

を自分のmovable typeのフォルダにFTPなどでアップします。

<MTPaginate>
   <h1><$MTBlogName$></h1>
   <MTPaginateIfMultiplePages>
      <div><$MTPaginateNavigator style="popup"$></div>
   </MTPaginateIfMultiplePages>
   <MTPaginateContent max_bytes="1000">
     <MTEntries lastn="20">
      <p>
         <MTPaginateSectionID><$MTEntryID><MTPaginateSectionID/>
         <b><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></b>
         <$MTEntryExcerpt$>
      </p>
      <MTPaginateStaticBlock section="3,8,13">
            [ Section for displaying ads ]
      </MTPaginateStaticBlock>
      <$MTPaginateSectionBreak$>
      </MTEntries>
   </MTPaginateContent>
</MTPaginate>

本家のサイトでは上記のようなサンプルがありますが、今回は小粋空間さんの以下のサンプルを参考にさせていただきました。

http://www.koikikukan.com/archives/2005/11/13-235207.php

<MTPaginate>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>">&#65308;</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">&#65310;</a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="5">
<MTEntries lastn="20">
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
</MTPaginate>

でもそのまま入れるのはつまらないので、仕様をみながらページの表示やスタイルを変えてみました。

<MTPaginate>
  <MTPaginateContent max_sections="7">
    <MTEntries days="30">

<$MTPaginateSectionBreak$>
 </MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
  <div class="paginate-bottom">
<MTPaginateIfPreviousPage_>
  <a href="<$MTPaginatePreviousPageLink$>"><img src="<$MTBlogURL$>img/left-blue.gif" width="14" height="14" class="paginate-page-prev"/></a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" 
format="&lt;span class=paginate-page-index&gt;%d&lt;/span&gt;"
format_current="&lt;span class=paginate-page-current&gt;%d&lt;/span&gt;" 
format_all="&lt;span class=paginate-page-all&gt;All&lt;/span&gt;" place_all="after"
format_all_current="&lt;span class=paginate-page-current&gt;All&lt;/span&gt;" 
separator="|">
  <MTPaginateIfNextPage_>
  <a href="<$MTPaginateNextPageLink$>"><img src="<$MTBlogURL$>img/right-blue.gif" width="14" height="14" class="paginate-page-next"/></a>
</MTPaginateIfNextPage_>
<span>(最近一ヶ月の日記)</span>
  </div>
</MTPaginateIfMultiplePages>
</MTPaginate>

上記をMTEntryesの前後に入れます。

前のページ、次のページを画像のリンクで表示し、各ページの表示にスタイルシートを指定。セパレートも” | “とスペースを使っていましたががただの”|”だけにしてmarginはスタイルシートで指定するようにしていました。

.paginate-bottom { text-align: right; vertical-align: middle; }
span.paginate-page-index { padding: 0 2px 0 2px; font-size: 14px; }
span.paginate-page-current { font-weight: bold; font-size: 16px;}
span.paginate-page-all { padding: 0 2px 0 2px; font-size: 14px; }
img.paginate-page-prev { padding: 0 2px 0 2px; }
img.paginate-page-next { padding: 0 2px 0 2px; }