• 在 Express 中调用 jade 模板引擎
  • jade 变量调用
  • if 判断
  • 循环
  • Case 选择
  • 在模板中调用其他语言
  • 可重用的 jade 块 (Mixins)
  • 模板包含 (Includes)
  • 模板引用 (Extends)

在 Express 中调用 jade 模板引擎

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

test.jade

  1. p hello jade

其上的 jade 模板会被解析成

  1. <p>hello jade</p>

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

如果文本比较长可以使用

  1. p
  2. | foo bar baz
  3. | rawr rawr

或者

  1. p.
  2. foo bar baz
  3. rawr rawr

两种情况都可以处理为

  1. <p>foo bar baz rawr rawr</p>

jade 变量调用

jade 的变量调用有 3 种方式

    1. #{表达式}
    1. =表达式
    1. !=表达式

注意:符号 - 开头在 jade 中属于服务端执行的代码

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

会被渲染成为

  1. <p>hello world</p>
  2. <p>hello world</p>

以下代码效果相同

  1. - var s = 'world'
  2. p hello #{s}
  3. p= 'hello' + s

方式1可以自由的嵌入各个地方 方式2返回的是表达式的值 = 与 方式3 != 雷同,据说前者会编码字符串,如 <stdio.h> 变成 <stdio.h> 后者不会,不过博主没试出来不知道什么情况。

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

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

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

if 判断

<h2>方式1</h2>

  1. - var user = { description: '我喜欢猫' }
  2. - if (user.description)
  3. h2 描述
  4. p.description= user.description
  5. - else
  6. h1 描述
  7. p.description 用户无描述

结果:

  1. <div id="user">
  2. <h2>描述</h2>
  3. <p class="description">我喜欢猫</p>
  4. </div>

<h2>方式2</h2>

上述的方式有种省略写法

  1. - var user = { description: '我喜欢猫' }
  2. #user
  3. if user.description
  4. h2 描述
  5. p.description= user.description
  6. else
  7. h1 描述
  8. p.description 用户无描述

<h2>方式3</h2>

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

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

结果

  1. <p>亲爱的 Alan 您并不是 VIP</p>

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

循环

<h2>for 循环</h2>

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

结果

  1. <ul>
  2. <li>hello 1</li>
  3. <li>hello 2</li>
  4. <li>hello 3</li>
  5. </ul>

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

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

结果

  1. <ul>
  2. <li>0: 西瓜</li>
  3. <li>1: 苹果</li>
  4. <li>2: 梨子</li>
  5. </ul>

该方法同样适用于 json 数据

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

结果:

  1. <ul>
  2. <li>1: 苹果</li>
  3. <li>2: 梨子</li>
  4. <li>3: 乔布斯</li>
  5. </ul>

Case

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

  1. - var friends = 10
  2. case friends
  3. when 0
  4. p you have no friends
  5. when 1
  6. p you have a friend
  7. default
  8. p you have #{friends} friends

结果:

  1. <p>you have 10 friends</p>

简略写法:

  1. - var friends = 1
  2. case friends
  3. when 0: p you have no friends
  4. when 1: p you have a friend
  5. default: p you have #{friends} friends

结果:

  1. <p>you have a friend</p>

在模板中调用其他语言

  1. :markdown
  2. # Markdown 标题
  3. 这里使用的是 MarkDown 格式
  4. script
  5. :coffee
  6. console.log '这里是 coffee script'

结果:

  1. <h1>Markdown 标题</h1>
  2. <p>这里使用的是 MarkDown 格式</p>
  3. <script>console.log('这里是 coffee script')</script>

可重用的 jade 块 (Mixins)

  1. //- 申明可重用的块
  2. mixin list
  3. ul
  4. li foo
  5. li bar
  6. li baz
  7. //- 调用
  8. +list()
  9. +list()

结果:

  1. <ul>
  2. <li>foo</li>
  3. <li>bar</li>
  4. <li>baz</li>
  5. </ul>
  6. <ul>
  7. <li>foo</li>
  8. <li>bar</li>
  9. <li>baz</li>
  10. </ul>

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

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

结果:

  1. <ul class="pets">
  2. <li>cat</li>
  3. <li>dog</li>
  4. <li>pig</li>
  5. </ul>

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

  1. mixin article(title)
  2. .article
  3. .article-wrapper
  4. h1= title
  5. //- block 为 jade 关键字代表外部传入的块
  6. if block
  7. block
  8. else
  9. p 该文章没有内容
  10. +article('Hello world')
  11. +article('Hello Jade')
  12. p 这里是外部传入的块
  13. p 再写两句

结果:

  1. <div class="article">
  2. <div class="article-wrapper">
  3. <h1>Hello world</h1>
  4. <p>该文章没有内容</p>
  5. </div>
  6. </div>
  7. <div class="article">
  8. <div class="article-wrapper">
  9. <h1>Hello Jade</h1>
  10. <p>这里是外部传入的块</p>
  11. <p>再写两句</p>
  12. </div>
  13. </div>

Mixins 同时也可以从外部获取属性。

  1. mixin link(href, name)
  2. a(class!=attributes.class, href=href)= name
  3. +link('/foo', 'foo')(class="btn")

结果:

  1. <a href="/foo" class="btn">foo</a>

模板包含 (Includes)

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

index.jade

  1. doctype html
  2. html
  3. include includes/head
  4. body
  5. h1 我的网站
  6. p 欢迎来到我的网站。
  7. include includes/foot

includes/head.jade

  1. head
  2. title 我的网站
  3. script(src='/javascripts/jquery.js')
  4. script(src='/javascripts/app.js')

includes/foot.jade

  1. #footer
  2. p Copyright (c) foobar

调用 index.jade 的结果:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>我的网站</title>
  5. <script src='/javascripts/jquery.js'></script>
  6. <script src='/javascripts/app.js'></script>
  7. </head>
  8. <body>
  9. <h1>我的网站</h1>
  10. <p>欢迎来到我的网站。</p>
  11. <div id="footer">
  12. <p>Copyright (c) foobar</p>
  13. </div>
  14. </body>
  15. </html>

模板引用 (Extends)

通过 Extends 可以引用外部的 jade 块,感觉比 include 要好用

layout.jade

  1. doctype html
  2. html
  3. head
  4. title 我的网站
  5. meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
  6. link(type="text/css",rel="stylesheet",href="/css/style.css")
  7. script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
  8. body
  9. block content

article.jade

  1. //- extends 拓展调用 layout.jade
  2. extends ../layout
  3. block content
  4. h1 文章列表
  5. p 小李忆贾大山 小强:将启动新核电项目
  6. p 朴槿惠:"岁月号"船长等人弃船行为等同于杀人
  7. p 普京疑换肤:眼袋黑眼圈全无 领导人整容疑云
  8. p 世界最大兔子重45斤长逾1 1年吃2万元食物

res.render(‘article’) 的结果:

  1. <html>
  2. <head>
  3. <title>我的网站</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
  5. <link type="text/css" rel="stylesheet" href="/css/style.css"></head>
  6. <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <h1>文章列表</h1>
  10. <p>小李忆贾大山 小强:将启动新核电项目</p>
  11. <p>朴槿惠:"岁月号"船长等人弃船行为等同于杀人</p>
  12. <p>普京疑换肤:眼袋黑眼圈全无 领导人整容疑云</p>
  13. <p>世界最大兔子重45斤长逾1米 1年吃2万元食物</p>
  14. </body>
  15. </html>

Jade模板引擎使用详解的更多相关文章

  1. flask中jinjia2模板引擎使用详解1

    在之前的文章中我们介绍过flask调用jinja2模板的基本使用,这次我们来说一下jinjia2模板的使用 Jinja2 在其是一个 Python 2.4 库之前,被设计 为是灵活.快速和安全的. 模 ...

  2. flask中jinjia2模板引擎使用详解5

    接上文 宏 可以理解为函数,即把一些常用的模板片段做好封装,以便于重用,减少工作量和维护难度. 宏的定义很简单: {%macro xxx()%} ##这里写内容 {%endmacro%}   下面引用 ...

  3. 模板引擎ejs详解

    singsingasong.js: const ejs=require('ejs'); ejs.renderFile('./views/singsingasong.ejs', {'name':'sin ...

  4. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  5. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  6. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  7. maven pom文件简单模板和配置详解

    https://blog.csdn.net/earbao/article/details/49924943 maven pom文件简单模板和配置详解

  8. VC 与Matlab混合编程之引擎操作详解

    Visual C++ 是当前主流的应用程序开发环境之一,开发环境强大,开发的程序执行速度快.但在科学计算方面函数库显得不够丰富.读取.显示数据图形不方便. Matlab 是一款将数值分析.矩阵计算.信 ...

  9. Express全系列教程之(十):jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

随机推荐

  1. Python 其他操作

    lst = ["太白","太白","太黑","日天","女神","alex",& ...

  2. twisted服务器端客户端通信(转载填坑)

    服务器端代码 # -*- coding:UTF-8 -*- from time import ctime from twisted.internet import reactor from twist ...

  3. 怎么在windows7下搭建服务器

    怎么在windows7系统安装IIS 图文教程 http://jingyan.baidu.com/article/1e5468f92f6e05484961b703.html 以下本人为列:第一步:先按 ...

  4. Adaboost新理解

    Adaboost有几个难点: 1.弱分类器的权重怎么理解? 误差大的弱分类器权重小,误差小的弱分类器权重大.这很好理解.在台湾大学林轩田老师的视频中,推导说,这个权值实际上貌似梯度下降,权值定义成1/ ...

  5. PS如何批量处理图片

    喜爱摄影的朋友可能都有这样的体会,相机里面存了大量的图片,一般都是2048×1536或者更大像素的照片,每张都有1M以上,如果设置的清晰度高,则照片就更大,这样的图片是无法上传到博客中的(博客要求每张 ...

  6. Spring AOP关于cglib动态代理

    一: Spring AOP的默认代理方式是jdk动态代理,还有另外一种代理方式是cglib代理,简单说前者基于接口,后者基于继承,基本思路是将被代理对象的类作为父类,然后创建子类来进行方法的调用,调用 ...

  7. CH4201 楼兰图腾

    题意 4201 楼兰图腾 0x40「数据结构进阶」例题 描述 在完成了分配任务之后,西部314来到了楼兰古城的西部.相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀('V'), ...

  8. 使用lua graphql 模块让openresty 支持graphql api

      graphql 是一个很不错的api 查询标准语言,已经有一个lua 的版本支持graphql 项目使用docker&&docker-compose 运行 环境准备 模块安装 lu ...

  9. grandstack graphql 开发模型

    当前grandstack 支持两类开发方式 js (使用Neo4j-graphql-js) 插件模型 js 模型 参考https://github.com/rongfengliang/grand-st ...

  10. nnlog模块使用

    安利一个好用的写日志模块,python自带的logging模块理解起来比较费劲,直接pip install nnlog即可 使用例子如下代码:   1 2 3 4 5 6 7 8 9 10 11 12 ...