2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!

Fork me on GitHub

Jade模板引擎让你飞

写在前面:现在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>
  }
})    

 

posted on 2016-11-13 14:40  qize  阅读(3209)  评论(0编辑  收藏  举报

导航