페이지 네이션은 kaminari라는 gem을 사용하는 것이 많을까 생각합니다.

참고
htps : // 코 m / 레시 덴치 / ms / 1 굳이 1 5 b59c0729c0b9

기능면은 실장이 끝난 것으로 가정합니다.

kaminari를 구현하면 처음에는 아래와 같이 보기 어려운 디자인이 되어 있을까 생각합니다.



예를 들어, 이것을 다음과 같이 바꾸자!


위 링크와 같이 bootstrap을 적용하는 방법도 있지만 링크 호버 등 스스로 커스터마이즈하고 싶네요.

kaminari view 파일 만들기

터미널에서 다음을 입력하십시오.

rails g kaminari:views default

이것은 view 폴더 안에 kaminari의 view 목록을 만들었습니다! 이것은 그대로 두고 계속 진행하십시오!

일본어화

kaminari의 젬의 디포가 영어로 되어 있기 때문에 이것을 일본어 환경으로 바꿔야합니다. 먼저 config/application 파일에 다음을 추가합니다.

config/application.rb

config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

1행째는 일본어 환경을 적용, 2행째는 복수의 lacale 파일(후술)이 적용되는 코드가 됩니다.

전체적으로는 다음과 같이 되어 있을까 생각합니다.

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 Geektwitter
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.1
    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
  end
end

이제 일본어화가 적용됩니다.

그런 다음 config/locales 폴더에 kaminari_en.yml을 만듭니다. (ja_yml 파일 중에 예를 들어 created_at의 일본어화가 이미 작성되어 있는 경우, 다른 일본어화는 본 페이지와 같이 다른 파일을 작성할 필요가 있습니다.)

그 안에 다음을 복사합니다.

config/locales/kaminari_en.yml

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

영어를 일본어로 바꿨습니다!

맞춤형

다음으로 해당 CSS 파일에 다음을 추가합시다.

tweets.css

// paginate
.pagination{
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: flex-start;
}
.pagination span{
  background-color: rgba(158, 158, 158, 0.4);
  text-align: center;
  width: 50px;
  border: solid 1px #344963;
  color: rgb(197, 20, 159);
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.pagination span:hover{
  transition: .3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.pagination span a:hover{
  transition: .3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

※주의※
일본어 환경으로 바꾼 후 한 번 rails s를 재시작하십시오.

이것으로 좋은 느낌이 들었는지 생각합니다! 색조나 위치의 조정(width)은, 각자 바꾸어 봐 주세요!