ページを分割するプラグイン「PageBute」を使ってみる

Movable Typeでページを分割するプラグインの「PageBute」を使ってみます。
Movable Typeのバージョンは7、PageButeのバージョンは3.5.8を使用しています。

設定方法

こちらのサイトからPageButeをダウンロードします。
ダウンロードしたファイルを解凍後、PageButeのフォルダをpluginsディレクトリにアップロードします。

今回はMtEntriesに対して使用して、記事一覧をページ分割してみます。
MtEntriesをMtPageContentsで囲います。

<mt:PageContents count="3">
  <mt:SetVars>totalEntry=<$mt:BlogEntryCount$></mt:SetVars>
  <mt:Entries lastn="$totalEntry">
    <div class="article"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></div>
    <$mt:PageSeparator$>
  </mt:Entries>
</mt:PageContents>

MtPageContentsのcountの値で区切る数を指定していて、この場合は3件毎にページを分割するようになります。

次にページャー部分です。
MtPageContentsの後に以下を記述します。

<mt:IfPageFirst>
  <span><$mt:PageFirst delim="先頭"$></span>
</mt:IfPageFirst>
<mt:IfPageBefore>
  <span><$mt:PageBefore delim="前の3件"$></span>
</mt:IfPageBefore>
<$mt:PageLists$>
<mt:IfPageAfter>
  <span><$mt:PageAfter delim="次の3件"$></span>
</mt:IfPageAfter>
<mt:IfPageLast>
  <span><$mt:PageLast delim="最後"$></span>
</mt:IfPageLast>
<span class="current"><$mt:PageCount$></span> / <span class="total"><$mt:PageMaxCount$></span>

詳しくはプラグインをダウンロードしたページに使い方が載っていますので、そちらを参照ください。
再構築すると、以下のようなページが生成できました。

1ページ目(index.html)

<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>

<span class="current_page">1</span>&nbsp;
<a href="https://XXX/index_2.html" class="link_page">2</a>&nbsp;
<a href="https://XXX/index_3.html" class="link_page">3</a>&nbsp;
<a href="https://XXX/index_4.html" class="link_page">4</a>
<span><a href="https://XXX/index_2.html" class="link_next">次の3件</a></span>
<span><a href="https://XXX/index_4.html" class="link_last">最後</a></span>
<span class="current">1</span> / <span class="total">4</span>

2ページ目(index_2.html)

<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>

<span><a href="https://XXX/index.html" class="link_first">先頭</a></span>
<span><a href="https://XXX/index.html" class="link_before">前の3件</a></span>
<a href="https://XXX/index.html" class="link_page">1</a>&nbsp;
<span class="current_page">2</span>&nbsp;
<a href="https://XXX/index_3.html" class="link_page">3</a>&nbsp;
<a href="https://XXX/index_4.html" class="link_page">4</a>
<span><a href="https://XXX/index_3.html" class="link_next">次の3件</a></span>
<span><a href="https://XXX/index_4.html" class="link_last">最後</a></span>
<span class="current">2</span> / <span class="total">4</span>

実際には4ページ目まで生成されていますが、コードのパターンは同じなので省略します。
ファイル名は2ページ目がindex_2.html、3ページ目がindex_3.htmlのようになります。

ページャーのHTMLタグの構造を変更できるようにすることもできます。

<mt:Pagination>
  <mt:PaginationHeader>
    <div class="pager"><ul>
    <mt:IfPaginationFirst>
      <li class="first"><a href="<$mt:PaginationFirst$>">先頭</a></li>
    </mt:IfPaginationFirst>
    <mt:IfPaginationPrev>
      <li class="before"><a href="<$mt:PaginationPrev$>">前の3件</a></li>
    </mt:IfPaginationPrev>
  </mt:PaginationHeader>
  <mt:IfPaginationCurrent>
    <li class="current"><span><mt:PaginationLink element="number"></span></li>
  <mt:Else>
    <li class="link"><a href="<$mt:PaginationLink$>"><$mt:PaginationLink element="number"$></a></li>
  </mt:IfPaginationCurrent>
  <mt:PaginationFooter>
    <mt:IfPaginationNext>
      <li class="next"><a href="<$mt:PaginationNext$>">次の3件</a></li>
    </mt:IfPaginationNext>
    <mt:IfPaginationLast>
      <li class="last"><a href="<$mt:PaginationLast$>">最後</a></li>
    </mt:IfPaginationLast>
    </ul></div>
  </mt:PaginationFooter>
</mt:Pagination>
<span class="current"><$mt:PageCount$></span> / <span class="total"><$mt:PageMaxCount$></span>

MtEntries部分は先ほどと同じなので省略します。

再構築すると、以下のようなページが生成できました。

1ページ目(index.html)

<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>

<div class="pager">
  <ul>
    <li class="current"><span>1</span></li>
    <li class="link"><a href="https://XXX/index_2.html">2</a></li>
    <li class="link"><a href="https://XXX/index_3.html">3</a></li>
    <li class="link"><a href="https://XXX/index_4.html">4</a></li>
    <li class="next"><a href="https://XXX/index_2.html">次の3件</a></li>
    <li class="last"><a href="https://XXX/index_4.html">最後</a></li>
  </ul>
</div>
<span class="current">1</span> / <span class="total">4</span>

2ページ目(index_2.html)

<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>
<div class="article"><a href="XXX">XXX</a></div>

<div class="pager">
  <ul>
    <li class="first"><a href="https://XXX/index.html">先頭</a></li>
    <li class="before"><a href="https://XXX/index.html">前の3件</a></li>
    <li class="link"><a href="https://XXX/index.html">1</a></li>
    <li class="current"><span>2</span></li>
    <li class="link"><a href="https://XXX/index_3.html">3</a></li>
    <li class="link"><a href="https://XXX/index_4.html">4</a></li>
    <li class="next"><a href="https://XXX/index_3.html">次の3件</a></li>
    <li class="last"><a href="https://XXX/index_4.html">最後</a></li>
  </ul>
</div>
<span class="current">2</span> / <span class="total">4</span>

設定も簡単で便利なプラグインなので、ページを分割する必要がある場合はぜひ使ってみてください。
　

【参考サイト】

• 静的ページ用ページ分割プラグイン:PageBute – エンジニアブログ – スカイアーク