Ruby 2.5.7 Rails 5.2.4
J'utilise .erb
comme moteur de modèle Rails, mais il existe d'autres moteurs de modèle tels que .haml
et .slim
.
J'étais intéressé par .slim
cette fois, et j'ai changé une partie du fichier .erb
existant en .slim
et j'ai confirmé l'opération, donc j'écrirai le processus.
Ce sera presque une étude de cas, alors veuillez vous y référer.
Les changements de base sont les suivants.
slim:example.html.slim
/Seulement la balise de début, pas la balise de fin
<body></body>
=>
body
<h1>Titre</h1>
=>
titre h1
/nom de l'id le nom de la classe est écrit en continu
<ul class="list"></ul>
=>
ul.list
<span id="btn"></span>
=>
span#btn
/div omet même div
<div id="main-contents" class="flex container" ></div>
=>
#main-contents.flex.container
/code rubis<%= %>Est omis(=Quel est=Ecrivez)
<%= link_to 'prochain' %>
=>
= link_to 'prochain'
/ <% %> =Ceux sans c'est au début-Mettez
/ <% end %>Sont tous omis (instructions de boucle, etc.)
<%si instruction conditionnelle%>
<% else %>
<% end %>
=>
-si instruction conditionnelle
- else
Voir ici pour plus de détails sur la syntaxe. GitHub - slim Qiita - Modèle d'apprentissage rapide Slim (création HTML) Qiita - Moteur de modèle HTML Rails, notation de base Slim Qiita- [Apprendre à une vitesse explosive] De la façon d'utiliser Slim avec Rails à la grammaire de base
À partir de là, je présenterai les 4 types de fichiers suivants que j'ai réellement modifiés au format avant / après. *application.html.erb/slim *_form.html.erb/slim *new.html.erb/slim *edit.html.erb/slim
Ces fichiers View sont également disponibles sur mon 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">
<%#En-tête d'écran PC%>
<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 %>
<%#Vers l'URL'owner'S'il y a un en-tête de magasin%>
<% if url.include?('owner') %>
<% if master_admin_signed_in? %>
<li><%= link_to 'Administrateur supérieur', new_master_admin_session_path %></li>
<li><%= link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete %></li>
<% end %>
<% if owner_restaurant_signed_in? %>
<li><%= link_to 'Haut de la boutique', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'Membre général TOP', mypage_path(current_public_user) %></li>
<li><%= link_to 'Déconnexion générale des membres', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Connexion membre général', new_public_user_session_path %></li>
<% end %>
<%#Vers l'URL'master'En-tête d'administrateur si disponible%>
<% elsif url.include?('master') %>
<% if master_admin_signed_in? %>
<li><%= link_to 'Nouvelle inscription en magasin', new_owner_restaurant_registration_path %></li>
<li><%= link_to 'Administrateur supérieur', new_master_admin_session_path %></li>
<li><%= link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'Membre général TOP', mypage_path(current_public_user) %></li>
<li><%= link_to 'Déconnexion générale des membres', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Connexion membre général', new_public_user_session_path %></li>
<% end %>
<% if owner_restaurant_signed_in? %>
<li><%= link_to 'Haut de la boutique', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Connexion au magasin', new_owner_restaurant_session_path %></li>
<% end %>
<%#Autre que ce qui précède, en-tête utilisateur général%>
<% else %>
<% if master_admin_signed_in? && owner_restaurant_signed_in? %>
<li><%= link_to 'Administrateur supérieur', new_master_admin_session_path %></li>
<li><%= link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete %></li>
<li><%= link_to 'Magasin TOP', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete %></li>
<% elsif owner_restaurant_signed_in? %>
<li><%= link_to 'Magasin TOP', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete %></li>
<% elsif master_admin_signed_in? %>
<li><%= link_to 'Administrateur supérieur', new_master_admin_session_path %></li>
<li><%= link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete %></li>
<li><%= link_to 'Connexion au magasin', 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 'J'ai des nouvelles.' %></li>
<%# end %>
<li><%= link_to 'Se déconnecter', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 's'inscrire', new_public_user_registration_path %></li>
<li><%= link_to 'S'identifier', new_public_user_session_path %></li>
<% end %>
<% end %>
</ul>
</nav>
</div>
</div>
<%#En-tête d'écran de smartphone%>
<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 des notifications non lues%>
<div class="alert">
<i id="alert-bell" class="fa-2x far fa-bell"><div class="hidden icon"></div></i>
</div>
<%#Menu hamburger%>
<div class="hamburger-menu">
<ul>
<% if public_user_signed_in? %>
<li><%= link_to 'MyPage', mypage_path(current_public_user) %></li>
<% else %>
<li><%= link_to 's'inscrire', new_public_user_registration_path %></li>
<li><%= link_to 'S'identifier', new_public_user_session_path %></li>
<% end %>
<li><%= link_to 'Présentation du service', about_path %></li>
<li><%= link_to 'Liste des restaurants', public_restaurants_path %></li>
<li><%= link_to 'Liste des menus', public_menus_path %></li>
<% if public_user_signed_in? %>
<li><%= link_to 'Se déconnecter', 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 'Nous contacter', contacts_new_path %></li>
<li><%= link_to 'Conditions d'utilisation', terms_path %></li>
<li><%= link_to 'politique de confidentialité', privacy_path %></li>
<li><%= link_to 'Information opérateur', 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
/En-tête d'écran PC
.flex.pc-header
= link_to root_path
.logo-image
.header-nav
nav
ul.flex.header-ul
- url = request.fullpath
/Vers l'URL'owner'S'il y a un en-tête de magasin
- if url.include?('owner')
- if master_admin_signed_in?
li = link_to 'Administrateur supérieur', new_master_admin_session_path
li = link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete
- if owner_restaurant_signed_in?
li = link_to 'Haut de la boutique', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete
- if public_user_signed_in?
li = link_to 'Membre général TOP', mypage_path(current_public_user)
li = link_to 'Déconnexion générale des membres', destroy_public_user_session_path, method: :delete
- else
li = link_to 'Connexion membre général', new_public_user_session_path
/Vers l'URL'master'En-tête d'administrateur si disponible
- elsif url.include?('master')
- if master_admin_signed_in?
li = link_to 'Nouvelle inscription en magasin', new_owner_restaurant_registration_path
li = link_to 'Administrateur supérieur', new_master_admin_session_path
li = link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete
- if public_user_signed_in?
li = link_to 'Membre général TOP', mypage_path(current_public_user)
li = link_to 'Déconnexion générale des membres', destroy_public_user_session_path, method: :delete
- else
li = link_to 'Connexion membre général', new_public_user_session_path
- if owner_restaurant_signed_in?
li = link_to 'Haut de la boutique', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete
- else
li = link_to 'Connexion au magasin', new_owner_restaurant_session_path
/Autre que ce qui précède, en-tête utilisateur général
- else
- if master_admin_signed_in? && owner_restaurant_signed_in?
li = link_to 'Administrateur supérieur', new_master_admin_session_path
li = link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete
li = link_to 'Magasin TOP', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete
- elsif owner_restaurant_signed_in?
li = link_to 'Magasin TOP', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Déconnexion du magasin', destroy_owner_restaurant_session_path, method: :delete
- elsif master_admin_signed_in?
li = link_to 'Administrateur supérieur', new_master_admin_session_path
li = link_to 'Déconnexion de l'administrateur', destroy_master_admin_session_path, method: :delete
li = link_to 'Connexion au magasin', 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 'J'ai des nouvelles.'
li = link_to 'Se déconnecter', destroy_public_user_session_path, method: :delete
- else
li = link_to 's'inscrire', new_public_user_registration_path
li = link_to 'S'identifier', new_public_user_session_path
/En-tête d'écran de smartphone
.flex.sp-header
.hamburger
span.bar.bar-top
span.bar.bar-center
span.bar.bar-bottom
= link_to root_path
.logo-image
/Notification des notifications non lues
.alert
i#alert-bell.fa-2x.far.fa-bell
.hidden.icon
/Menu hamburger
.hamburger-menu
ul
- if public_user_signed_in?
li = link_to 'MyPage', mypage_path(current_public_user)
- else
li = link_to 's'inscrire', new_public_user_registration_path
li = link_to 'S'identifier', new_public_user_session_path
li = link_to 'Présentation du service', about_path
li = link_to 'Liste des restaurants', public_restaurants_path
li = link_to 'Liste des menus', public_menus_path
- if public_user_signed_in?
li = link_to 'Se déconnecter', 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 'Nous contacter', contacts_new_path
li = link_to 'Conditions d'utilisation', terms_path
li = link_to 'politique de confidentialité', privacy_path
li = link_to 'Information opérateur', 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>Ajout de menu</h2>
<%= render partial: 'form', locals: {
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menus_path,
truth: false, submit: 'Créer'
} %>
</div>
slim:new.html.slim
.contents.menus-new
Menu h2 ajouté
== render 'form',
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menus_path,
truth: false, submit: 'Créer'
edit.html
erb:edit.html.erb
<div class="contents menus-edit">
<h2 class="menus-edit-h2">Édition du menu</h2>
<%= render partial: 'form', locals: {
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menu_path,
truth: true, submit: 'mise à jour'
} %>
</div>
slim:edit.html.slim
contents.menus-edit
h2.menus-edit-Modifier le menu h2
== render 'form',
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menu_path,
truth: true, submit: 'mise à jour'
_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>Détails du menu</h3>
<table>
<tbody>
<tr>
<td><%= f.label :title, value: 'Nom du menu' %></td>
<td><%= f.text_field :title %></td>
</tr>
<tr>
<td><%= f.label :regular_price, value: 'Prix régulier (hors taxes):' %></td>
<td><%= f.number_field :regular_price %>Cercle</td>
</tr>
<tr>
<td><%= f.label :discount_price, value: 'Prix de l'offre (hors taxes):' %></td>
<td><%= f.number_field :discount_price %>Cercle</td>
</tr>
<tr>
<td><%= f.label :reservation_method, value: 'Méthode de réservation' %></td>
<td><%= f.select :reservation_method, Menu.reservation_methods.keys.map {|method| [method]} %></td>
</tr>
<tr>
<td><%= f.label :is_sale_frag, value: 'Statut des ventes' %></td>
<td><%= f.select :is_sale_frag, [['Vente', true], ['Suspendu', false]] %></td>
</tr>
</tbody>
</table>
</div>
<div class="menu-form2">
<h3>Image du menu</h3>
<div class="menu-image">
<%= f.attachment_field :menu_image %>
<div class="image-preview"></div>
<h4>Ajouter une balise (facultatif)</h4>
<%= text_field_tag :tag_name %>
<%= button_tag 'ajouter à', type: 'button', class: "add-tag-btn" %>
<div id="tag-list"></div>
</div>
</div>
</div>
</section>
<section class="menu-tag-form">
<h3>Détails du tag</h3>
<table>
<tbody>
<%#Afficher uniquement sur l'écran d'édition%>
<% if truth %>
<tr>
<td><h4>Liste de balises actuelle</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>Ajouter une étiquette<br>(Recommandé pour en sélectionner un ou plusieurs)</h4></td>
<td>
<% tag_count = 0 %>
<% tags.each do |tag| %>
<%#Afficher 7 tags recommandés%>
<% 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: 'Contenu' %></p>
<%= f.text_area :content %>
</div>
<div class="cancel-form">
<p><%= f.label :cancel, value: 'Politique d'annulation' %></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
détails du menu h3
table
tbody
tr
td = f.label :title, value: 'Nom du menu'
td = f.text_field :title
tr
td = f.label :regular_price, value: 'Prix régulier (hors taxes):'
td
= f.number_field :regular_price
|Cercle
tr
td = f.label :discount_price, value: 'Prix de l'offre (hors taxes):'
td
= f.number_field :discount_price
|Cercle
tr
td = f.label :reservation_method, value: 'Méthode de réservation'
td = f.select :reservation_method, Menu.reservation_methods.keys.map {|method| [method]}
tr
td = f.label :is_sale_frag, value: 'Statut des ventes'
td = f.select :is_sale_frag, [['Vente', true], ['Suspendu', false]]
.menu-form2
Image du menu h3
.menu-image
= f.attachment_field :menu_image
.image-preview
Ajouter une balise h4 (facultatif)
= text_field_tag :tag_name
= button_tag 'ajouter à', type: 'button', class: "add-tag-btn"
#tag-list
section.menu-tag-form
détails de la balise h3
table
tbody
/Afficher uniquement sur l'écran d'édition
- if truth
tr
td:h4 Liste de balises actuelle
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:Ajouter une balise h4<br>(Recommandé pour en sélectionner un ou plusieurs)
td
- tag_count = 0
- tags.each do |tag|
/Afficher 7 tags recommandés
- 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: 'Contenu'
= f.text_area :content
.cancel-form
p = f.label :cancel, value: 'Politique d'annulation'
= f.text_area :cancel
.submit= f.button "#{submit}", onclick: 'submit();', type: 'button', class: 'btn'
Tous les codes ci-dessus ont été confirmés pour fonctionner. En comparant la quantité de code de .erb et .slim, elle est d'environ 2/3. L'indentation est très importante, et si vous faites une erreur d'indentation, vous obtiendrez généralement une erreur de syntaxe.Dans ce cas, j'ai commenté chaque bloc pour vérifier. Avec application.html.slim, commentez tout le corps, commencez uniquement dans la tête, et s'il y a une erreur de syntaxe dans la tête, utilisez à nouveau le commentaire pour isoler le problème. J'espère que cela sera utile pour ceux qui envisagent de réécrire pour mincir à partir de maintenant.
Si vous avez des questions ou des préoccupations concernant le code, des questions, des différences d'interprétation ou si vous pensez que quelque chose ne va pas avec la méthode de description, nous vous serions reconnaissants de bien vouloir le signaler dans les commentaires.
Merci d'avoir lu jusqu'au bout.
GitHub - slim Qiita - Modèle d'apprentissage rapide Slim (création HTML) Qiita - Moteur de modèle HTML Rails, notation de base Slim Qiita- [Apprendre à une vitesse explosive] De la façon d'utiliser Slim avec Rails à la grammaire de base Qiita - Refactoring de code mince GitHub - matchi_ver.slim
Recommended Posts