Jade模板引擎让你飞

时间：2021-09-15 09:16:37

写在前面:现在jade改名成pug了

一.安装

npm install jade

二.基本使用

1.简单使用

p hello jade!

渲染后:

<p>hello jade!</p>

jade安装成功后,进入node命令使用。

2.jade.compile:编译字符窜

> var jade = require('jade')

undefined

> jade.compile('p hello jade!')()

'<p>hello jade!</p>'

3.jade.compileFile:编译jade文件

> var jade = require('jade')

undefined

> jade.compileFile('hello.jade')()

'<p>hello jade!</p>'

>

4.jade.render:渲染html

> jade.render('p hello jade!')

'<p>hello jade!</p>'

5.jade.renderFile:渲染jade文件

> jade.renderFile('hello.jade')

'<p>hello jade!</p>'

>

当jade全局安装后也可以直接使用jade命令。

6.jade filename

C:\Users\Administrator>jade hello.jade

  rendered hello.html

C:\Users\Administrator>

7.jade -P filename 使html文件变得可读

修改hello.jade文件为:

doctype html

html

    head

        title hello jade!

    body

        p hello jade

运行:

jade hello.jade

jade.html文件变成这样:

<!DOCTYPE html><html><head><title>hello jade!</title></head><body><p>hello jade</p></body></html>

这样的可读性太差了，不过没事我们有P(pretty)参数

运行:

jade -P hello.jade

hello.html文件变成这样:

<!DOCTYPE html>

<html>

  <head>

    <title>hello jade!</title>

  </head>

  <body>

    <p>hello jade</p>

  </body>

</html>

这样看起来顺眼多了。

8.jade -w filename 监控文件

执行：

C:\Users\Administrator>jade -w hello.jade

  watching hello.jade

  rendered hello.html

一旦我们修改jade文件，html文件会实时修改。此乃神技也，有点像supervisor。

三.常规用法

 1.选择器的使用

p.bt.cn#dn

编译后

<p id="dn" class="bt cn"></p>

2.如果省略标签元素，默认是div

.bt.cn#dn

编译后

<div id="dn" class="bt cn"></div>

3.属性的使用

一般属性

div(color='red',font-size='1.5rem')

编译后

<div color="red" font-size="1.5rem"></div>

多个属性如果写一行觉得拥挤的话，可以分开写

div(color='red'

    font-size='1.5rem')

style属性

a(style={color:'red'})

编译后:

<a style="color:red;"></a>

带有杠的CSS属性写法

a(style={'z-index':'11000'})

4.字符转义

使用=赋值会进行转义

div(href="https://www.baidu.com/s?wd=jade&ws=jades")

编译后:

<div href="https://www.baidu.com/s?wd=jade&amp;ws=jades"></div>

& 发生了转义 &amp;

　使用!=不会转义

div(href!="https://www.baidu.com/s?wd=jade&ws=jades")

编译后:

<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>

数据库中的字符串这样：萱公子&amp;青橙

很明显被转义了。

显示到前端页面如果继续使用 #{}这样的形式的话，输出的会是萱公子&amp;青橙。肯定是不行的。

这时候，我们可以使用：!{}这样的形式

5.变量的使用

　单个变量

- var code = 1;

p.bt #{code}

编译后：

<p class="bt">1</p>

　对象

- var code = {z:1,q:2};

p.bt #{code.q}

编译后:

<p class="bt">2 </p>

字符串拼接

- var code = {z:1,q:2};

p(class='bt'+code.z) #{code.q}

编译后:

<p class="bt1">2</p>

6.流程控制语句

　Case

- var i=0;

case i

    when 0

        div 变量为#{i}

    when 1

        div 变量为1

    default

        div 没有匹配项

编译后:

<div>变量为0</div>

　

For

- for(var i=0;i<2;i++)

   div #{i} //注意缩进

编译后:

<div>0</div>

<div>1</div>

　If...else

- var ifv = true;

if(ifv)

    div  为真

else

    div 为假

编译后：

<div>为真</div>

7.注释

html可见注释

//html可见注释

div.bt

编译后:

 <!--html可见注释-->

 <div class="bt"></div>

html不可见注释

//-html不可见注释

div.bt

编译后：

<div class="bt"></div>

多行注释(注意缩进)

//

  div.bt

编译后：

<!--div.bt-->

条件注释

<!--[if IE 8]>

<html lang="en" class="ie8">

<![endif]-->

<!--[if IE 8]><!-->

<html lang="en">

<!--<![endif]-->

编译后：

<html lang="en" class="ie8">

<![endif]-->

<!--[if IE 8]><!-->

<html lang="en">

<!--<![endif]-->

8.include

doctype html

html

  head

    style

      include style.css

  body

    script

      include script.js

编译后:（一定要有这两个文件，不然jade会报错）

<!DOCTYPE html>

<html>

  <head>

    <style>p{

    color:red;

    }

    </style>

  </head>

  <body>

    <script>console.log(1)</script>

  </body>

</html>

9.extends与block

layout.jade

doctype html

html

    head

        title hello jade!

    body
　　　　 block content

        block foot

business.jade

extends ./layout.jade

block content

       h1 content主体部分 

block foot

    h1 foot脚注部分

编译后：

busuness.html

<!DOCTYPE html>

<html>

  <head>

    <title>hello jade!</title>

  </head>

  <body>

    <h1>content主体部分</h1>

    <h1>foot脚注部分</h1>

  </body>

</html>

10.jade中写行内js或css

doctype html

html

  head

    style.

    p{color:red}

  body

    script.

    console.log(OK)

编译后:

<!DOCTYPE html>

<html>

  <head>

    <style>p{

    color:red;

    }

    </style>

  </head>

  <body>

    <script>console.log(OK)</script>

  </body>

</html>

11.强大的Mixins

mixin templ_li(value)

    li #{value}

ul

    +templ_li('香蕉')

    +templ_li('橘子')

编译后:

<ul>

   <li>香蕉</li>

   <li>橘子</li>

</ul>

这个特性让我们能自定义一些模板函数。特别是当我们的html结构有相似的时候。

其实跟less中的公共类，react中的公共函数也都是共通的。

less中：

.temp_color(@color:red){

  color:@color;

}

//使用

p{

 .temp_color(blank);

}

react中:

var temp_prop = {

  getDefaultProps:function(){

    return {name:'共有属性'};

  }

}

//使用

var ComponentDib = React.createClass({

  mixins:p[temp_prop ],

  render:function(){

    return <h1>{this.props.name}</h1>

  }

})

相关文章