iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
2
Modern Web

前端設計轉前端工程師-JS踩坑雜記 30 天系列 第 5

前端起步走 - 學習Pug

在就職前端設計的前2年,我的目標就只有努力學習優化自己的 HTML 架構和切版的速度
那2年下來我改過、寫過的套板、自刻板應該有超過 100 組... (可能不止)

期間我幾乎都在想怎麼能更快、更好的產出 UI 切板
所以除了學習 SCSS,我還去翻了很多技術文章看看還有沒有可以加快切版速度的方式
翻到 Pug 之後,我就決定是它了~XD

以下是我之前的自學筆記 + 雜記,整理一下跟大家分享
當然,還是老話一句 實作! 實作! 實作!

PUG 簡介

Pug (舊名:Jade) 是一種 HTML 模板語言
可以將 HTML 拆成一組一組,模組化入門款
而且還支援 JavaScript 邏輯 (重點)

省去開閉合標籤

剛開始是因為看到可以只打一個 HTML Tag,所以選它 (非常單純)
打開 CodePen 實作的第一個感受就是 媽媽呀~好方便
而且版面變得好簡潔,也不怕移 Code 少移一個 Tag (爽)
不信,你們看

.container
    .row
        .col-xs-12
            .titlebar_line
                h2.titles_line_font Skills
        .col-xs-12
            ul.uki_skills
                li
                    i.fab.fa-html5
                li
                    i.fab.fa-css3-alt
                li
                    i.icon-pug
                li
                    i.fab.fa-sass
                li
                    i.fab.fa-js-square
                li
                    i.fab.fa-gulp
                li
                    i.fab.fa-npm
                li
                    i.fab.fa-git
                li
                    i.fab.fa-github-alt
                li 
                    i.fab.fa-vuejs

是不是~~~~~~~~ (超自 High)

HTML 模組化

Pug 可以把重複的區塊拆出去,像是 Header、Footer...等等
include 的方式引進來
這對當時身在接案公司,身上一次4-5個專案在跑的網頁設計菜雞 PO
根本是 天下降下耶穌光啊啊啊!!!!!

你們知道在以前我要改一個 Footer 選單文字,一個網站有 5 頁,改 5 次,有 20 頁,改 20 次,有 100 頁,我要改 100 次啊啊啊啊啊啊!!!! (激動到沒有辦法分行)

簡單講一下我怎麼切我的區塊:

  1. 建一個頁面模版 (Layout.pug)
<!DOCTYPE html>
html(lang="zh-Hant-TW")
	head
		include ../include/_head.pug
	body
		#warpper
			include ../include/_navbar.pug
			block content
			include ../include/_footer.pug
  1. 頁面 (index.pug)
extend layout/_layout.pug

block content
    .container
        .row
            .col-xs-12
                .titlebar_line
                    h2.titles_line_font Skills
            .col-xs-12
                ul.uki_skills
                    li
                        i.fab.fa-html5
                    li
                        i.fab.fa-css3-alt
                    li
                        i.icon-pug
                    li
                        i.fab.fa-sass
                    li
                        i.fab.fa-js-square
                    li
                        i.fab.fa-gulp
                    li
                        i.fab.fa-npm
                    li
                        i.fab.fa-git
                    li
                        i.fab.fa-github-alt
                    li 
                        i.fab.fa-vuejs

小小說明一下 (以下是阿宅 PO 自己的筆記):
繼承 extends/block
Block 很像在 Layout 開一個框框,引入頁面內容。用類似的東西來舉例;Vue - App.vue 中的 Router-view
Extends 將這個頁面內容 嵌到 Layout.pug 中 block content 這個區塊

當然更詳細的,還是請各位捧油前往官網看看: Pug Template Inheritance


Pug 的部分目前阿宅 PO 只介紹到這裡
原因是因為我大多切版只有用到這幾個...
之後會再補充 Mixin 和 結合 JS 邏輯的部分

不得不說,因為寫過 Pug
我後來第一次接觸到 Vue 框架要切版的時候,倍感親切 XDDD
幾乎馬上上手 成就感 Level upupupupupupupup

這一篇不專業的 Pug 簡介,希望大家喜歡~~


上一篇
前端起步走 - 學習SCSS
下一篇
前端起步走 - 學習自動化工具-Gulp為例
系列文
前端設計轉前端工程師-JS踩坑雜記 30 天30

1 則留言

0
NiJia
iT邦新手 5 級 ‧ 2020-09-13 20:22:10

wow

WOW WOW

我要留言

立即登入留言