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



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

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


今回は、ページャがないテンプレートだったので、</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>

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



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

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


リンクの表示数ですが、

<!-- 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のみで指定するもの

Tweet Follow @saitodev
戻る

操作方法の追加リクエスト

操作方法質問フォームでマニュアルに記載されていない操作方法の質問を受け付けています。
より良いマニュアルサイトを目指していきますのでご協力をお願い致します。

当サイトの運営者についての詳細はこちらをご覧下さい。

SOY CMS/Shopの読み物

SOY Shop開発秘話

開発元で働いていた時に発表したスライドです。

売りたいものがあるならば、まずはネットショップのCMSを開発しましょう from Tsuyoshi Saito