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

# 目標

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/ec39fead-3fe0-9ca7-1b37-8db81c75256d.gif)

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Bootstrap3導入](https://qiita.com/matsubishi5/items/b117c95f4dd71340cc80)
・[ログイン機能実装](https://qiita.com/matsubishi5/items/5bd8fdd45af955cf137d)
・[投稿機能実装](https://qiita.com/matsubishi5/items/1a5aeab651b5822d1f2c)

# 実装

### 1.Gemを導入

```ruby:Gemfile
gem 'kaminari'
```

```terminal:ターミナル
$ bundle
```

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

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

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

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

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

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

```terminal:ターミナル
$ rails g kaminari:config
```

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

```ruby: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
```

![スクリーンショット 2020-06-05 10.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/838373bd-8bc7-6031-71b5-4a89f41ceb0c.png)

`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.ビューを編集

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

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

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

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

**②中央寄せ**

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

```slim: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?
```

**※表示がおかしくなる場合**
![スクリーンショット 2020-06-05 10.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/587ff335-ef27-80c0-7b56-3ea9686422a5.png)

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

```slim: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`を編集**

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

**②`ja.yml`を作成**

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

**③`ja.yml`を編集**

★日本語にしたい場合

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

![スクリーンショット 2020-06-05 10.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/2244e5bd-6da9-fdb6-9780-678c1a048b90.png)


★アイコンにしたい場合

下記リンクから`Font Awesome`を導入し、`ja.yml`を編集する。
[Font Awesome導入方法](https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8)

```yml: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: "..."
```

![スクリーンショット 2020-06-05 10.54.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/bb8b7622-2271-7583-64d4-ba54b0c92cad.png)