Jade

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.使用"-"来定义变量,使用"="把变量输出到元素内

5. 通过 #{variable} 插入相应的变量

6. html 元素属性: 在标签右边通过括号包含(可以通过判断添加)

7. 文本: 通过在文本前添加竖线"|"可让jade原样输出内容在html标签,标记后,通过空格隔开文本内容

8. 注释: 可以通过双斜杠进行注释, jade注释有三种:可以分别对应输出html注释,多行html注释,块级html注释

9. 循环: -each val in [1,2,3]

10. 判断语句: if else / case when default

11. mixin: 混合模式

左边jade / 生成右边html