Tweet
Tweet

Slide 1

Slide 1 text

Pug 基礎篇 簡化你的 HTML

Slide 2

Slide 2 text

HTML 充滿各種 <> 
 Code 很多時
 會變得很難讀 Pug 是⼀種 HTML
 的進化語法
 更容易閱讀

Slide 3

Slide 3 text

Pug Example div.remark p Pug rocks!!

Pug rocks!!

Slide 4

Slide 4 text

空⽩會影響編譯結果 div.remark p Pug rocks!!

Pug rocks!!

div.remark p Pug rocks!!

Pug rocks!!

Slide 5

Slide 5 text

Codepen ⽀援 Pug 的語法表⽰

Slide 6

Slide 6 text

沒有 <, > 容易閱讀 nav div h1 My Website! ul li a Home li a Page 1 li a Page 2 input

My Website!

  • Home
  • Page 1
  • Page 2

Slide 7

Slide 7 text

.className, #IDname nav#navbar-default div.container h1.header Hello

Hello

Slide 8

Slide 8 text

屬性⽤括號表⽰ ul li a(href='/') Home li a(href='/page-1') Page 1 input.search( type='text' name='search' placeholder='Enter' )
  • Home
  • Page 1

Slide 9

Slide 9 text

換⾏ p | You are logged in as | [email protected]

You are logged in as [email protected]

p. Lorem ipsum dolor sit amet, tempor incididunt ut labore veniam, quis nostrud

Lorem ipsum dolor sit amet, tempor incididunt ut labore veniam, quis nostrud

Slide 10

Slide 10 text

註釋 // My wonderful navbar nav#navbar-default