[聚合文章] 模板引擎

模板引擎是用来渲染页面的。页面中一部分内容是根据程序生成的，会变化的。

主流的模板引擎有两种：

* jade

破坏式的、强依赖的
用了它就不能用html。

* ejs

非侵入式的、比较温和。
并不破坏原有的html 、 css(其实是往里面加入东西。)

jade

• 根据缩进，规定层级
• 属性放在（）里面，逗号分隔
• 内容空个格，直接往后堆（但是不能换行）

div xxx    span xxx      a(href="xxx") 链接

属性

<script src="a.js"></script> script(src="a.js")

内容

<a href="http://www.zhinengshe.com/">官网</a>
a(href="http://www.zhinengshe.com/") 官网

jade文件

html    head        style        script(src='a.js')        link(rel="stylesheet", href="",type="")        script window.onload = function(){var oBtn=document.getElementById('div1');}; //大段的代码可以跟在后面，但是不能换行(会报错的！)    body        a(href="http://www/baidu.com/")百度        a(href="http://www/qq.com/")腾讯        div aaa             span bbb    // 可以嵌套子元素        //- style 有两种写法：普通属性写法、json写法        div()               div(style= {width: '200px',height: '200px',background: 'red'})          div(title={width:'200px', height:'200px', background:'red'})                  //- class 有两种写法：普通属性写法、arr 写法        div(class="aaa lefr-wrap active")        div(class=['aaa','left-wrap','active'])        div(title=['aaa','left-wrap','active'])        //- 简写        div.22        div#111        //-属性的另外一个写法         div(title="111" id="001")        div&attributes({title:'aaa',})

TIPs:

1.普通属性写法

2.用json

class="aaa left-swrap active"

1.普通属性写法

2.用arr

js文件：

const jade=require('jade');var str=jade.renderFile('你的jade文件路径', {pretty: true});console.log(str);

jade.render('字符串');

jade.renderFile('模板文件名', 参数)