由於可能很多人會不習慣縮排的寫法來寫html
,然後在Day17以後的章節,漢漢老師會大量的使用縮排式的html,因而有這篇文章的誕生。
曾經有一段後端轉前端的經歷,除了要寫組織化的Vue
(以外,還要習慣Pug
的縮排寫法。當時在部門,後端的人除了一位寫過縮排的寫法以外,其他人一致不能接受html
的縮排寫法,而前端的話支持縮排寫法跟不支持的大約一半一半,而由於專案的初始為使用縮排寫,因此剛開始只能習慣這種新體驗。
寫了一段時間之後,發現用縮排寫的好處很多。即便Vue
是component based
的寫法,如果把component
切分的夠細的話,一個檔案內的html
不會太多,但用了縮排的寫法,真的簡潔很多,因此後來便愛上了。只能說如人飲水、冷暖自知,用過Rails的人才知道Rails的手,以及只有用過pug的人,才知道pug的好。
以下為404畫面的html
語法,我們要將它轉成 pug
<!DOCTYPE html>
<html>
<head>
<title>404 找不到頁面</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body class="rails-default-error-page">
<div class="center">
<div>
<h1 style="text-align: center;">404 Not Found.</h1>
</div>
<p style="text-align: center;">很抱歉,本頁面已不存在<br />請返回瀏覽其他頁面。</p>
<div style="display: flex; justify-content: center; margin-top: 20px">
<a href="https://ec.tun-grp.com/admin">
<button class="btn success" id="home_page_btn">返回首頁</button>
</a>
</div>
</div>
</body>
</html>
我們將404畫面轉成 pug
的形式。我們可以看到目前縮排的寫法,行數比用html
少了一些。越多html
,就可以看出縮排的效果。
doctype html
head
title 404 找不到頁面
meta(name='viewport' content='width=device-width,initial-scale=1')
meta(http-equiv='content-type' content='text/html; charset=utf-8')
.center
div
h1(style='text-align: center;') 404 Not Found.
p(style='text-align: center;')
| 很抱歉,本頁面已不存在
br
| 請返回瀏覽其他頁面
div(style='display: flex; justify-content: center; margin-top: 20px')
a(href='https://ec.tun-grp.com/admin')
button.btn.success#home_page_btn 返回首頁
線上有許多html pug converter,讀者都可以試試看,然而pug
是需要編譯的語言(詳情可以查看官方),如果想要試吮溫,不妨可以先在codeine.io試著寫寫看。
codepen.io 擁有豐富的環境可以寫各種環境,因此很推薦大家可以註冊並試試看。
Slim
為 Rails
模板語言的另外一種形式,標準的形式是erb
,而slim
為縮排形式的erb
。雖然之前寫過Pug,但畢竟slim
仍參雜了一些 rails
的語法,因此還是需要習慣。
slim 的基本架構如下:
javascript
分別可以用scss:
, javascript:
引入#{}
來引入變數/ html code
scss:
/* scss code */
javascript:
/* javascript code */
另外,我們將下列的erb
試著轉為 slim
<% @orders.each do |order| %>
<!-- 訂單 -->
<%= tag.div '訂單號碼' %>
<%= tag.div order.number %>
<!-- 價錢 -->
<%= tag.div '訂單價錢' %>
<%= tag.div order.price %>
<% end %>
- @orders.each do |order|
/ 訂單
= tag.div '訂單號碼'
= tag.div order.number
/ 價錢
= tag.div '訂單價錢'
= tag.div order.price
若要在slim
引入變數,可以使用#{}
表示。
.barcode-wrapper
| #{shipment.billing_number}
.sub-order-number #{shipment.billing_number}
Day18-22 會開始講畫面的使用技巧與用法,希望讀者看完畫面篇,可以有能力寫出簡潔有力的畫面。畫面篇的內容不難,只要掌握基本的技巧,就可以應付工作很多面向了
= title '退貨單明細'
= card do
= card_header(title: "退貨單: #{return_order.number}") do
= link_to '原始訂單', admin_sub_order_path(return_order.sub_order),
class: 'btn btn-primary ml-auto', target: '_blank'
= card_body do
= tab_list(return_order_tab_genre)
= tab_contents do
= tab_active_content(return_order_tab_genre.first[:id]) do
= card do
= card_header(title: "物流狀態") do
- if return_order.applied?
.waybill-wrapper.ml-auto
= waybill_button return_order, controller: 'return-order',
before_ship: '發動退貨物流', after_ship: '查看退貨物流單號'
= card_body do
= grid_div(1, 5) do
= tag.strong '取件地址'
= tag.div return_order.address_info
= tag.strong '寄信人姓名'
= tag.div return_order.receiver_name
= tag.strong '電話'
= tag.div return_order.receiver_phone
= tag.strong '出貨狀態追蹤'
= tag.div do
近期文章安排