ページネーションのレイアウト変更

ページネーションのレイアウト変更

前回に引き続き、kaminariで導入したページネーションのレイアウトを変更していく。

前回の記事 URL

ページネーションの実装(gemの「kaminari」実装) - takifugu’s blog

前提条件

Bootstrap導入済み(yarnにて導入)

参考URL Bootstrapの実装 - takifugu’s blog

実装

gemのbootstrap5-kaminari-viewsを使用してレイアウトを変更していく。

Gemfileに下記を記述し、反映させる(bundle install)。

Gemfile

：
gem 'bootstrap5-kaminari-views'

ページネーションを表示させる部分に下記の記述を追加し、bootstrap5を反映させる。booksの部分は適宜変更。

<%= paginate books, theme: 'bootstrap-5' %>

theme: 'bootstrap-5'で記述をbootstrap5を反映させる。

view表示↓

Bootstrapを導入したことにより見やすいレイアウトになりました。

Bootstrapを導入した場合のデフォルトはこの状態ですが、

ここからさらに変更していきたい場合、現状のcssは、app/javascript配下のフォルダを参照しているため、

app/javascript配下のフォルダを編集することで、レイアウトの変更ができます。

※app/views/layouts/application.html.erbの記述が、下記のようになっていればcssがapp/javascript配下のフォルダを参照しています。

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

stylesheet_pack_tagの部分が、stylesheet_link_tagとなっていれば、app/assets 配下のフォルダを参照します。

レイアウトの色を変更

試しに色を変更していきます。

app/javascript/stylesheets/application.scssに記述していく。

app/javascript/stylesheets/application.scss

：
 /* pagenation layouts */
$pagenation_color: rgb(177,31,255);

.page-item.active .page-link {
  background-color: $pagenation_color;
  border-color: $pagenation_color;
}

.a page-link {
  color: $pagenation_color;
}

.page-item a:hover {
  color: $pagenation_color;
}

.page-item a {
  color: $pagenation_color;
}

pagenation_colorを定義し、定義した色に変更しています。

下記のようなviewになります。

ページネーションの日本語化

最後に表示を日本語化していきます。

まず、config/application.rbに記述を追加します。

config/application.rb

：
module Bookers2Ver2
  class Application < Rails::Application
      ：
      config.i18n.default_locale = :ja  #追加
  end
end

そして、config/localesフォルダにkaminari_ja.ymlファイルを作成し、記述していく。

config/locales/kaminari_ja.yml

ja:
  views:
      pagination:
        first: '最初'
        last: '最後'
        previous: '前'
        next: '次'
        truncate: '...'

サーバーを立ち上げ直すと、下記のような表示になります。

以上、レイアウトの変更方法は他にもあるため、他の方法でも試していければと思います。