[RUBY] [Rails] Comment introduire le kaminari avec Slim et changer le design

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Introduction de Bootstrap 3

• Implémentation de la fonction de connexion ・ Mise en œuvre de la fonction de publication

la mise en oeuvre

1. Présentez Gem

Gemfile

gem 'kaminari'

Terminal

$ bundle

2. Paramètres de mise en page

** ① Lors du réglage avec le contrôleur **

books_controller.rb

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

.page(params[:page]) ➡︎ Spécifiez le nombre de pages dans la nation de page.

.per(5) ➡︎ Spécifiez le nombre d'éléments à afficher par page. (Définir sur 1 dans ce cas)

** ② Lors de la création d'un fichier de paramètres séparément **

Terminal

$ rails g kaminari:config

Les fichiers suivants sont créés dans 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 ➡︎ Nombre d'éléments affichés par page

config.max_per_page ➡︎ Nombre maximum d'éléments affichés par page

config.window ➡︎ Définissez le nombre de pages à gauche et à droite pour afficher les liens de la page actuelle (l'image est définie sur 1)

config.outer_window ➡︎ Définissez le nombre de pages de liens gauche et droit affichées à partir des première et dernière pages.

config.left ➡︎ Définissez le nombre de pages de liens affichées à partir de la première page (l'image est définie sur 3)

config.right ➡︎ Définissez le nombre de pages de liens affichées à partir de la dernière page (l'image est définie sur 2)

config.page_method_name ➡︎ Définir le nom de la méthode

config.param_name ➡︎ Définissez le nom du compteur de salon

config.params_on_first_page ➡︎ Veuillez me dire qui sait quels sont les paramètres ici.

3. Modifier la vue

slim:books/index.html.slim

/Postscript
= paginate @books

4. Créer / modifier la vue kaminari

** ① Créez un fichier de vue avec Bootstrap3 appliqué **

Terminal

$ rails g kaminari:views bootstrap3

** ② Centré **

Entourez un div avec la classe auxiliaire Bootstrap3 (text-center).

slim:kaminari/_paginator.html.sim

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

** * Si l'affichage semble étrange **

Si l'affichage ci-dessus est affiché, il manque un = dans _paginator.html.sim, alors modifiez-le.

slim:kaminari/_paginator.html.sim

//Changer avant
= 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?

//Après le changement
= 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. Changer le design

** ① Editez ʻapplication.rb` **

config/application.rb

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

** ② Créez ja.yml **

Terminal

$ touch config/locales/ja.yml

** ③ Modifiez ja.yml **

★ Si vous souhaitez utiliser le japonais

ja.yml

ja:
  views:
    pagination:
      first: "«la première"
      last: "dernier»"
      previous: "‹Avant"
      next: "Suivant›"
      truncate: "..."

★ Si vous voulez en faire une icône

Installez Font Awesome à partir du lien ci-dessous et éditez ja.yml. Comment installer 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: "..."