你的位置:首页 > Java教程

[Java教程]Jade模板引擎让你飞


一.安装


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.htmlC:\Users\Administrator>

 

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

修改hello.jade文件为:

doctype htmlhtml  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>

 

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>

 

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" ><![endif]--><!--[if IE 8]><!--><html lang="en"><!--<![endif]-->

编译后:

<html lang="en" class="ie8"><![endif]--><!--[if IE 8]><!--><html lang="en"><!--<![endif]-->

 

8.include

doctype htmlhtml 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 htmlhtml  head    title hello jade!  body
     block content block foot

business.jade

extends ./layout.jadeblock 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 htmlhtml 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> }})