iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

初階 Rails 工程師的養成系列 第 18

Day18. Slim & Pug - 縮排式的 html

由於可能很多人會不習慣縮排的寫法來寫html,然後在Day17以後的章節,漢漢老師會大量的使用縮排式的html,因而有這篇文章的誕生。

Pug

曾經有一段後端轉前端的經歷,除了要寫組織化的Vue(以外,還要習慣Pug的縮排寫法。當時在部門,後端的人除了一位寫過縮排的寫法以外,其他人一致不能接受html的縮排寫法,而前端的話支持縮排寫法跟不支持的大約一半一半,而由於專案的初始為使用縮排寫,因此剛開始只能習慣這種新體驗。

寫了一段時間之後,發現用縮排寫的好處很多。即便Vuecomponent 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試著寫寫看。

https://ithelp.ithome.com.tw/upload/images/20210915/20115854M48tmZURjP.png

codepen.io 擁有豐富的環境可以寫各種環境,因此很推薦大家可以註冊並試試看。

https://ithelp.ithome.com.tw/upload/images/20210915/20115854f0w8matpe6.png

slim

SlimRails模板語言的另外一種形式,標準的形式是erb,而slim為縮排形式的erb。雖然之前寫過Pug,但畢竟slim 仍參雜了一些 rails的語法,因此還是需要習慣。

slim 的基本架構如下:

  • 最上方寫html 的程式碼,註解方式為斜線
  • 樣式和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

近期文章安排

  • Day18 ➡️ Slim & Pug
  • Day19 ➡️ 後端工程師需要具備的前端常識
  • Day20 ➡️ 後端工程師需要具備的Bootstrap常識
  • Day21 ➡️ Rails 常用的 View helper
  • Day22 ➡️ Rails 自定義 helper

參考資料


上一篇
Day17. Dynamic Programming
下一篇
Day19. 後端工程師需要具備的前端常識
系列文
初階 Rails 工程師的養成34

尚未有邦友留言

立即登入留言