【Rails】Slimでkaminariを導入し、デザインを変更する方法

15813 ワード
Rails slim Bootstrap3 Ruby kaminari Ruby テキストリンク

目標

開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

前提

下記実装済み。

・Slim導入
・Bootstrap3導入
・ログイン機能実装
・投稿機能実装

実装

1.Gemを導入

Gemfile
gem 'kaminari'
ターミナル
$ bundle

2.ページネーションの設定

①コントローラーで設定する場合

books_controller.rb
def index
  @books = Book.all.page(params[:page]).per(1)
end

.page(params[:page])
➡︎ ページネーションにおけるページ数を指定する。

.per(5)
➡︎ 1ページあたりの表示件数を指定する。(今回の場合は1件に設定)

②設定ファイルを別途作成する場合

ターミナル
$ rails g kaminari:config

config/initializersに下記ファイルが作成される。

kaminari_config.rb
# frozen_string_literal: true
Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end

config.default_per_page
➡︎ 1ページあたりの表示件数

config.max_per_page
➡︎ 1ページあたりの最大表示件数

config.window
➡︎ 現在のページから、左右何ページ分のリンクを表示させるかを設定(画像は1に設定)

config.outer_window
➡︎ 最初(First)と最後(Last)のページから、左右何ページ分のリンクを表示させるかを設定

config.left
➡︎ 最初(First)のページから、何ページ分のリンクを表示させるかを設定(画像は3に設定)

config.right
➡︎ 最後(Last)のページから、何ページ分のリンクを表示させるかを設定(画像は2に設定)

config.page_method_name
➡︎ メソッド名を設定

config.param_name
➡︎ パラーメーター名を設定

config.params_on_first_page
➡︎ ここで何の設定してるか分かる人教えて下さい。

3.ビューを編集

books/index.html.slim
/ 追記
= paginate @books

4.kaminariのビューを作成・編集

①Bootstrap3が適用されたビューファイルを作成

ターミナル
$ rails g kaminari:views bootstrap3

②中央寄せ

Bootstrap3の補助的クラス(text-center)を付与したdivで囲う。

kaminari/_paginator.html.sim
= paginator.render do
  / 追記
  .text-center
    ul.pagination
      == first_page_tag unless current_page.first?
      == prev_page_tag unless current_page.first?

      - each_page do |page|
        - if page.left_outer? || page.right_outer? || page.inside_window?
          == page_tag page
        - elsif !page.was_truncated?
          == gap_tag

      == next_page_tag unless current_page.last?
      == last_page_tag unless current_page.last?

※表示がおかしくなる場合

上記の様な表示になってしまう場合は_paginator.html.simの=が1つ足りて無いので、編集する。

kaminari/_paginator.html.sim
// 変更前
= paginator.render do
  .text-center
    ul.pagination
      = first_page_tag unless current_page.first?
      = prev_page_tag unless current_page.first?

      - each_page do |page|
        - if page.left_outer? || page.right_outer? || page.inside_window?
          = page_tag page
        - elsif !page.was_truncated?
          = gap_tag

      = next_page_tag unless current_page.last?
      = last_page_tag unless current_page.last?

// 変更後
= paginator.render do
  .text-center
    ul.pagination
      == first_page_tag unless current_page.first?
      == prev_page_tag unless current_page.first?

      - each_page do |page|
        - if page.left_outer? || page.right_outer? || page.inside_window?
          == page_tag page
        - elsif !page.was_truncated?
          == gap_tag

      == next_page_tag unless current_page.last?
      == last_page_tag unless current_page.last?

5.デザインを変更

①application.rbを編集

config/application.rb
module Bookers2Debug
  class Application < Rails::Application
    config.load_defaults 5.2
    config.i18n.default_locale = :ja # 追記
  end
end

②ja.ymlを作成

ターミナル
$ touch config/locales/ja.yml

③ja.ymlを編集

★日本語にしたい場合

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

★アイコンにしたい場合

下記リンクからFont Awesomeを導入し、ja.ymlを編集する。
Font Awesome導入方法

ja.yml
ja:
  views:
    pagination:
      first: <i class="fas fa-angle-double-left"></i>
      last: <i class="fas fa-angle-double-right"></i>
      previous: <i class="fas fa-angle-left"></i>
      next: <i class="fas fa-angle-right"></i>
      truncate: "..."