simple_bootstrap, 일본어 대응 form

16210 단어 Rails

개시하다


simple_폼을 전혀 사용하지 않아서 썼어요.

사용법


bootstrap과 단순폼을 써야 하니까.
gem 'bootstrap'
gem 'jquery-rails'
gem 'popper_js'
gem 'tether-rails'
gem 'simple_form'
미리 준비하다
assets/javascripts/application.이르다


//= require jquery3
//= require jquery_ujs
//= require popper
//= require tether
//= require bootstrap
덧붙이다
bundle install 이후
rails g simple_form:install --bootstrap
이러면 bootstrap에 대응할 수 있을 것 같아요.
우선 사용해 보자

rails g scaffold user name:string
rails db:migrate

localhost:3000/users에 로그인하면bootstrap에 대응하는 내용을 볼 수 있습니다
<%= simple_form_for(@user) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :name %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>
되다
이번에는 자동 생성이 아니라 스스로 시도해 보았다
rails g model person name:string age:integer
rails db:migrate
rails g controller people index new
... 로 삼다
people_controller.열다

class PeopleController < ApplicationController
  def index
  end

  def new
    @person = Person.new
  end

  def create
    @person = Person.create(person_params)
    redirect_to people_path
  end 


  private 

  def person_params 
    params.require(:person).permit(:name,:age)
  end 
end
개인 만들기
config/routes.달성
resources :people
더구나
다음
views/people/new.html.eb 열기
<div class="container">
    <%= simple_form_for(@person) do |f| %>
        <div class="form-group">
            <%= f.input :name %>
        </div>
        <div class="form-group">
            <%= f.input :age %>
        </div>
        <%= f.submit %>
    <% end %>
</div>
만약 그렇다면bootstrap에 대응하여 표를 만들 수 있다.
그래도 문제가 있어요.

이렇게 해서 Name 및 Age의 영어가 됩니다.
일단
<%= f.input name:, label: '年齢' %>
이렇게 바꿀 수 있어요.
다른 방법으로localle/ja.yml을 만들어서 거기에 일본어화된 설정을 쓰는 방법이 있다.
이를 위해서는 먼저 config/application이 필요합니다.달성
config.i18n.default_locale = :ja 
쓸 필요가 있어요.
그리고 나서
어떻게파일 생성

ja: 
  helpers:
    submit:
        create: '登録する'
        update: '更新する'
        submit: '保存する'
  simple_form:
    labels:
      person:
        name: 'ユーザー名'
        age: '年齢'
    hints:
      person:
        name: 'サインインするユーザ名を入力してください'
        age: '年齢を入力してください'
    placeholders:
      person:
        name: 'ユーザー名'
        age: '年齢'
그러면

이런 느낌으로 좋아졌어요.
hint는 아래의 글입니다. Placeholder는 형식에 쓰여 있는 글입니다.
예를 들어 hint를 표시하고 싶지 않은 경우.
<%= f.input :name, hint: false %>
이러면 안 나와.
또한, 필수 항목을 표시하기 위해 어떤 표기나 문자를 넣고 싶은 경우
required:
        html: '<abbr title="required">必須</abbr>'
이렇게 쓴 것 같은데, 바로 이거예요.

이렇게 필요한 글자 밑에 이상한 글자가 나오면 정말 싫다
simple_form:
    required:
        html: '<abbr class="nec">必須</abbr>'
... 로 삼다
assets/stylesheets/application.달성

.nec {
    background-color: red;
    color: white;
    font-weight: 500;
    margin-left: 20px;
    padding: 0px 4px 2px 4px;
}
하면, 만약, 만약...

느낌이 좋다.
다음은 발리.
people_controller.열다
def create
    @person = Person.create(person_params)
    if @person.save 
      redirect_to people_path
    else 
      render :new 
    end 
  end 
이렇게
model/person.달성
validates :name, presence: true
추가합니다.
이렇게 등록 버튼을 누르면 해당 표는 빨갛게 변하지만 정보는 영어로 나온다.
이거 고치려고.yml 파일을 편집해야 하지만 모델의 부분과 잘못된 부분을 일본어화해야 합니다
서류가 엉뚱해져서요.yml 파일을 분리해서 저장할 수 있습니다.
config/application.달성
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
덧붙이다
localles 밑에 있어요.
defaults, 모델,views 폴더를 만듭니다.
defaults 폴더에서ja.파일 작성 및 컨텐츠 열기
여기서 복사한 물건을 붙이다.
모델 폴더 아래에 개인 폴더를 만들고 ja에 만듭니다.만들다

ja:
  activerecord:
    models:
      person: ユーザー
    attributes:
      person:
        name: 名前
        age: 年齢


덧붙이다
views 폴더 아래ja.yml 만들기
ja: 
  helpers:
    submit:
        create: '登録する'
        update: '更新する'
        submit: '保存する'
  simple_form:
    required:
        html: '<abbr class="nec">必須</abbr>'
    labels:
      person:
        name: 'ユーザー名'
        age: '年齢'
    hints:
      person:
        name: 'サインインするユーザ名を入力してください'
        age: '半角英数字のみ使えます'
    placeholders:
      person:
        name: 'ユーザー名'
        age: '年齢'

이거 추가해.
이렇게 일본어로 하면 되겠다.
사용자 이름을 공백으로 설정하고 등록 버튼을 누르면

이렇게 할 수 있어!
마무리

좋은 웹페이지 즐겨찾기