1、jade和ejs都是一种模板引擎。但是两者表现形式不一样，jade是侵入式的，ejs类似于django里面的模板引擎，比较温和。我们先主要讲解jade，当然，首先是安装：
npm install jade——我们写一个文件，文件里面放的就是写的jade模板。规则就是，缩进，括号里面是属性，style可以用json写法，class可以用数组写法。
html head style script(src='../www/js/index.js') body h3 iamtitle div(id='div1',style="width:100px;height:100px;background:red;") hello div1 div(class='div2',style={width:'200px',height:'200px',background:'blue'}) hello div2 div#div3 hello div3 div.class hello div4 div(class=[item,selected]) a(href='https://www.bing.com') Bing通过这个渲染：
const jade = require('jade'); // pretty类似美化一下格式的 var str = jade.renderFile('./views/index.jade',{pretty:true}); console.log(str);输出结果是：
<html> <head> <style></style> <script src="../www/js/index.js"></script> </head> <body> <h3>iamtitle</h3> <div id="div1" style="width:100px;height:100px;background:red;">hello div1</div> <div style="width:200px;height:200px;background:blue" class="div2">hello div2</div> <div id="div3">hello div3</div> <div class="class">hello div4</div> <div></div><a href="https://www.bing.com">Bing</a> </body> </html>2、除了在标签后面空格然后加需要显示的内容外，还可以使用下面这种方式。
html head style script(src='../www/js/index.js') body h3. hello i am title div | hello div上面渲染的结果如下，有了.和|操作，就可以格式化的写很多行的内容了。
<html> <head> <style></style> <script src="../www/js/index.js"></script> </head> <body> <h3>hello i am title</h3> <div>hello div</div> </body> </html>3、尽管我们可以使用.或者|来写多行的代码，比如在script里面。但是毕竟在这个地方写一大坨还是觉得有问题。这个时候就可以使用include命令，直接用下面的代码就可以把index.js里面的js代码都引过来，这种引不需要二次请求，它直接把一坨代码直接拷贝粘贴过来了：
script include index.js4、上面的种种写法都是静态的，如果动态绑定数据呢？也很简单。
——传递给模板的数据，这么传的：
const jade = require('jade'); var str = jade.renderFile('./views/index.jade',{pretty:true,username:'eric'}); console.log(str);——获取数据，怎么获取的：
html head style script body p. hello i am #{username}5、定义变量的格式，就是代码前面加-：
html head style script body -var a = 5; -var b = 7; | 结果是#{a+b}6、for循环的用法：
——先给数据：
const jade = require('jade'); var str = jade.renderFile('./views/index.jade',{pretty:true,todos:['clean house','go outside','buy tickets']}); console.log(str);——再使用：
html head style script body ul -for(var i=0;i<todos.length;i++) li=todos[i]——结果：
<html> <head> <style></style> <script></script> </head> <body> <ul> <li>clean house</li> <li>go outside</li> <li>buy tickets</li> </ul> </body> </html>注：这里需要注意的是，我们直接使用的是div=xxx，相当于div xxx，也就是div里面写xxx内容。
7、如果要输出带有标签的富文本编辑器生成的内容，它会自动转义。如果不要的话，可以用!=：
div!=content8、if和case这些暂时不介绍了，用的时候直接查文档即可。
9、下面进入ejs的部分。第一步还是安装：
npm install ejs上面说过，这个类似于django里面的写法，举个例子吧：
——先上数据：
const ejs=require('ejs'); ejs.renderFile('./www/index.html',{ content:{ name:'news', titles:['title1','title2','title3','title4'], } },function(err,data){ console.log(data); });——再上模板：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <p><%= content.name %></p> <ul> <% for(var i=0;i<content.titles.length;i++){ %> <li><%= content.titles[i] %></li> <% } %> </ul> </body> </html>——最后上结果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <p>news</p> <ul> <li>title1</li> <li>title2</li> <li>title3</li> <li>title4</li> </ul> </body> </html>