Day18. Slim & Pug - 缩排式的 html
由於可能很多人会不习惯缩排的写法来写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
近期文章安排
- Day18 ➡️ Slim & Pug
- Day19 ➡️ 後端工程师需要具备的前端常识
- Day20 ➡️ 後端工程师需要具备的Bootstrap常识
- Day21 ➡️ Rails 常用的 View helper
- Day22 ➡️ Rails 自定义 helper
参考资料
Day24 React useContext-在子元件使用context
在此专案练习使用function的方式建立元件，因此在子元件使用Hook中的useContext，来...
Day13 CSS基础设定_3
今天我们要来介绍有关CSS排版，方块的概念，之前的文章有提到过，网页就像很多不同的方块组合而成，这样...
Day 18 self-attention的实作准备(四) keras的compile和fit
前言 昨天讲到要如何建立model，今天来讲要如何训练以及预测 编译模型 建立完模型之後，必须呼叫c...
IT 铁人赛 k8s 入门30天 -- day13 Deploying Stateful Apps with StatefulSet
前言 今天主要会介绍 StatefulSet 以及比较其与 Deployment 的不同 State...
Day 02 HTML<表格标签>
表格标签主要用来显示以及展示数据，可用表格标签排版後让数据更容易阅读 1. 表格基础标签简易介绍 (...