[Rails]kaminari bootstrap4で文字無しアイコンだけ表示させる

kaminariはbootstrapデザインを適用させてもデフォルトでは以下のようにFirst、Prev、Next、Lastといった文字が表示されてると思います。

 

これを以下のような矢印アイコンだけを表示させる時の実装方法。

2年くらい前のkaminariのバージョン(theme:bootstrapが使えるころ)だといろいろ情報があるんですけど、2017/07/28時点での最新バージョン(1.0.1)だとそのまま使えないようだったので一応シェア。

環境

kaminari (1.0.1)
kaminari-actionview (1.0.1)
kaminari-activerecord (1.0.1)
kaminari-core (1.0.1)

上記gemをインストール済みである前提で書いていきます。まだインストールしてない人はGemfileに

gem 'kaminari', '1.0.1'

って書いて、

bundle install

すればOK。

kaminariの簡単な使い方とかは以下のページをご参考に。

http://qiita.com/nekonoprotocol/items/91542d577f306c1c1239

実装方法

シェル(コマンドプロンプトとかターミナルとか)に

$ rails g kaminari:config

と打ってkaminari用の設定ファイルを作成しましょう。(今回はこのファイルをいじりませんが後々のために)

次に

$ rails g kaminari:views bootstrap4

としてkaminariページャーのbootstrap4版のViewファイルを作成します。(このコマンド一発でBootstarp4のデザインを適用してくれるから便利)

 

すると、app/view/kaminari/フォルダが作成され、このフォルダ以下に
_first_page.html.erb
_gap.html.erb
_last_page.html.erb
_next_page.html.erb
_page.html.erb
_paginator.html.erb
_prev_page.html.erb
が作成されます。

これらのファイルをいじる方法もあるのですが、まぁちょっと面倒。
冒頭で言ったような感じで単純に見た目をシンプルにさせたいだけだったら、一番簡単に実装する方法はen.ymlファイルに設定を追加すること。

en:
  views:
    pagination:
      first: "«"
      last: "»"
      previous: "‹"
      next: "›"
      truncate: "…"

こんな感じで追加すればOK。

こうすると最新のbootstrap4でも「Next」「First」「Last」といった不要な文字を消した状態、つまり矢印だけを表示した状態でkaminariページャーを使うことができます。