模板引擎-jade模板库-1

2019-06-12 本文已影响0人子心_

模板引擎：

jade-破坏式、侵入式、强依赖
ejs-温和、非侵入式、弱依赖性
模板引擎：生成页面

1. jade模板库

配置安装：

cnpm install jade

在jade文件中缩进代表层级
新建.js文件，在里面引入.jade文件：

const jade = require('jade');
var str = jade.renderFile('./views/1.jade',{pretty: true});
console.log(str);

pretty属性是用来美化格式的

2. jade基本语法

1. 根据缩进，规定层级

2. 属性放在()里面，有多个属性的话用逗号分隔

3. 内容空个格，直接往后堆

3. 属性：在js文件中属性的写法:

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

在jade文件中的写法:

script(src="a.js")

例如在2.jade文件中写入：

html
  head
    style
    script(src="a.js")
    link(href="a.css",rel="stylesheet")
  body
    div
      ul
        li
          input(type="text",id="txt1",value="abc")
        li
          input(type="text",id="txt2",value="111")
        li
          input(type="text", id="txt3",value="222")
    div

新建jade.js文件，写入内容：

const jade = require('jade');
var str = jade.renderFile('./views/2.jade',{pretty: true});
console.log(str);

通过执行jade.js文件得到：

<head>
  <style></style>
  <script src="a.js"></script>
  <link href="a.css" rel="stylesheet"/>
</head>
<body>
  <div>
    <ul>
      <li>
        <input type="text" id="txt1" value="abc">
      </li>
      <li>
        <input type="text" id="txt2" value="111">
       </li>
       <li>
        <input type="text" id="txt3" value="222">
       </li>
    </ul>
  </div>
  <div></div>
</body>

我们也可以将模板文件编译后导入指定的文件中：
在js文件中可以这样写：

const jade = require('jade');
const fs = require('fs');
var str = jade.renderFile('./views/2.jade,{pretty:true}');
//将编译完的文件写入build目录下的2.html中
fs.writeFile('./build/2.html', str, function(err){
    if(err)
        console.log('写入失败');
    else
        console.log('写入成功');
});

4. 内容：在模板中插入内容只需要空一格+内容即可

例如在.jade文件中写入：

html
  head
    style
    script alert("aaa");
  body
    a(href="http://www.baidu.com") 百度
    a(href="http://www.sina.com") 新浪

经过编译后得到：

<html>
  <head>
    <style></style>
    <script>alert("abc");<script>
  </head>
  <body><a href="http://www.baidu.com">百度</a><a href="http://www.sina.com">新浪</a>
</html>

这时候心里犯嘀咕了，不是说好的美化格式么？咋a标签都不个我换行呢？jade就说了老兄，a标签是行内元素啊，换行可能产生意料之外的空格！

<font color=red>注意：</font> style属性和class属性比较特殊。
style属性有两种写法：1. 普通属性写法 2. 用json

div(style="width:200px;height:200px;background:red")
div(style={width:'200px',height:'200px',background:'red'})

class属性有两种写法：1. 普通属性写法 2. 用数组

div(class="left active move")
div(class=['left','active','move'])

5. 缩写

div.box
div#div1

jade的两个方法
jade.render('字符串');
jade.renderFile('模板文件名',参数);