Pug简单说明
- 用-開(kāi)始一段不直接進(jìn)行輸出的代碼- var authenticated = true body(class=authenticated ? 'authed' : 'anon') <body class="authed"></body>
- 用=開(kāi)始一段帶有輸出的代碼，可以被求值的一個(gè)JavaScript表達(dá)式div(escaped="<code>") <div escaped="<code>"></div>
- 用!=開(kāi)始一段不轉(zhuǎn)義的、帶有輸出的代碼div(escaped!="<code>") <div escaped="<code>"></div>
- 用//注釋代碼會(huì)轉(zhuǎn)換到HTML中// 一些內(nèi)容 p foo p bar <!-- 一些內(nèi)容--> <p>foo</p> <p>bar</p>
- 用//-注釋代碼不會(huì)轉(zhuǎn)換到HTML中//- 這行不會(huì)出現(xiàn)在結(jié)果里 p foo p bar <p>foo</p> <p>bar</p>
- 用#{}在字符串里面使用變量和函數(shù)字符串嵌入轉(zhuǎn)義
- 用!{}在字符串里面使用變量和函數(shù)字符串嵌入不轉(zhuǎn)義- var friends = 10 p 您有 #{friends} 個(gè)朋友 <p>您有 10 個(gè)朋友</p>
- 用#[]將 Pug 的標(biāo)簽語(yǔ)句包起來(lái)實(shí)現(xiàn)轉(zhuǎn)換
- 條件注釋是一種用于分辨 Internet Explorer 新老版本的特殊標(biāo)記。
- 分支條件 case ... when ... default ...- var friends = 10 case friendswhen 0p 您沒(méi)有朋友when 1p 您有一個(gè)朋友defaultp 您有 #{friends} 個(gè)朋友 <p>您有 10 個(gè)朋友</p>
- 條件判斷 if ... else if ... else
- include pugFilename功能允許您把另外的文件內(nèi)容插入進(jìn)來(lái)
- block 和 extends 關(guān)鍵字進(jìn)行模板的繼承//- layout.pug htmlheadtitle 我的站點(diǎn) - #{title}block scriptsscript(src='/jquery.js')bodyblock contentblock foot#footerp 一些頁(yè)腳的內(nèi)容 //- page-a.pug extends layout.pugblock scriptsscript(src='/jquery.js')script(src='/pets.js')block contenth1= title- var pets = ['貓', '狗']each petName in petsinclude pet.pug
- 塊內(nèi)容的添補(bǔ) append / prepend//- layout.pug
htmlheadblock headscript(src='/vendor/jquery.js')script(src='/vendor/caustic.js')bodyblock content
-
prepend 向頭部添加內(nèi)容一個(gè)塊
-
append 向尾部添加內(nèi)容一個(gè)塊
//- page.pug extends layout.pugblock append headscript(src='/vendor/three.js')script(src='/game.js')
-
- 迭代方式： each ... in ... 和 while
- 混入mixin是一種允許您在 Pug 中重復(fù)使用一整個(gè)代碼塊的方法mixin pet(name)li.pet= name ul+pet('貓')+pet('狗')+pet('豬') <ul><li class="pet">貓</li><li class="pet">狗</li><li class="pet">豬</li> </ul>
總結(jié)
- 上一篇： bat脚本_更改文件夹访问权限
- 下一篇： 【转】android builder.s