Ruby 2.5.7 Rails 5.2.4
Ich verwende .erb als Rails-Template-Engine, aber es gibt auch andere Template-Engines wie .haml und .slim.
Dieses Mal war ich an ".slim" interessiert, und ich habe einen Teil der vorhandenen ".erb" -Datei in ".slim" geändert und den Vorgang bestätigt, sodass ich den Prozess schreiben werde.
Es wird fast eine Fallstudie sein, also beziehen Sie sich bitte darauf.
Die grundlegenden Änderungen sind wie folgt.
slim:example.html.slim
/Nur das Start-Tag, nicht das End-Tag
<body></body>
=>
body
<h1>Titel</h1>
=>
h1 Titel
/ID Name Klassenname wird fortlaufend geschrieben
<ul class="list"></ul>
=>
ul.list
<span id="btn"></span>
=>
span#btn
/div lässt sogar div aus
<div id="main-contents" class="flex container" ></div>
=>
#main-contents.flex.container
/Ruby-Code<%= %>Wurde weggelassen(=Was ist=Einfach schreiben)
<%= link_to 'Nächster' %>
=>
= link_to 'Nächster'
/ <% %> =Die ohne sind am Anfang-Anziehen
/ <% end %>Werden alle weggelassen (Schleifenanweisungen usw.)
<%wenn bedingte Anweisung%>
<% else %>
<% end %>
=>
-wenn bedingte Anweisung
- else
Einzelheiten zur Syntax finden Sie hier. GitHub - slim Qiita - Schnelle Lernvorlage Slim (HTML-Erstellung) Qiita - Rails HTML Template Engine, schlanke Grundnotation Qiita- [Mit explosiver Geschwindigkeit lernen] Von der Verwendung von Slim mit Rails bis zur grundlegenden Grammatik
Von hier aus werde ich die folgenden 4 Dateitypen vorstellen, die ich tatsächlich im Vorher / Nachher-Format geändert habe. *application.html.erb/slim *_form.html.erb/slim *new.html.erb/slim *edit.html.erb/slim
Diese View-Dateien sind auch auf meinem GitHub verfügbar. 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-Bildschirmkopfzeile%>
<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 %>
<%#Zu url'owner'Wenn es einen Store-Header gibt%>
<% if url.include?('owner') %>
<% if master_admin_signed_in? %>
<li><%= link_to 'Top Administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Administrator abmelden', destroy_master_admin_session_path, method: :delete %></li>
<% end %>
<% if owner_restaurant_signed_in? %>
<li><%= link_to 'Top oben aufbewahren', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Abmelden speichern', destroy_owner_restaurant_session_path, method: :delete %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'Generalmitglied TOP', mypage_path(current_public_user) %></li>
<li><%= link_to 'Allgemeine Abmeldung von Mitgliedern', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Allgemeine Mitgliederanmeldung', new_public_user_session_path %></li>
<% end %>
<%#Zu url'master'Administrator-Header, falls verfügbar%>
<% elsif url.include?('master') %>
<% if master_admin_signed_in? %>
<li><%= link_to 'Neue Filialregistrierung', new_owner_restaurant_registration_path %></li>
<li><%= link_to 'Top Administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Administrator abmelden', destroy_master_admin_session_path, method: :delete %></li>
<% end %>
<% if public_user_signed_in? %>
<li><%= link_to 'Generalmitglied TOP', mypage_path(current_public_user) %></li>
<li><%= link_to 'Allgemeine Abmeldung von Mitgliedern', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Allgemeine Mitgliederanmeldung', new_public_user_session_path %></li>
<% end %>
<% if owner_restaurant_signed_in? %>
<li><%= link_to 'Top oben aufbewahren', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Abmelden speichern', destroy_owner_restaurant_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Login speichern', new_owner_restaurant_session_path %></li>
<% end %>
<%#Anders als oben, allgemeiner Benutzerkopf%>
<% else %>
<% if master_admin_signed_in? && owner_restaurant_signed_in? %>
<li><%= link_to 'Top Administrator', new_master_admin_session_path %></li>
<li><%= link_to 'Administrator abmelden', destroy_master_admin_session_path, method: :delete %></li>
<li><%= link_to 'Speichern Sie TOP', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Abmelden speichern', destroy_owner_restaurant_session_path, method: :delete %></li>
<% elsif owner_restaurant_signed_in? %>
<li><%= link_to 'Speichern Sie TOP', owner_restaurant_path(current_owner_restaurant) %></li>
<li><%= link_to 'Abmelden speichern', 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 'Administrator abmelden', destroy_master_admin_session_path, method: :delete %></li>
<li><%= link_to 'Login speichern', 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 'Ich habe Neuigkeiten.' %></li>
<%# end %>
<li><%= link_to 'Ausloggen', destroy_public_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Anmelden', new_public_user_registration_path %></li>
<li><%= link_to 'Einloggen', new_public_user_session_path %></li>
<% end %>
<% end %>
</ul>
</nav>
</div>
</div>
<%#Smartphone-Kopfzeile%>
<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 %>
<%#Benachrichtigung über ungelesene Benachrichtigungen%>
<div class="alert">
<i id="alert-bell" class="fa-2x far fa-bell"><div class="hidden icon"></div></i>
</div>
<%#Hamburger Menü%>
<div class="hamburger-menu">
<ul>
<% if public_user_signed_in? %>
<li><%= link_to 'MyPage', mypage_path(current_public_user) %></li>
<% else %>
<li><%= link_to 'Anmelden', new_public_user_registration_path %></li>
<li><%= link_to 'Einloggen', new_public_user_session_path %></li>
<% end %>
<li><%= link_to 'Serviceeinführung', about_path %></li>
<li><%= link_to 'Liste der Restaurants', public_restaurants_path %></li>
<li><%= link_to 'Menüliste', public_menus_path %></li>
<% if public_user_signed_in? %>
<li><%= link_to 'Ausloggen', 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 'Kontaktiere uns', contacts_new_path %></li>
<li><%= link_to 'Nutzungsbedingungen', terms_path %></li>
<li><%= link_to 'Datenschutz-Bestimmungen', privacy_path %></li>
<li><%= link_to 'Bedienerinformationen', 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-Bildschirmkopfzeile
.flex.pc-header
= link_to root_path
.logo-image
.header-nav
nav
ul.flex.header-ul
- url = request.fullpath
/Zu url'owner'Wenn es einen Store-Header gibt
- if url.include?('owner')
- if master_admin_signed_in?
li = link_to 'Top Administrator', new_master_admin_session_path
li = link_to 'Administrator abmelden', destroy_master_admin_session_path, method: :delete
- if owner_restaurant_signed_in?
li = link_to 'Top oben aufbewahren', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Abmelden speichern', destroy_owner_restaurant_session_path, method: :delete
- if public_user_signed_in?
li = link_to 'Generalmitglied TOP', mypage_path(current_public_user)
li = link_to 'Allgemeine Abmeldung von Mitgliedern', destroy_public_user_session_path, method: :delete
- else
li = link_to 'Allgemeine Mitgliederanmeldung', new_public_user_session_path
/Zu url'master'Administrator-Header, falls verfügbar
- elsif url.include?('master')
- if master_admin_signed_in?
li = link_to 'Neue Filialregistrierung', new_owner_restaurant_registration_path
li = link_to 'Top Administrator', new_master_admin_session_path
li = link_to 'Administrator abmelden', destroy_master_admin_session_path, method: :delete
- if public_user_signed_in?
li = link_to 'Generalmitglied TOP', mypage_path(current_public_user)
li = link_to 'Allgemeine Abmeldung von Mitgliedern', destroy_public_user_session_path, method: :delete
- else
li = link_to 'Allgemeine Mitgliederanmeldung', new_public_user_session_path
- if owner_restaurant_signed_in?
li = link_to 'Top oben aufbewahren', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Abmelden speichern', destroy_owner_restaurant_session_path, method: :delete
- else
li = link_to 'Login speichern', new_owner_restaurant_session_path
/Anders als oben, allgemeiner Benutzerkopf
- else
- if master_admin_signed_in? && owner_restaurant_signed_in?
li = link_to 'Top Administrator', new_master_admin_session_path
li = link_to 'Administrator abmelden', destroy_master_admin_session_path, method: :delete
li = link_to 'Speichern Sie TOP', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Abmelden speichern', destroy_owner_restaurant_session_path, method: :delete
- elsif owner_restaurant_signed_in?
li = link_to 'Speichern Sie TOP', owner_restaurant_path(current_owner_restaurant)
li = link_to 'Abmelden speichern', 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 'Administrator abmelden', destroy_master_admin_session_path, method: :delete
li = link_to 'Login speichern', 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 'Ich habe Neuigkeiten.'
li = link_to 'Ausloggen', destroy_public_user_session_path, method: :delete
- else
li = link_to 'Anmelden', new_public_user_registration_path
li = link_to 'Einloggen', new_public_user_session_path
/Smartphone-Kopfzeile
.flex.sp-header
.hamburger
span.bar.bar-top
span.bar.bar-center
span.bar.bar-bottom
= link_to root_path
.logo-image
/Benachrichtigung über ungelesene Benachrichtigungen
.alert
i#alert-bell.fa-2x.far.fa-bell
.hidden.icon
/Hamburger Menü
.hamburger-menu
ul
- if public_user_signed_in?
li = link_to 'MyPage', mypage_path(current_public_user)
- else
li = link_to 'Anmelden', new_public_user_registration_path
li = link_to 'Einloggen', new_public_user_session_path
li = link_to 'Serviceeinführung', about_path
li = link_to 'Liste der Restaurants', public_restaurants_path
li = link_to 'Menüliste', public_menus_path
- if public_user_signed_in?
li = link_to 'Ausloggen', 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 'Kontaktiere uns', contacts_new_path
li = link_to 'Nutzungsbedingungen', terms_path
li = link_to 'Datenschutz-Bestimmungen', privacy_path
li = link_to 'Bedienerinformationen', 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>Menüzusatz</h2>
<%= render partial: 'form', locals: {
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menus_path,
truth: false, submit: 'Erstellen'
} %>
</div>
slim:new.html.slim
.contents.menus-new
h2 Menü hinzugefügt
== render 'form',
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menus_path,
truth: false, submit: 'Erstellen'
edit.html
erb:edit.html.erb
<div class="contents menus-edit">
<h2 class="menus-edit-h2">Menübearbeitung</h2>
<%= render partial: 'form', locals: {
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menu_path,
truth: true, submit: 'aktualisieren'
} %>
</div>
slim:edit.html.slim
contents.menus-edit
h2.menus-edit-h2 Menü bearbeiten
== render 'form',
restaurant: @restaurant,
menu: @menu,
tags: @tags,
menu_tags: @menu_tags,
path: owner_restaurant_menu_path,
truth: true, submit: 'aktualisieren'
_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>Menü Details</h3>
<table>
<tbody>
<tr>
<td><%= f.label :title, value: 'Menüname' %></td>
<td><%= f.text_field :title %></td>
</tr>
<tr>
<td><%= f.label :regular_price, value: 'Regulärer Preis (ohne Steuern):' %></td>
<td><%= f.number_field :regular_price %>Kreis</td>
</tr>
<tr>
<td><%= f.label :discount_price, value: 'Angebotspreis (ohne Steuern):' %></td>
<td><%= f.number_field :discount_price %>Kreis</td>
</tr>
<tr>
<td><%= f.label :reservation_method, value: 'Reservierungsmethode' %></td>
<td><%= f.select :reservation_method, Menu.reservation_methods.keys.map {|method| [method]} %></td>
</tr>
<tr>
<td><%= f.label :is_sale_frag, value: 'Verkaufsstatus' %></td>
<td><%= f.select :is_sale_frag, [['Verkauf', true], ['Suspendiert', false]] %></td>
</tr>
</tbody>
</table>
</div>
<div class="menu-form2">
<h3>Menübild</h3>
<div class="menu-image">
<%= f.attachment_field :menu_image %>
<div class="image-preview"></div>
<h4>Tag hinzufügen (optional)</h4>
<%= text_field_tag :tag_name %>
<%= button_tag 'hinzufügen', 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>
<%#Nur auf dem Bearbeitungsbildschirm anzeigen%>
<% if truth %>
<tr>
<td><h4>Aktuelle Tag-Liste</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>Tag hinzufügen<br>(Empfohlen, um eine oder mehrere auszuwählen)</h4></td>
<td>
<% tag_count = 0 %>
<% tags.each do |tag| %>
<%#Zeige 7 empfohlene 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: 'Inhalt' %></p>
<%= f.text_area :content %>
</div>
<div class="cancel-form">
<p><%= f.label :cancel, value: 'Stornierungsbedingungen' %></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 Menü Details
table
tbody
tr
td = f.label :title, value: 'Menüname'
td = f.text_field :title
tr
td = f.label :regular_price, value: 'Regulärer Preis (ohne Steuern):'
td
= f.number_field :regular_price
|Kreis
tr
td = f.label :discount_price, value: 'Angebotspreis (ohne Steuern):'
td
= f.number_field :discount_price
|Kreis
tr
td = f.label :reservation_method, value: 'Reservierungsmethode'
td = f.select :reservation_method, Menu.reservation_methods.keys.map {|method| [method]}
tr
td = f.label :is_sale_frag, value: 'Verkaufsstatus'
td = f.select :is_sale_frag, [['Verkauf', true], ['Suspendiert', false]]
.menu-form2
h3 Menübild
.menu-image
= f.attachment_field :menu_image
.image-preview
H4-Tag hinzufügen (optional)
= text_field_tag :tag_name
= button_tag 'hinzufügen', type: 'button', class: "add-tag-btn"
#tag-list
section.menu-tag-form
Details zum h3-Tag
table
tbody
/Nur auf dem Bearbeitungsbildschirm anzeigen
- if truth
tr
td:h4 Aktuelle Tag-Liste
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:H4-Tag hinzufügen<br>(Empfohlen, um eine oder mehrere auszuwählen)
td
- tag_count = 0
- tags.each do |tag|
/Zeige 7 empfohlene 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: 'Inhalt'
= f.text_area :content
.cancel-form
p = f.label :cancel, value: 'Stornierungsbedingungen'
= f.text_area :cancel
.submit= f.button "#{submit}", onclick: 'submit();', type: 'button', class: 'btn'
Es wurde bestätigt, dass alle oben genannten Codes funktionieren. Vergleicht man die Code-Menge von .erb und .slim, so beträgt sie ungefähr 2/3. Einrückung ist sehr wichtig, und wenn Sie beim Einrücken einen Fehler machen, wird normalerweise ein Syntaxfehler angezeigt. In diesem Fall habe ich jeden zu überprüfenden Block auskommentiert. Kommentieren Sie mit application.html.slim den gesamten Text aus, beginnen Sie nur im Kopf. Wenn im Kopf ein Syntaxfehler vorliegt, verwenden Sie den Kommentar erneut, um das Problem zu isolieren. Ich hoffe, es wird hilfreich sein für diejenigen, die von nun an daran denken, neu zu schreiben, um schlank zu werden.
Wenn Sie Fragen oder Bedenken im Code haben, Fragen, Unterschiede in der Interpretation oder wenn Sie der Meinung sind, dass etwas mit der Beschreibungsmethode nicht stimmt, würden wir uns freuen, wenn Sie in den Kommentaren darauf hinweisen könnten.
Vielen Dank für das Lesen bis zum Ende.
GitHub - slim Qiita - Schnelle Lernvorlage Slim (HTML-Erstellung) Qiita - Rails HTML Template Engine, schlanke Grundnotation Qiita- [Mit explosiver Geschwindigkeit lernen] Von der Verwendung von Slim mit Rails bis zur grundlegenden Grammatik Qiita --Slim Code Refactoring GitHub - matchi_ver.slim
Recommended Posts