[RUBY]

--

Version ・ Ruby 2.6.6 ・ Rails 5.2.4.1 gem'kaminari 'implementiert Beim Erstellen einer App mit einer Posting-Funktion ist die Pagenation-Funktion auch für UX unerlässlich. Daher werden wir die Paginierungsfunktion mit Kaminari des Edelsteins implementieren.

Fügen Sie zuerst kaminari zur Gemfile hinzu und führen Sie die Bundle-Installation aus

Gemfile


gem 'kaminari', '~> 1.2.0'

Terminal


bundle install

Controller reparieren

Wenn Sie bereits eine Post-Funktion erstellt haben und eine Post-Listenseite haben, müssen Sie den Controler ändern. Der Controller auf der ursprünglichen Postlistenseite lautet wie folgt.

controllers/posts_controller.rb


def index
 @posts = Post.all
end

Ändern Sie diese wie folgt.

controllers/posts_controller.rb


def index
 @posts = Post.page(params[:page]).per(10)
end

Mit der Hinzufügung von Kaminari können Sie die Methodenseite und pro für jedes Modell verwenden. Übergeben Sie die aktuelle Anzahl der Seiten im Argument der Seitenmethode und die Anzahl der Seiten, die im Argument von per geteilt werden sollen. Hier wird 10 in das Argument von per eingegeben. Wenn Sie jedoch Seiten durch 8 Elemente trennen möchten, setzen Sie das Argument auf 8.

Änderungen anzeigen

Ich denke, dass es beim Anzeigen der Postlistenseite üblich ist, jede Anweisung zu verwenden, aber sie wird in Ruby verwendet Fügen Sie nach <% end%> <% = pagenate @ posts%> hinzu. Bei Verwendung von haml scheint es besser zu sein, @ paginate @posts am Ende der Liste zu schreiben. Für Details gibt es Leute, die Artikel mit haml schreiben, also beziehen Sie sich bitte darauf.

ruby:views/posts/index.html.erb


 <% @posts.each do |post| %>
           .
           .
           .
 <% end %>
 <%= pagebate @posts %>

Liegen bisher keine Fehler vor, wird der Link zur Paginierung automatisch angezeigt und die Paginierungsfunktion kann implementiert werden. Ich denke jedoch nicht, dass das Design leicht zu sehen ist. Verwenden Sie daher Bootstrap, um das Design anzuordnen. Wenn Sie Bootstrap bereits installiert haben, überspringen Sie den nächsten Schritt.

Einführung in Bootstrap

Es gibt zwei Möglichkeiten, Bootstrap zu installieren, z. B. die Installation mit Garn und das Herunterladen von der offiziellen Bootstrap-Website. Dieses Mal werden wir jedoch die Verwendung der CDN-Methode erläutern. Wenn Sie nur mit der Erklärung hier nicht zufrieden sind, https://www.youtube.com/watch?v=YY0mEyggH1E&t=713s Es gibt ein Video, in dem erklärt wird, wie es installiert wird. Schauen Sie also bitte dort nach.

Es sind zwei Schritte erforderlich. Der erste besteht darin, den Code auf der offiziellen Website am Ende des Head-Tags zu schreiben.

ruby:layouts/application.html.erb


<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

Die zweite besteht darin, den Code auf der offiziellen Website am Ende des Body-Tags zu schreiben

ruby:layouts/application.html.erb


<body>

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</body>

Damit ist die Installation abgeschlossen.

Generieren Sie eine Ansichtsvorlage für Bootstrap 4

kaminari hat Themen, die in Bootstrap und Foundation verwendet werden können. Wenn Sie den folgenden Code im Terminal ausführen, wird unter "app / views / kaminari" eine Ansichtsvorlage für Bootstrap 4 generiert. Diese Ansicht hat Vorrang vor der Standardansicht von kaminari.

Terminal


rails g kaminari:views bootstrap4

Wenn es soweit fertig ist, wird das Design gut aussehen. Wenn dies nicht funktioniert, starten Sie den Server neu.

Wenn Ihnen die englische Notation nicht gefällt, können Sie auch die japanische Notation verwenden. Fügen Sie "config / locales / kaminari_ja.yml" hinzu und schreiben Sie wie folgt.

config/locales/kaminari_ja.yml


ja:
  views:
      pagination:
        first: 'Der Erste'
        last: 'letzte'
        previous: 'Bisherige'
        next: 'Nächster'
        truncate: '...'

Wenn Japanisch bisher nicht angewendet wird, fügen Sie config.i18n.default_locale =: ja in "config / application.rb" hinzu. Insgesamt sieht es so aus:

config/application.rb


require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Theclo
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
    config.i18n.default_locale = :ja
    config.time_zone = 'Tokyo'
  end
end

Damit ist die Implementierung abgeschlossen. Wenn dies nicht funktioniert, starten Sie den Server erneut. Ich hoffe, es wird für alle hilfreich sein.

Recommended Posts