一、模板引擎

//TODO

二、jade

1、认识jade

//TODO

2、基础语法

2.1、根据缩进划分层级

2.2、属性用()表示，用逗号分割

*style = []
*class = []

2.3、内容

1
2
3

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

2.4、渲染

jade.render(‘字符串’);
jdde.renderFile(‘模板文件名’, 参数);

3、高级用法

3.1原样输出

//1.jade
html
  head
  body
    zaizi
    
//转为对应html
<html>
  <head></head>
  <body>
    <zaizi></zaizi>
  </body>

从上面代码可以看出，原意是body的内容为zaizi，但实际转译把zaizi作为自定义标签。如何在标签里原样显示内容呢？如下:

加竖线|,原样输出

//1.jade
html
  head
  body
    |zaizi
    
//转为对应html
<html>
  <head></head>
  <body>zaizi</body>

此语法可用于在html代码中写js，例子：

html
  head
    script
      | //js代码
      | //js代码
    body
      |zaizi
      |dog

以上情况满足写在html中js的需求，但每一行都需要加|，还是比较麻烦，更简单的方法是：在script后面加一个点.，例子：

在标签后加一个点.表示标签后的内容都原样输出

html
  head
    script.
      // js代码
  body

若要文件结构更清楚，可以尝试引用外部js文件，但会增加http请求数，这里可以采用include，例子：

include引用文件

html
  head
    script.
      include a.js
  body

3.2 使用变量

//jade代码
html
  head
  body
    div 我的名字: #{name}
    
//js代码
const jade = require('jade');

const.log(jade.renderFile('`jade文件地址`', {pretty: true, name: 'zaizi'}));


//编译效果
<html>
  <head></head>
  <body>
    <div>我的名字: zaizi</div>
  </body>
</html>