Jade模板引擎让你飞 #16

zhaoqize · 2018-01-27T03:35:45Z

现在 jade 改名成 pug 了

安装

npm install jade

基本使用

简单使用

p hello jade!

渲染后:

<p>hello jade!</p>

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

jade.compile:编译字符窜

> var jade = require('jade')
undefined
> jade.compile('p hello jade!')()
'<p>hello jade!</p>'

jade.compileFile:编译jade文件

> var jade = require('jade')
undefined
> jade.compileFile('hello.jade')()
'<p>hello jade!</p>'
>

jade.render:渲染html

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

jade.renderFile:渲染jade文件

> jade.renderFile('hello.jade')
'<p>hello jade!</p>'
>

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

jade filename

C:\Users\Administrator>jade hello.jade

  rendered hello.html


C:\Users\Administrator>

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>

这样看起来顺眼多了。

jade -w filename 监控文件

执行：

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

  watching hello.jade
  rendered hello.html

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

常规用法

选择器的使用

p.bt.cn#dn

编译后

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

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

.bt.cn#dn

编译后

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

属性的使用

一般属性

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'})

字符转义

使用 = 赋值会进行转义

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>

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

很明显被转义了。

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

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

变量的使用

单个变量

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

流程控制语句

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>

注释

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]-->

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>

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>

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>

强大的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>
  }
})

👆返回主页查看更多文章👆

The text was updated successfully, but these errors were encountered:

zhaoqize added Blog Jade labels Jan 27, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jade模板引擎让你飞 #16

Jade模板引擎让你飞 #16

zhaoqize commented Jan 27, 2018 •

edited

Loading

Jade模板引擎让你飞 #16

Jade模板引擎让你飞 #16

Comments

zhaoqize commented Jan 27, 2018 • edited Loading

安装

基本使用

常规用法

属性的使用

字符转义

变量的使用

流程控制语句

注释

include

extends与block

jade中写行内js或css

强大的Mixins

zhaoqize commented Jan 27, 2018 •

edited

Loading