Day18. Slim & Pug - 縮排式的 html - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 18

Modern Web

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

Day18. Slim & Pug - 縮排式的 html

13th鐵人賽 rails slim pug

漢漢老師

2021-09-18 06:13:58

2245 瀏覽

分享至

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

Pug

曾經有一段後端轉前端的經歷，除了要寫組織化的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

Slim為 Rails模板語言的另外一種形式，標準的形式是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

近期文章安排