Pug入門
- 2020 年 2 月 26 日
- 筆記
Pug是一款健壯、靈活、功能豐富的HTML模板引擎,專門為 Node.js 平台開發。Pug是由Jade 改名而來。
是一種通過縮進（表示標籤間的嵌套關係）的方式來編寫程式碼的過程，在編譯的過程中，不需要考慮標籤是否閉合的問題。可以加快寫程式碼速度，也為程式碼復用提供了便捷。
優點：
1、無需結束標籤
2、強制縮進
3、程式碼復用和維護
4、標籤寫法與CSS相同
搭建pug環境：
1、下載node.js和 npm
2、下載 pug , 命令:npm install pug-cli -g
檢查：
/********************************************************屬性基本用法***********************************************************************/
a(href='baidu.com') 百度 等價於--> <a href="baidu.com">百度</a> a(class='button', href='baidu.com') 百度 等價於--> <a class="button" href="baidu.com">百度</a>
Js表達式的形式
//- 已登錄 - var authenticated = true body(class=authenticated ? 'authed' : 'anon') 等價於--> <body class="authed"></body>
多行屬性
input( type='checkbox' name='agreement' checked ) 等價於--> <input type="checkbox" name="agreement" checked="checked" />
屬性嵌入：
- var url = 'pug-test.html'; a(href='/' + url) 鏈接 | | - url = 'https://example.com/' a(href=url) 另一個鏈接 等價於--> <a href="/pug-test.html">鏈接</a> <a href="https://example.com/">另一個鏈接</a>
布爾值屬性：
input(type='checkbox' checked) | | input(type='checkbox' checked=true) | | input(type='checkbox' checked=false) | | input(type='checkbox' checked=true.toString()) 等價於--> <input type="checkbox" checked="checked" /> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="true" />
樣式屬性：
style（樣式）屬性可以是一個字元串（就像其他普通的屬性一樣）還可以是一個對象
a(style={color: 'red', background: 'green'}) 等價於--> <a style="color:red;background:green;"></a>
類屬性：
class（類）屬性可以是一個字元串（就像其他普通的屬性一樣）還可以是一個包含多個類名的數組
- var classes = ['foo', 'bar', 'baz'] a(class=classes) | | //- the class attribute may also be repeated to merge arrays a.bang(class=classes class=['bing']) 等價於--> <a class="foo bar baz"></a> <a class="bang foo bar baz bing"></a>
它還可以是一個將類名映射為 true 或 false 的對象，這在使用條件性的類的時候非常有用。
- var currentUrl = '/about' a(class={active: currentUrl === '/'} href='/') Home | | a(class={active: currentUrl === '/about'} href='/about') About 等價於--> <a href="/">Home</a> <a class="active" href="/about">About</a>
/*******************************************************字面值************************************************************/
類的字面值：
類可以使用 .classname 語法來定義： a.button 等價於--> <a class="button"></a> 考慮到使用 div 作為標籤名這種行為實在是太常見了，所以如果您省略掉標籤名稱的話，它就是默認值： .content 等價於---> <div class="content"></div>
id的字面值：
ID 可以使用 #idname 語法來定義： a#main-link 等價於--> <a id="main-link"></a> 考慮到使用 div 作為標籤名這種行為實在是太常見了，所以如果您省略掉標籤名稱的話，它就是默認值： #content 等價於--> <div id="content"></div>
