[RUBY] [Rails] Wie man Kaminari mit Slim einführt und das Design ändert

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3

• Implementierung der Anmeldefunktion ・ Implementierung der Posting-Funktion

Implementierung

1. Stellen Sie Gem vor

Gemfile

gem 'kaminari'

Terminal

$ bundle

2. Pagenationseinstellungen

** ① Beim Einstellen mit dem Controller **

books_controller.rb

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

.page(params[:page]) ➡︎ Geben Sie die Anzahl der Seiten in der Seitennation an.

.per(5) ➡︎ Geben Sie die Anzahl der Elemente an, die pro Seite angezeigt werden sollen. (In diesem Fall auf 1 setzen)

** ② Beim separaten Erstellen einer Einstellungsdatei **

Terminal

$ rails g kaminari:config

Die folgenden Dateien werden in config / initializers erstellt.

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 ➡︎ Anzahl der pro Seite angezeigten Elemente

config.max_per_page ➡︎ Maximale Anzahl der pro Seite angezeigten Elemente

config.window ➡︎ Legen Sie fest, wie viele Seiten links und rechts Links von der aktuellen Seite anzeigen sollen (Bild ist auf 1 gesetzt).

config.outer_window ➡︎ Legen Sie fest, wie viele Seiten mit linken und rechten Links auf der ersten und letzten Seite angezeigt werden.

config.left ➡︎ Legen Sie fest, wie viele Seiten mit Links von der ersten Seite angezeigt werden sollen (Bild ist auf 3 eingestellt).

config.right ➡︎ Legen Sie fest, wie viele Seiten mit Links von der letzten Seite angezeigt werden sollen (Bild ist auf 2 eingestellt).

config.page_method_name ➡︎ Methodennamen festlegen

config.param_name ➡︎ Stellen Sie den Namen des Salonzählers ein

config.params_on_first_page ➡︎ Bitte sagen Sie mir, wer die Einstellungen hier kennt.

3. Ansicht bearbeiten

slim:books/index.html.slim

/Nachtrag
= paginate @books

4. Erstellen / bearbeiten Sie die Kaminari-Ansicht

** ① Erstellen Sie eine Ansichtsdatei mit "Bootstrap3" **

Terminal

$ rails g kaminari:views bootstrap3

** ② Zentriert **

Schließen Sie ein div mit der Bootstrap3-Hilfsklasse (Text-Center) ein.

slim:kaminari/_paginator.html.sim

= paginator.render do
  /Nachtrag
  .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?

** * Wenn das Display seltsam aussieht **

Wenn die obige Anzeige angezeigt wird, fehlt ein = in _paginator.html.sim, also bearbeiten Sie es.

slim:kaminari/_paginator.html.sim

//Vorher ändern
= 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?

//Nach der veränderung
= 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. Ändern Sie das Design

** ① Bearbeiten Sie application.rb **

config/application.rb

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

** ② Erstelle ja.yml **

Terminal

$ touch config/locales/ja.yml

** ③ Bearbeiten Sie ja.yml **

★ Wenn Sie Japanisch verwenden möchten

ja.yml

ja:
  views:
    pagination:
      first: "«Der Erste"
      last: "letzte»"
      previous: "‹Bisherige"
      next: "Nächster›"
      truncate: "..."

★ Wenn Sie es zu einem Symbol machen möchten

Installieren Sie "Font Awesome" über den unten stehenden Link und bearbeiten Sie "ja.yml". So installieren Sie 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: "..."