【MT7】PageButeでページネーション作成

はじめに

MovableType7
静的ページ用ページ分割プラグイン「PageBute」を使ったページネーション（ページャー、ページ送り）の作り方について。

<MTPagination> 
  <MTPaginationHeader> 
    <ul> 
    <MTIfPaginationFirst> 
      <mt:ignore>最初のページ以外のとき</mt:ignore> 
      <li><a href="<$MTPaginationPrev$>" class="prev"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></a></li> 
      <MTElse> 
        <mt:ignore>最初のページのとき/リンクなし</mt:ignore> 
        <li><span class="prev"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></span></li> 
    </MTIfPaginationFirst> 
  </MTPaginationHeader> 

  <MTIfPaginationCurrent> 
    <mt:ignore>現在のページを表示</mt:ignore> 
    <li><span class="now"><MTPaginationLink element="number"></span></li> 
    <MTElse> 
      <mt:ignore>それ以外のページ（遷移用のリンク付き）</mt:ignore> 
      <li><a href="<$MTPaginationLink$>"><$MTPaginationLink element="number"$></a></li> 
  </MTIfPaginationCurrent> 

  <MTPaginationFooter> 
    <MTIfPaginationLast> 
      <mt:ignore>最後のページ以外のとき</mt:ignore> 
      <li><a href="<$MTPaginationNext$>" class="next"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></a></li> 
      <MTElse> 
        <mt:ignore>最後のページのとき/リンクなし</mt:ignore> 
        <li><span class="next"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></span></li> 
    </MTIfPaginationLast> 
    </ul> 
  </MTPaginationFooter> 

</MTPagination>

※矢印はFontAwesomeを使用しています。

出力結果

<ul> 
  <li><span class="prev"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></span></li>  
  <li><span class="now">1</span></li>  
  <li><a href="">2</a></li>  
  <li><a href="">3</a></li> 
  <li><a href="">4</a></li> 
  <li><a href="">5</a></li> 
  <li><a href="" class="next"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></a></li> 
</ul>

参考サイト

・静的ページ用ページ分割プラグイン:PageBute