목표

개발 환경

· 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건으로 설정)

②설정 파일을 별도 작성하는 경우

터미널

$ 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➡︎ 페이지당 표시 건수
config.max_per_page➡︎ 페이지당 최대 표시 건수
config.window➡︎ 현재 페이지에서 좌우 몇 페이지 분의 링크를 표시할지 설정 (이미지는 1로 설정)
config.outer_window➡︎ 처음(First)과 마지막(Last) 페이지에서 좌우 몇 페이지분의 링크를 표시시킬지를 설정
config.left➡︎ 처음(First) 페이지에서 몇 페이지분의 링크를 표시시킬지를 설정(이미지는 3으로 설정)
config.right➡︎ 마지막 페이지에서 몇 페이지의 링크를 표시할지 설정 (이미지는 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
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. 디자인 변경

① = 편집

config/application.rb

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

② application.rb 을 작성

터미널

$ touch config/locales/ja.yml

③ ja.yml 편집

★일본어로 하고 싶은 경우

ko.yml

ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "..."

★아이콘으로 하고 싶은 경우

아래 링크에서 ja.yml를 도입하고 Font Awesome를 편집하십시오.
Font Awesome 도입 방법

ko.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: "..."