Rails의 HTML 템플릿 엔진, Slim의 기본 표기법

소개

Rails의 View를 출력하기 위한 덴플레이트 엔진으로서 표준으로 이용되는 것은 ERB입니다.
그러나 rails에서는 ERB 외에도 슬림이나 Haml 등 HTML 템플릿을 사용할 수 있습니다.

슬림의 특징으로,

들여 쓰기로 HTML 태그 구조를 나타내므로 코드 분량이 적습니다

기본적으로 HTML 이스케이프를 수행하기 위해 안전합니다

ERB에 비해 성능이 좋음

있습니다.

이번에는 Scaffold에서 만든 .erb를 바탕으로 Slim의 기본적인 기법과 자신이 처음 빠진 포인트를 소개합니다.

운영 환경

Rails 5.1.2
slim-rails 3.1.3

도입 방법

Gemfile에 rails-slim을 추가하고 bundle install합니다.

Gemfile

...
gem 'slim-rails', '3.1.3'
...

$ bundle install

...
Installing slim-rails 3.1.3
...
Bundle complete!

기본 템플릿 엔진을 slim으로 변경합니다.

config/application.rb

class Application < Rails::Application
  config.generators.template_engine = :slim  
end

기존 ERB를 Slim으로 변경

rails-slim이 설치되면 .erb라는 식별자를 .slim로 변경합니다..erb 파일이 남아 있으면 그 쪽을 읽어 버리므로, 남기지 않게 합니다.

변경이 끝나면 서버를 다시 시작합니다.

$ rails server

=> Booting Puma
=> Rails 5.1.2 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.9.1 (ruby 2.4.3-p205), codename: Private Caller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

기본적인 기법

기본적인 기법은 다음 5가지입니다.

HTML < 및 > 삭제

HTML의 닫는 태그 ( </p> 같은 것)는 삭제한다

class와 id는 p.className , h1#idName 와 같이 쓴다

ERB <% 와 %> 삭제

each 또는 if 등 루프 및 조건문에 -를 붙인다

HTML로 표시하고 싶지 않은 코멘트는 / , 표시하고 싶은 코멘트는 /!로 나타낸다

기본 표기법 샘플

ERB의 예

index.html.erb

// コメント
<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

슬림의 예

index.html.slim

/ HTMLに表示したくないコメント
/! HTMLに表示したいコメント
h1 Users

table
  thead
    tr
      th Name
      th Email
      th colspan="3"

  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = user.email
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' }

br

= link_to 'New User', new_user_path

상당히 슬림해졌습니다.

ERB를 Slim으로 다시 작성한 후 서버를 다시 시작하여 디스플레이가 ERB에서 변경되지 않았는지 확인하십시오.

$ rails server

もしくは

$ rails s

이런 느낌이 되고 있다 ↓

주의가 필요한 기법

복수의 클래스를 기재하고 싶은 경우는 . 로 연결한다

_form.html.slim

/ classが二つある場合

p.text.text-plain

class나 id의 전의 div 태그는 생략

_form.html.slim

/ こうじゃなくて
/ div.className 


/  こうする
.className

render 또는 yield 는 = 대신 ==== 를 사용하여 HTML 이스케이프를 비활성화하고 출력 할 수 있습니다.

new.html.slim

== render 'form', user: @user_ski 

이렇게 ↓

특히 빠지기 쉬운 기법

문자열을 표시하려면 '
index.html.slim

= link_to 'Edit', edit_user_path(@user)
'|
= link_to 'Back', users_path

HTML의 속성에 Ruby 코드를 사용하는 방법
= 다음에 Ruby 코드를 씁니다.
코드에 공백이 있으면 ()로 코드를 묶습니다.
또한 해시를 {...}에, 배열을 [...]에 쓸 수 있습니다.

ERB의 예

_form.html.erb

<h2><%= pluralize(micropost.errors.count, "error") %> prohibited this micropost from being saved:</h2>

슬림의 예

_form.html.slim

h2 = "#{pluralize(micropost.errors.count, "error")} prohibited this micropost from being saved:"

끝에

Slim의 자주 사용하는 기법을 간단하게 소개했습니다.

자세한 일본어 참조는 여기에 있습니다.
htps : // 기주 b. 이 m/sぃm-mp ぁ테/sぃm/bぉb/마s r/레아 D메. jp. md