前端开发

首页 > 前端开发 > nodejs > nodejs模板引擎jade用法详解

nodejs模板引擎jade用法详解

分享到：

【字体：大中小】

2017-07-10
来源：网络
489
0
14

导读：
[导读] 在 Express 中调用 jade 模板引擎 varexpress=require(express);varhttp=require(http);varapp=express();app.set(viewengine,jade);//设置模板引擎app.set(views,__dirname);//设置模板相对路径(相对当前目录)app.get(/,functio...

在 Express 中调用 jade 模板引擎

var express = require('express');
var http = require('http');
var app = express();
app.set('view engine', 'jade'); // 设置模板引擎
app.set('views', __dirname);  // 设置模板相对路径(相对当前目录)
 
app.get('/', function(req, res) {
    res.render('test'); // 调用当前路径下的 test.jade 模板
})
 
var server = http.createServer(app);
server.listen(3002);
console.log('server started on http://127.0.0.1:3002/');
test.jade

p hello jade

其上的 jade 模板会被解析成

hello jade

虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。

如果文本比较长可以使用

| foo bar baz

| rawr rawr

或者

foo bar baz

rawr rawr

两种情况都可以处理为

foo bar baz rawr rawr

jade 变量调用

jade 的变量调用有 3 种方式

#{表达式}

=表达式

!=表达式

注意：- 开头在 jade 种属于服务端执行的代码

- console.log('hello'); // 这段代码在服务端执行
- var s = 'hello world' // 在服务端空间中定义变量
p #{s}
p= s

会被渲染成为

hello world

以下代码效果相同

- var s = 'world'
p hello #{s}
p= 'hello' + s

方式1可以自由的嵌入各个地方

方式2返回的是表达式的值

= 与 != 雷同，据说前者会编码字符串（如变成 <stdio.h>），后者不会，不过博主没试出来不知道什么情况。

除了直接在 jade 模板中定义变量，更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中，例如这样：

res.render(test, {
    s: 'hello world'
});

调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量

if 判断

方式1

- var user = { description: '我喜欢猫' }
- if (user.description)
    h2 描述
    p.description= user.description
- else
    h1 描述
    p.description 用户无描述

结果：


  描述
  我喜欢猫

方式2

上述的方式有种省略写法

- var user = { description: '我喜欢猫' }
#user
  if user.description
    h2 描述
    p.description= user.description
  else
    h1 描述
    p.description 用户无描述

方式3

使用 Unless 类似于 if 后的表达式加上了 ! 取反

- var user = { name: 'Alan', isVip: false }
unless user.isVip
  p 亲爱的 #{user.name} 您并不是 VIP

结果

亲爱的 Alan 您并不是 VIP

注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码

循环

for 循环

- var array = [1,2,3]
ul
  - for (var i = 0; i < array.length; ++i) {
    li hello #{array[i]}
  - }

结果


    hello 1
    hello 2
    hello 3

each

同样的 jade 对于循环液提供了省略 “-” 减号的写法

ul
  each val, index in ['西瓜', '苹果', '梨子']
    li= index + ': ' + val

结果


  0: 西瓜
  1: 苹果
  2: 梨子

该方法同样适用于 json 数据

ul
  each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}
    li= index + ': ' + val

结果：


  1: 苹果
  2: 梨子
  3: 乔布斯

Case

类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

结果：

you have 10 friends

简略写法：

- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

结果：

you have a friend

在模板中调用其他语言

:markdown
  # Markdown 标题
  这里使用的是 MarkDown 格式
script
  :coffee
    console.log '这里是 coffee script'

结果：

Markdown 标题

这里使用的是 MarkDown 格式

可重用的 jade 块 (Mixins)

//- 申明可重用的块

mixin list
  ul
    li foo
    li bar
    li baz
 
//- 调用
+list()
+list()

结果：


  foo
  bar
  baz


  foo
  bar
  baz

你也可以给这个重用块制定参数

mixin pets(pets)
  ul.pets
    - each pet in pets
      li= pet
 
+pets(['cat', 'dog', 'pig'])

结果：


  cat
  dog
  pig

Mixins 同时也支持在外部传入 jade 块

mixin article(title)
  .article
    .article-wrapper
      h1= title
      //- block 为 jade 关键字代表外部传入的块
      if block
        block
      else
        p 该文章没有内容
         
+article('Hello world')
 
+article('Hello Jade')
  p 这里是外部传入的块
  p 再写两句

结果：


  
    Hello world
    该文章没有内容

Hello Jade

这里是外部传入的块

再写两句

你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。

前端开发

nodejs模板引擎jade用法详解

Hello Jade

我的网站

文章列表

Tags

About