Pug简单说明
- 用-开始一段不直接进行输出的代码- var authenticated = true body(class=authenticated ? 'authed' : 'anon') <body class="authed"></body>
- 用=开始一段带有输出的代码，可以被求值的一个JavaScript表达式div(escaped="<code>") <div escaped="<code>"></div>
- 用!=开始一段不转义的、带有输出的代码div(escaped!="<code>") <div escaped="<code>"></div>
- 用//注释代码会转换到HTML中// 一些内容 p foo p bar <!-- 一些内容--> <p>foo</p> <p>bar</p>
- 用//-注释代码不会转换到HTML中//- 这行不会出现在结果里 p foo p bar <p>foo</p> <p>bar</p>
- 用#{}在字符串里面使用变量和函数字符串嵌入转义
- 用!{}在字符串里面使用变量和函数字符串嵌入不转义- var friends = 10 p 您有 #{friends} 个朋友 <p>您有 10 个朋友</p>
- 用#[]将 Pug 的标签语句包起来实现转换
- 条件注释是一种用于分辨 Internet Explorer 新老版本的特殊标记。
- 分支条件 case ... when ... default ...- var friends = 10 case friendswhen 0p 您没有朋友when 1p 您有一个朋友defaultp 您有 #{friends} 个朋友 <p>您有 10 个朋友</p>
- 条件判断 if ... else if ... else
- include pugFilename功能允许您把另外的文件内容插入进来
- block 和 extends 关键字进行模板的继承//- layout.pug htmlheadtitle 我的站点 - #{title}block scriptsscript(src='/jquery.js')bodyblock contentblock foot#footerp 一些页脚的内容 //- 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
- 块内容的添补 append / prepend//- layout.pug
htmlheadblock headscript(src='/vendor/jquery.js')script(src='/vendor/caustic.js')bodyblock content
-
prepend 向头部添加内容一个块
-
append 向尾部添加内容一个块
//- page.pug extends layout.pugblock append headscript(src='/vendor/three.js')script(src='/game.js')
-
- 迭代方式： each ... in ... 和 while
- 混入mixin是一种允许您在 Pug 中重复使用一整个代码块的方法mixin pet(name)li.pet= name ul+pet('猫')+pet('狗')+pet('猪') <ul><li class="pet">猫</li><li class="pet">狗</li><li class="pet">猪</li> </ul>
总结
- 上一篇： bat脚本_更改文件夹访问权限
- 下一篇： 【转】android builder.s