Jade是一款基于html的html模板引擎,采用JavaScript实现,可以方便的在node.js、Yeoman等框架中使用,已改名为pug
1.全局安装
npm install jade -g
2. 创建文件,后缀名为.jade
3.编译jade文件为html
jade test.jade
jade -P test.jade //不压缩html
jade -P -w test.jade //监听文件变化,即生成html
jade语法
1.通过缩进关系,代替以往html的层级包含关系,注意要统一使用tab或者空格缩进,不要混用
2.内联书写层级 a: img
3.style属性: div(style={width:"200px",color:"red"})
4.使用"-"来定义变量,使用"="把变量输出到元素内
通过 #{variable} 插入相应的变量
html 元素属性: 在标签右边通过括号包含(可以通过判断添加)
文本: 通过在文本前添加竖线"|"可让jade原样输出内容在html标签,标记后,通过空格隔开文本内容
注释: 可以通过双斜杠进行注释, jade注释有三种:可以分别对应输出html注释,多行html注释,块级html注释
循环: -each val in [1,2,3]
判断语句: if else / case when default
mixin: 混合模式
左边jade / 生成右边html