FullStackEngineer 2022年3月12日更新

Kaminariのbootstrap5 対応

Index

kaminariにbootstrap5対応テンプレートを充てる

  • ページング
gem 'kaminari'

  bundleインストールとコンフィグを設定

$ bundle install

$ bin/rails g kaminari:config
    create  config/initializers/kaminari_config.rb

モデルに追加

コンフィグで1ページあたりの件数を決める場合はサーバー再起動が必要 今回は直接指定。

@posts = @posts.page(params[:page]).per(10)

テンプレートに追加

<%= paginate @posts %>
  • デザイン変更前に日本語にしてしまおう。

  • 日本語化をしてある前提

kaminari用の日本語ファイル追加 config/locales/kaminari_japanese.yml

ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."

  • Bootstrap 5 Kaminari Viewsで見た目を変える

Bootstrap 5 Kaminari Views

gem 'bootstrap5-kaminari-views'

bundle install

この形で指定する

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

最新記事一覧

続きを見る

関連コンテンツ

カテゴリー一覧

TOP フルスタックエンジニアを目指すに方々へ 2022年2月6日 ライブラリの仕組みについて、自身でGEMを作ってみる