Pug.pdf

Transcript

1. Pug 基礎篇 簡化你的 HTML
2. HTML 充滿各種 <> 
 Code 很多時
 會變得很難讀 Pug 是⼀種 HTML
 的進化語法
 更容易閱讀
3. Pug Example div.remark p Pug rocks!! <div class="remark"> <p>Pug rocks!!</p> </div>
4. 空⽩會影響編譯結果 div.remark p Pug rocks!! <div class="remark"> <p>Pug rocks!!</p> </div> div.remark p Pug rocks!! <div class=“remark"></div> <p>Pug rocks!!</p>
5. Codepen ⽀援 Pug 的語法表⽰
6. 沒有 <, > 容易閱讀 nav div h1 My Website! ul li a Home li a Page 1 li a Page 2 input <nav> <div> <h1>My Website!</h1> </div> <ul> <li><a>Home</a></li> <li><a>Page 1</a></ li> <li><a>Page 2</a></ li> </ul> <input/> </nav>
7. .className, #IDname nav#navbar-default div.container h1.header Hello <nav id="navbar-default"> <div class="container"> <h1 class=“header"> Hello </h1> </div> </nav>
8. 屬性⽤括號表⽰ ul li a(href='/') Home li a(href='/page-1') Page 1 input.search( type='text' name='search' placeholder='Enter' ) <ul> <li> <a href=“/“>Home</a> </li> <li> <a href=“/page-1"> Page 1 </a> </li> </ul> <input class=“search" type="text" name=“search" placeholder="Enter"/>
9. 換⾏ p | You are logged in as | user@example.com <p> You are logged in as user@example.com </p> p. Lorem ipsum dolor sit amet, tempor incididunt ut labore veniam, quis nostrud <p> Lorem ipsum dolor sit amet, tempor incididunt ut labore veniam, quis nostrud </p>
10. 註釋 // My wonderful navbar nav#navbar-default <!-- My wonderful navbar--> <nav id=“navbar-default"> </nav>