jade 的安装什么的就不说了,就说一下jade的一些语法。官网在这里
jade 是必须用自己的语法,她不可以和原生的html混合使用,当然ejs是可以的。
例子一
const jade = require('jade');var str = jade.render('html');console.log(str)
运行结果为
<html></html>
例子二,(读取 .jade 文件,)
-.js
const jade = require('jade')
const fs = require('fs')var str = jade.renderFile('./views/2.jade', {pretty: true})fs.writeFile('./build/1.html', str, function (err) {if (err) {console.log("写入失败")} else {console.log("写入成功")}
})
-2.jade
htmlheadscript(src="a.js")link(href="a.css", rel="stylesheet")bodya(href="www.baidu.com") 百度div(style="width:200px; background:red")div(style= {width: '200px', height: '200px'})div(title = {width: '200px', height: '200px'})div.boxdiv#oDiv
-build/1.html
<html><head><script src="a.js"></script><link href="a.css" rel="stylesheet"/></head><body><a href="www.baidu.com">百度</a><div style="width:200px; background:red"></div><div style="width:200px;height:200px"></div><div title="[object Object]"></div><div class="box"></div><div id="oDiv"></div></body>
</html>
语法总结
1在前面加个'|' ,就表示的原样输出。
body|aaa
// 输出
<body>aaa
</body>
2写法 在标签后面加个 '.',表示的意思是,比这个深的下一级都原样输出。
script.window.onload = function () {console.log("初始化完成")}
// 输出
<script>window.onload = function () {console.log("初始化完成")}
</script>
3 include
includescriptinclude a.js // 这样就可以读取
4 变量输出, #{变量}
-.jade
div 我的名字是 #{name}
-.js
var str = jade.renderFile('路径', { pretty: true, name: 'Mar'})
//输出
<div>我的名字是 Mar<div>
有个简单的写法就是 span=name, 她就等于 #{name}
5 用横杠可以表示是js 代码
body-var a = 12;-var b = 4;div 结果是 #{a+b}
6 for 循环
body-for(var i = 0; i < arr.length; i++)div=arr[i]
//输出<body><div>aaa</div><div>bbb</div><div>ccc</div></body>
7 非转义输出 (比如像输出某个标签, ) div!=content
htmlheadbodydiv!=contentjs代码为
var str = jade.renderFile('./views/2.jade', {pretty: true,content: '<p>标签</p>'
})
//输出
<html><head></head><body><div><p>标签</p></div></body>
</html>
8 if else
htmlheadbody-var a = 12;-if(a%2 == 0)div(style={background: 'red'}) 偶数-elsediv(style={background: 'green'}) 奇数