本文共 3747 字，大约阅读时间需要 12 分钟。
一、认识pug
pug 是一个高性能的模板引擎，它是用 JavaScript 实现的，并且可以供 Node 使用。通过一套语法把某一段静态的模板，通过模板引擎将动态的数据替换进去，然后将生成的html交给浏览器去解析和渲染。pug是jade的升级版。
二、pug的特点
1）超强的可读性
2）客户端支持 3）灵活易用的缩进 4）安全，默认代码是转义的 5）命令行下编译jade模板 6）模板继承 7）块扩展 8）编译及运行时的上下文错误报告 9）HTML5模式 10）可选的内存缓存 11）联合动态的静态标记类 12）利用过滤器解析树的处理 13）没有前缀的标签 14）原生支持 express 模块三、pug的安装
1、全局安装。
npm i pug -g npm i pug-cli -g2、在项目中使用pug，需要局部安装pug。
首先，创建一个package.json文件。 npm init -y 再安装pug，并写入到package.json文件中。 npm i pug --save-dev 四、编译编译语法：pug pug文件名 -o 目标路径 -P -w
Tips:
-P：编译成非压缩格式
-w：实时监听 五、pug基本语法1、文档声明
doctype html2、标签语法
每层级标签之间都采用多一个缩进表示嵌套关系，无需闭合标签，无需尖括号。
3、属性
4、文本
5、注释
6、安全转义与安全非转义
doctype html html head title pug语法 body p.body.p1.hello 这是段落 ul li 选项一 li 选项二 div.box box1 div(class='box2') box2 -var cls=true div(class=cls?'box3':'box4') box3 .box4 box4 input( type='text' class="username" name="username" id="username" ) input(type='checkbox',checked) p(style="color:red;font-size:18px") h2(style="color:yellow;font-size:20px") div.foo .foo.bar div(class="foo bar") -var classes=['box1','box2','box3'] div(class=classes) div.bing(class=classes) div#box div(id='box') .oh #no #foo.oh.no h1 这是一个h1标签 .box hello pug -var obj={name:'tom'} p #{obj.name} is a man -var url='http://www.baidu.com' a(href=url) 百度一下 p | hello pug | hello node | hello worlds p. hello pug hello node hello worlds //注释1 //-注释2 六、条件语句
1、if...else
2、if...else if...else
3、unless
4、case
doctype html html head meta(charset='utf-8') title 条件语句 body //if...else -var flag =true if flag p=flag else p=flag //if...else if.else -var num=1 if num >1 p 10 else if num==1 p 2 else p=num //unless：相当于取反 -var num =3 //表示num不等于10 unless num==10 p this num is #{num} //case -var friends =5 case friends when 0 p nobody when 1 p one default p #{friends} 七、循环语句
for
for...in while eachdoctype html html head meta(charset='utf-8') title 循环语句 body //for迭代数组 -var arr=[1,2,3,4] ul -for(var i=0;i
八、mixin混合
mixin类似一个函数，可传参也可不传。
定义mixin语法：
mixin mixin名([形参列表]) 代码块 调用mixin语法： +mixin名(实参列表)doctype html html head meta(charset='utf-8') title 循环语句 body //基本用法 mixin study p test +study //传参 mixin study(name,courses) p=name ul.course.box each course in courses li=course +study('zs',['web','pug']) //代码块 mixin show(time) h3=time //判断是否存在block if block block else p no show +show('2021-11-11') //传递属性 mixin attrs(name) p&attributes(attributes) #{name} +attrs('attrs')(class='p',id='p') //列表传递 mixin show(name,...shows) p=name ul each show in shows li=show +show('binge','sing','dance','sleep') 九、模板继承
用extends继承父模板，哪个文件继承，就调用哪个文件的block为content的模块。
//-extends继承语法，common为继承的文件extends common block content mixin fn(name,...shows) p=name ul each show in shows li=show +fn('binge','sing','dance','sleep') common.pug
doctype html html head title pug模板继承 body h1 这是pug父模板的内容 //哪个文件继承，就调用哪个文件的block为content的模块 block content
十、包含(include)
允许在文件中插入另一个文件内容。
extends public block content //-block index自身模板 mixin show(name,...shows) p=name ul each show in shows li=show +show('binge','sing','dance','sleep') header.pug
meta(charset='utf-8')title pug模板包含link(rel="stylesheet",href="css/style.css")
public.pug
doctype html html head //-引入header.pug include header body h1 pug模板 block content
转载地址：http://kbvrn.baihongyu.com/