ブログのトップページでページャを設置する

pager


pager2


ブログのトップページにページャを設置します。

今回はページ番号、次のページへのリンクと前のページヘのリンクを設置します。


今回は、ページャがないテンプレートだったので、</div><!-- /.blog-post -->の下に下記のようにタグを追加します。


<nav aria-label="...">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#" b_block:id="prev_link" aria-label="前"><span aria-hidden="true">&laquo;</span></a></li>
<!-- b_block:id="pager" cms:pager_num="10" cms:pager_mode="bootstrap4" -->
<li class="page-item<!-- cms:id="is_current" --> active<!-- /cms:id="is_current" -->"><a cms:id="pager_item_link" class="page-link">1</a></li>
<!-- /b_block:id="pager" -->

<!-- cms:ignore -->
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<!-- /cms:ignore -->
<a class="page-link" href="#" b_block:id="next_link" aria-label="次">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

修正後、公開側のページを開き、


pager3


記事数に合わせてページャが表示されていることが確認できたら終了です。

記事を増やして意図通りに表示されるか確認してみましょう。


リンクの表示数ですが、

<!-- b_block:id="pager" cms:pager_num="10" -->のように書くことで出力するページ数を指定できます。

表示中のページのリンクにはcurrent_page_numberというクラスが付き、最初のページへのリンクにはfirst_page_numberというクラスが、最後のページへのリンクにはlast_page_numberというクラスが自動的に付きます。


ページ送り周りで使用できるタグは下記のリンク先のページで確認出来ます。

b_block:id="pager"内で使用できるcms:idタグ

ページ送り関連でb_block:idのみで指定するもの

同じカテゴリーの記事