ブログのトップページにページャを設置します。
今回はページ番号、次のページへのリンクと前のページヘのリンクを設置します。
今回は、ページャがないテンプレートだったので、</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">«</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">»</span>
</a>
</li>
</ul>
</nav>
修正後、公開側のページを開き、
記事数に合わせてページャが表示されていることが確認できたら終了です。
記事を増やして意図通りに表示されるか確認してみましょう。
リンクの表示数ですが、
<!-- b_block:id="pager" cms:pager_num="10" -->のように書くことで出力するページ数を指定できます。
表示中のページのリンクにはcurrent_page_numberというクラスが付き、最初のページへのリンクにはfirst_page_numberというクラスが、最後のページへのリンクにはlast_page_numberというクラスが自動的に付きます。
ページ送り周りで使用できるタグは下記のリンク先のページで確認出来ます。