Bootstrap4でwill_painateを使ってページネーション

ブログの記事一覧にページネーションを導入しようと、Railsチュートリアルの10章を参考にやってみたけどBootstrapがうまく反映されず。
調べてみたらBootstrap4だと少し違う方法になるようなので、まとめました。

前提

Rails: 5.2.1
Bootstrap4: 4.1.3

(今回導入するgem)
will_paginate: 3.1.6
bootstrap-will_paginate: 1.0.0

インストール

gemをインストールします

gem 'will_paginate'
gem 'bootstrap-will_paginate', '~> 1.0'

'will_paginate-bootstrap'という名前のgemもあるようですが、'bootstrap-will_paginate'の方でうまくいきました。

$ bundle install

使い方

まずオブジェクトを用意します。

ArticlesController.rb

  def index
    @articles = current_user.articles.paginate(:page => params[:page])
  end

 要は　(オブジェクト).paginate(:page => params[:page])　

インストールしたwill_pagenateによって:pageパラメータが生成され、値であるページ番号ごとにオブジェクトがまとめられます。

今回は1ページに記事を5つ、最新記事から先に表示したいので、以下のように追記します。

  def index
    @articles = current_user.articles.paginate(:page => params[:page], :per_page => 5).order('created_at DESC')
  end

次にビューで<%= will_paginate %>を使って呼び出します。
ここで注意したいのは、Bootstrap4だと

will_paginate((用意したオブジェクト),  :renderer => WillPaginate::ActionView::Bootstrap4LinkRenderer) 

という記述が必要になります。
今回は以下のようになりました。

show.html.erb

   <nav class="blog-pagination">
     <%= will_paginate(@articles, :renderer => WillPaginate::ActionView::Bootstrap4LinkRenderer)  %>
   </nav>

結果

このように、見た目の良いページネーションが実装できました。