Ruby 2.5.7 Rails 5.2.4
I'm using .erb as the Rails template engine, but there are other template engines such as .haml and .slim.
This time I was interested in .slim, I changed a part of the existing .erb file to .slim and confirmed the operation, so I will write the process.
It will be almost a case study, so please refer to it.
The basic changes are as follows.
slim:example.html.slim
/Only the start tag, not the end tag
<body></body>
=>
body
<h1>title</h1>
=>
h1 title
/id name class name is written continuously
<ul class="list"></ul>
=>
ul.list
<span id="btn"></span>
=>
span#btn
/div omits even div
<div id="main-contents" class="flex container" ></div>
=>
#main-contents.flex.container
/ruby code<%= %>Is omitted(=What is=Just write)
<%= link_to 'next' %>
=>
= link_to 'next'
/ <% %> =Those without is at the beginning-Put on
/ <% end %>Are all omitted (loop statements, etc.)
<%if conditional statement%>
<% else %>
<% end %>
=>
-if conditional statement
- else
See here for syntax details. GitHub - slim Qiita --Quick Learning Template Slim (HTML Creation) Qiita-HTML template engine of Rails, basic notation of Slim Qiita-[Learn at explosive speed] From how to use slim with Rails to basic grammar
From here, I will introduce the following 4 types of files that I actually changed in before / after format. *application.html.erb/slim *_form.html.erb/slim *new.html.erb/slim *edit.html.erb/slim
These View files are also available on my GitHub. GitHub - matchi_ver.slim application.html
erb:application.html.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<%= favicon_link_tag('favicon.ico') %>
<%= favicon_link_tag 'home-icon.png', rel: 'apple-touch-icon', size: '180x180', type: 'image/png' %>
<%= favicon_link_tag 'home-icon.png', rel: 'android-touch-icon', size: '192x192', type: 'image/png' %>
<title>Matchi</title>
<script src="//maps.google.com/maps/api/js?key=<%= ENV['GOOGLE_PLATFORM_API_KEY'] %>"></script>
<%= include_gon %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application' %>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= ENV['GOOGLE_ANALYTICS_TRACKING_ID'] %>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', "<%= ENV['GOOGLE_ANALYTICS_TRACKING_ID'] %>");
</script>
</head>
<body>
<header>
<div class="header-container">
<%#PC screen header%>
<div class="flex pc-header">
<%= link_to root_path do %>
<div class="logo-image"></div>
<% end %>
<div class="header-nav">
<nav>
<ul class="flex header-ul">
<% url = request.fullpath %>
<%#to url'owner'If there is a store header%>
<% if url.include?('owner') %>
<% if master_admin_signed_in? %>
<li><%= link_to 'Top administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Admin log out', destroy_master_admin_session_path, method: :delete %></li>
<% end %>
<% if owner_restaurant_signed_in? %>
<li><%= link_to 'Store top', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'General member TOP', mypage_path(current_public_user) %></li>
<li><%= link_to 'General member logout', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'General member login', new_public_user_session_path %></li>
<% end %>
<%#to url'master'Admin header, if any%>
<% elsif url.include?('master') %>
<% if master_admin_signed_in? %>
<li><%= link_to 'New store registration', new_owner_restaurant_registration_path %></li>
<li><%= link_to 'Top administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Admin log out', destroy_master_admin_session_path, method: :delete %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'General member TOP', mypage_path(current_public_user) %></li>
<li><%= link_to 'General member logout', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'General member login', new_public_user_session_path %></li>
<% end %>
<% if owner_restaurant_signed_in? %>
<li><%= link_to 'Store top', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Store login', new_owner_restaurant_session_path %></li>
<% end %>
<%#Other than the above, header for general users%>
<% else %>
<% if master_admin_signed_in? && owner_restaurant_signed_in? %>
<li><%= link_to 'Top administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Admin log out', destroy_master_admin_session_path, method: :delete %></li>
<li><%= link_to 'Store TOP', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete %></li>
<% elsif owner_restaurant_signed_in? %>
<li><%= link_to 'Store TOP', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete %></li>
<% elsif master_admin_signed_in? %>
<li><%= link_to 'Top administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Admin log out', destroy_master_admin_session_path, method: :delete %></li>
<li><%= link_to 'Store login', new_owner_restaurant_session_path %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'MyPage', mypage_path(current_public_user) %></li>
<%# if alert.count >= 1 %>
<li><%#= link_to 'I have news.' %></li>
<%# end %>
<li><%= link_to 'Log out', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'sign up', new_public_user_registration_path %></li>
<li><%= link_to 'Login', new_public_user_session_path %></li>
<% end %>
<% end %>
</ul>
</nav>
</div>
</div>
<%#Smartphone screen header%>
<div class="flex sp-header">
<div class="hamburger">
<span class="bar bar-top"></span>
<span class="bar bar-center"></span>
<span class="bar bar-bottom"></span>
</div>
<%= link_to root_path do %>
<div class="logo-image"></div>
<% end %>
<%#Notification of unread notifications%>
<div class="alert">
<i id="alert-bell" class="fa-2x far fa-bell"><div class="hidden icon"></div></i>
</div>
<%#Hamburger menu%>
<div class="hamburger-menu">
<ul>
<% if public_user_signed_in? %>
<li><%= link_to 'MyPage', mypage_path(current_public_user) %></li>
<% else %>
<li><%= link_to 'sign up', new_public_user_registration_path %></li>
<li><%= link_to 'Login', new_public_user_session_path %></li>
<% end %>
<li><%= link_to 'Service introduction', about_path %></li>
<li><%= link_to 'Restaurant list', public_restaurants_path %></li>
<li><%= link_to 'Menu list', public_menus_path %></li>
<% if public_user_signed_in? %>
<li><%= link_to 'Log out', destroy_public_user_session_path, method: :delete %></li>
<% end %>
</ul>
</div>
</div>
</div>
</header>
<main>
<div class="body-container">
<%= yield %>
</div>
</main>
<footer>
<div class="flex footer-container">
<%= link_to root_path do %>
<div class="logo-image"></div>
<% end %>
<div class="footer-menu">
<ul class="footer-links">
<li><%= link_to 'Contact Us', contacts_new_path %></li>
<li><%= link_to 'Terms of service', terms_path %></li>
<li><%= link_to 'privacy policy', privacy_path %></li>
<li><%= link_to 'Operator information', admin_path %></li>
</ul>
</div>
</div>
<div class="copyright">
<small>©︎ 2020 MasaoSasaki</small>
</div>
<div id="move-head">
<div class="circle move-head"><i class="fa-2x fas fa-arrow-up"></i></div>
</div>
</body>
</footer>
</html>
slim:application.html.slim
doctype html
html lang="ja"
head
= favicon_link_tag('favicon.ico')
= favicon_link_tag 'home-icon.png', rel: 'apple-touch-icon', size: '180x180', type: 'image/png'
= favicon_link_tag 'home-icon.png', rel: 'android-touch-icon', size: '192x192', type: 'image/png'
title Matchi
script src="//maps.google.com/maps/api/js?key=#{ENV['GOOGLE_PLATFORM_API_KEY']}"
= include_gon
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application'
meta name="viewport" content="width=device-width,initial-scale=1"
link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"
/ Global site tag (gtag.js) - Google Analytics
javascript: async src="https://www.googletagmanager.com/gtag/js?id=#{ENV['GOOGLE_ANALYTICS_TRACKING_ID']}"
body
header
.header-container
/PC screen header
.flex.pc-header
= link_to root_path
.logo-image
.header-nav
nav
ul.flex.header-ul
- url = request.fullpath
/to url'owner'If there is a store header
- if url.include?('owner')
- if master_admin_signed_in?
li = link_to 'Top administrator', new_master_admin_session_path
li = link_to 'Admin log out', destroy_master_admin_session_path, method: :delete
- if owner_restaurant_signed_in?
li = link_to 'Store top', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete
- if public_user_signed_in?
li = link_to 'General member TOP', mypage_path(current_public_user)
li = link_to 'General member logout', destroy_public_user_session_path, method: :delete
- else
li = link_to 'General member login', new_public_user_session_path
/to url'master'Admin header, if any
- elsif url.include?('master')
- if master_admin_signed_in?
li = link_to 'New store registration', new_owner_restaurant_registration_path
li = link_to 'Top administrator', new_master_admin_session_path
li = link_to 'Admin log out', destroy_master_admin_session_path, method: :delete
- if public_user_signed_in?
li = link_to 'General member TOP', mypage_path(current_public_user)
li = link_to 'General member logout', destroy_public_user_session_path, method: :delete
- else
li = link_to 'General member login', new_public_user_session_path
- if owner_restaurant_signed_in?
li = link_to 'Store top', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete
- else
li = link_to 'Store login', new_owner_restaurant_session_path
/Other than the above, header for general users
- else
- if master_admin_signed_in? && owner_restaurant_signed_in?
li = link_to 'Top administrator', new_master_admin_session_path
li = link_to 'Admin log out', destroy_master_admin_session_path, method: :delete
li = link_to 'Store TOP', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete
- elsif owner_restaurant_signed_in?
li = link_to 'Store TOP', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Store logout', destroy_owner_restaurant_session_path, method: :delete
- elsif master_admin_signed_in?
li = link_to 'Top administrator', new_master_admin_session_path
li = link_to 'Admin log out', destroy_master_admin_session_path, method: :delete
li = link_to 'Store login', new_owner_restaurant_session_path
- if public_user_signed_in?
li = link_to 'MyPage', mypage_path(current_public_user)
/ if alert.count >= 1
li = link_to 'I have news.'
li = link_to 'Log out', destroy_public_user_session_path, method: :delete
- else
li = link_to 'sign up', new_public_user_registration_path
li = link_to 'Login', new_public_user_session_path
/Smartphone screen header
.flex.sp-header
.hamburger
span.bar.bar-top
span.bar.bar-center
span.bar.bar-bottom
= link_to root_path
.logo-image
/Notification of unread notifications
.alert
i#alert-bell.fa-2x.far.fa-bell
.hidden.icon
/Hamburger menu
.hamburger-menu
ul
- if public_user_signed_in?
li = link_to 'MyPage', mypage_path(current_public_user)
- else
li = link_to 'sign up', new_public_user_registration_path
li = link_to 'Login', new_public_user_session_path
li = link_to 'Service introduction', about_path
li = link_to 'Restaurant list', public_restaurants_path
li = link_to 'Menu list', public_menus_path
- if public_user_signed_in?
li = link_to 'Log out', destroy_public_user_session_path, method: :delete
main
.body-container == yield
footer
.flex.footer-container
= link_to root_path
.logo-image
.footer-menu
ul.footer-links
li = link_to 'Contact Us', contacts_new_path
li = link_to 'Terms of service', terms_path
li = link_to 'privacy policy', privacy_path
li = link_to 'Operator information', admin_path
.copyright
small ©︎ 2020 MasaoSasaki
#move-head
.circle.move-head
i.fa-2x.fas.fa-arrow-up
new.html
erb:new.html.erb
<div class="contents menus-new">
<h2>Menu addition</h2>
<%= render partial: 'form', locals: {
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menus_path,
truth: false, submit: 'Create'
} %>
</div>
slim:new.html.slim
.contents.menus-new
h2 menu added
== render 'form',
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menus_path,
truth: false, submit: 'Create'
edit.html
erb:edit.html.erb
<div class="contents menus-edit">
<h2 class="menus-edit-h2">Menu editing</h2>
<%= render partial: 'form', locals: {
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menu_path,
truth: true, submit: 'update'
} %>
</div>
slim:edit.html.slim
contents.menus-edit
h2.menus-edit-h2 menu edit
== render 'form',
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menu_path,
truth: true, submit: 'update'
_form.html
erb:_form.html.erb
<div class="menu-form">
<%= form_with model: [restaurant, menu], url: path, local: true do |f| %>
<section class="menu-status">
<div class="menu-form1">
<h3>Menu details</h3>
<table>
<tbody>
<tr>
<td><%= f.label :title, value: 'Menu name' %></td>
<td><%= f.text_field :title %></td>
</tr>
<tr>
<td><%= f.label :regular_price, value: 'Regular price (excluding tax):' %></td>
<td><%= f.number_field :regular_price %>Circle</td>
</tr>
<tr>
<td><%= f.label :discount_price, value: 'Offer price (excluding tax):' %></td>
<td><%= f.number_field :discount_price %>Circle</td>
</tr>
<tr>
<td><%= f.label :reservation_method, value: 'Reservation method' %></td>
<td><%= f.select :reservation_method, Menu.reservation_methods.keys.map {|method| [method]} %></td>
</tr>
<tr>
<td><%= f.label :is_sale_frag, value: 'Sales status' %></td>
<td><%= f.select :is_sale_frag, [['Sale', true], ['Suspended', false]] %></td>
</tr>
</tbody>
</table>
</div>
<div class="menu-form2">
<h3>Menu image</h3>
<div class="menu-image">
<%= f.attachment_field :menu_image %>
<div class="image-preview"></div>
<h4>Add tag (optional)</h4>
<%= text_field_tag :tag_name %>
<%= button_tag 'add to', type: 'button', class: "add-tag-btn" %>
<div id="tag-list"></div>
</div>
</div>
</div>
</section>
<section class="menu-tag-form">
<h3>Tag details</h3>
<table>
<tbody>
<%#Display only on the edit screen%>
<% if truth %>
<tr>
<td><h4>Current tag list</h4></td>
<td>
<% menu_tags.each do |menu_tag| %>
<div class="menu-tag">
<%= Tag.find(menu_tag.tag_id).name %>
<%= link_to 'x', {controller: 'menu_tags', action: 'destroy', tag_id: menu_tag, menu_id: params[:id], restaurant_id: params[:restaurant_id]}, method: :delete %>
</div>
<% end %>
</td>
</tr>
<% end %>
<tr>
<td><h4>Add tag<br>(Recommended to select one or more)</h4></td>
<td>
<% tag_count = 0 %>
<% tags.each do |tag| %>
<%#Show 7 recommended tags%>
<% if tag_count < 7 %>
<div class="check-box">
<% if menu_tags.exists?(tag_id: tag.id) %>
<%= check_box :tag_id, tag.id, checked: true %>
<%= label_tag :tag_id, "#{tag.name}"%>
<% else %>
<%= check_box :tag_id, tag.id %>
<%= label_tag :tag_id, "#{tag.name}"%>
<% end %>
</div>
<% tag_count += 1 %>
<% else %>
<% break %>
<% end %>
<% end %>
</td>
</tr>
</tbody>
</table>
</section>
<section class="menu-form-area">
<div class="content-form">
<p><%= f.label :content, value: 'Contents' %></p>
<%= f.text_area :content %>
</div>
<div class="cancel-form">
<p><%= f.label :cancel, value: 'Cancellation Policy' %></p>
<%= f.text_area :cancel %>
</div>
</section>
<div class="submit"><%= f.button "#{submit}", onclick: 'submit();', type: 'button', class: 'btn' %></div>
<% end %>
</div>
slim:_form.html.slim
.menu-form
= form_with model: [restaurant, menu], url: path, local: true do |f|
section.menu-status
.menu-form1
h3 menu details
table
tbody
tr
td = f.label :title, value: 'Menu name'
td = f.text_field :title
tr
td = f.label :regular_price, value: 'Regular price (excluding tax):'
td
= f.number_field :regular_price
|Circle
tr
td = f.label :discount_price, value: 'Offer price (excluding tax):'
td
= f.number_field :discount_price
|Circle
tr
td = f.label :reservation_method, value: 'Reservation method'
td = f.select :reservation_method, Menu.reservation_methods.keys.map {|method| [method]}
tr
td = f.label :is_sale_frag, value: 'Sales status'
td = f.select :is_sale_frag, [['Sale', true], ['Suspended', false]]
.menu-form2
h3 menu image
.menu-image
= f.attachment_field :menu_image
.image-preview
Add h4 tag (optional)
= text_field_tag :tag_name
= button_tag 'add to', type: 'button', class: "add-tag-btn"
#tag-list
section.menu-tag-form
h3 tag details
table
tbody
/Display only on the edit screen
- if truth
tr
td:h4 Current tag list
td
- menu_tags.each do |menu_tag|
.menu-tag
= Tag.find(menu_tag.tag_id).name
= link_to 'x', {controller: 'menu_tags', action: 'destroy', tag_id: menu_tag, menu_id: params[:id], restaurant_id: params[:restaurant_id]}, method: :delete
tr
td:Add h4 tag<br>(Recommended to select one or more)
td
- tag_count = 0
- tags.each do |tag|
/Show 7 recommended tags
- if tag_count < 7
.check-box
- if menu_tags.exists?(tag_id: tag.id)
= check_box :tag_id, tag.id, checked: true
= label_tag :tag_id, "#{tag.name}"
- else
= check_box :tag_id, tag.id
= label_tag :tag_id, "#{tag.name}"
- tag_count += 1
- else
- breeak
section.menu-form-area
.content-form
p = f.label :content, value: 'Contents'
= f.text_area :content
.cancel-form
p = f.label :cancel, value: 'Cancellation Policy'
= f.text_area :cancel
.submit= f.button "#{submit}", onclick: 'submit();', type: 'button', class: 'btn'
All the above codes have been confirmed to work. Comparing the code amount of .erb and .slim, it is about 2/3. Indentation is very important, and if you make a mistake in indentation, you will usually get a syntax error. In that case, I commented out each block to check. With application.html.slim, comment out all the body, start only in the head, and if there is a syntax error in the head, use comment out again to isolate the problem. I hope it will be helpful for those who are thinking of rewriting to slim from now on.
If you have any questions, questions, differences in interpretation, or discomfort in the description method, please let us know in the comments.
Thank you for reading until the end.
GitHub - slim Qiita --Quick Learning Template Slim (HTML Creation) Qiita-HTML template engine of Rails, basic notation of Slim Qiita-[Learn at explosive speed] From how to use slim with Rails to basic grammar Qiita --Slim Code Refactoring GitHub - matchi_ver.slim
Recommended Posts