Jade模板引擎入门教程

Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。

功能

  • 客户端支持
  • 超强的可读性
  • 灵活易用的缩进
  • 块扩展
  • 代码默认经过编码处理以增强安全性
  • 编译及运行时的上下文错误报告
  • 命令行编译支持
  • HTML5模式（使用!!!5文档类型）
  • 可选的内存缓存
  • 联合动态和静态标记类
  • 利用过滤器解析树的处理
  • 支持 Express JS
  • 利用each透明的循环objects,arrays甚至不可枚举对象
  • 块注释
  • 不需要标记前缀
  • AST过滤器
  • 过滤器
  • Vim语法文件
  • TextMate包
  • Screencasts

其它语言实现

安装

通过npm：


1

2


<span style="font-size: 13px;">npm install jade

</span>

浏览器支持

可以通过下面命令将jade编译为客户端浏览器兼容的文件：


1

2


<span style="font-size: 13px;">$ make jade.js

</span>

或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：


1

2


<span style="font-size: 13px;">$ make jade.min.js

</span>

公开API

var jade = require(‘jade‘);

// 渲染字符串
jade.render(‘.csser.com 字符串‘, { options: ‘here‘ });

// 渲染文件
jade.renderFile(‘path/to/csser.com.jade‘, { options: ‘here‘ }, function(err, html){
   // 这里的options是可选的
   // 回调函数可以作为第二个参数
});

// 编译一个函数
var fn = jade.compile(‘string of jade‘, options);
fn.call(scope, locals);

Options

  • 执行作用域（this）scope
  • 本地变量对象locals
  • 处理异常及缓存时使用filename
  • 通过文件名将Javascript缓存在内存中cache
  • 输出生成的标记和函数体debug
  • 替换jade默认编译引擎compiler

语法

行尾

在解析前会将 CRLF 和 CR 转换为 LF.

标记

标记是一行的第一个单词：


1

2


<span style="font-size: 13px;">html

</span>

会被转换为 <html></html>

标记也可以有id：


1

2


<span style="font-size: 13px;">div#container

</span>

这将被渲染成<div id=”container”></div>

如何处理类？


1

2


<span style="font-size: 13px;">div.user-details

</span>

渲染为: <div class=”user-details”></div>

多个class？并且还有id？


1

2


<span style="font-size: 13px;">div#foo.bar.baz

</span>

渲染为：<div id=”foo” class=”bar baz”></div>

总写div确实很烦人，可以省略之：


1

2

3


<span style="font-size: 13px;">#foo

.bar

</span>

输出： <div id=”foo”></div><div class=”bar”></div>

标记文本

只需要将文本内容放在标记后面：


1

2


<span style="font-size: 13px;">p wahoo!

</span>

渲染为 <p>wahoo!</p>.

酷，但是如何处理大段文本呢？


1

2

3

4

5

6


<span style="font-size: 13px;">p

  | foo bar baz

  | rawr rawr

  | super cool

  | go jade go

</span>

渲染为 <p>foo bar baz rawr…..</p>

内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }}，可以这样做：


1

2


<span style="font-size: 13px;">#user #{name} &lt;#{email}&gt;

</span>

输出：<div id=”user”>一回 &lt;xianlihua[at]gmail.com&gt;</div>

出于某种原因需要输出#{}？转义之：


1

2


<span style="font-size: 13px;">p \#{CSSer, 关注Javascript技术}

</span>

这样就得到了：<p>#{CSSer, 关注Javascript技术}</p>

也可以使用反转义变量!{html}，下面的代码将输出script标记：


1

2

3


<span style="font-size: 13px;">- var html = "<script></script>"

| !{html}

</span>

包含文本的嵌套标记也可以使用文本块：


1

2

3

4


<span style="font-size: 13px;">label

  | Username:

  input(name=‘user[name]‘)

</span>

或者直接使用标记文本:


1

2

3


<span style="font-size: 13px;">label Username:

  input(name=‘user[name]‘)

</span>

只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：


1

2

3

4

5

6

7

8

9

10


<span style="font-size: 13px;">  html

    head

      title CSSer, 关注Web前端技术

      script

        if (foo) {

          bar();

        } else {

          baz();

        }

</span>

再次作为替代方案，我们可以使用点号’.‘来表示一个文本块，例如：


1

2

3

4

5

6

7


<span style="font-size: 13px;">  p.

    foo asdf

    asdf

     asdfasdfaf

     asdf

    asd.

</span>

输出:


1

2

3

4

5

6

7

8


<span style="font-size: 13px;">    <p>foo asdf

    asdf

      asdfasdfaf

      asdf

    asd

    .

    </p>

</span>

如果点号’.‘与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：


1

2


<span style="font-size: 13px;">p .

</span>

输出:


1

2


<span style="font-size: 13px;"><p>.</p>

</span>

注释

单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：


1

2

3

4


<span style="font-size: 13px;">// 一些段落

p foo

p bar

</span>

将会输出：


1

2

3

4


<span style="font-size: 13px;"><!-- 一些段落 -->

<p>foo</p>

<p>bar</p>

</span>

Jade也支持非缓冲注释，只需增加一个横杠：


1

2

3

4


<span style="font-size: 13px;">//- 该行注释将不会被输出到解析后的页面中

p foo

p bar

</span>

输出：


1

2

3


<span style="font-size: 13px;"><p>foo</p>

<p>bar</p>

</span>

块注释

块注释会依据缩进进行处理：


1

2

3

4

5


<span style="font-size: 13px;">  body

    //

      #content

        h1 CSSer,关注Web前端技术

</span>

输出：


1

2

3

4

5

6

7

8


<span style="font-size: 13px;"><body>

  <!--

  <div id="content">

    <h1>CSSer,关注Web前端技术</h1>

  </div>

  -->

</body>

</span>

Jade也支持条件注释，例如：


1

2

3

4


<span style="font-size: 13px;">body

  /if IE

    a(href=‘http://www.mozilla.com/en-US/firefox/‘) Get Firefox

</span>

输出:


1

2

3

4

5

6


<span style="font-size: 13px;"><body>

  <!--[if IE]>

    <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>

  <![endif]-->

</body>

</span>

嵌套

Jade支持通过嵌套来以自然的方式定义标记：


1

2

3

4

5

6

7

8


<span style="font-size: 13px;">ul

  li.first

    a(href=‘#‘) foo

  li

    a(href=‘#‘) bar

  li.last

    a(href=‘#‘) baz

</span>

块扩展

块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：


1

2

3

4

5


<span style="font-size: 13px;">  ul

    li.first: a(href=‘#‘) foo

    li: a(href=‘#‘) bar

    li.last: a(href=‘#‘) baz

</span>

特性

目前Jade支持’(‘和’)‘的特性定界符。


1

2


<span style="font-size: 13px;">a(href=‘/login‘, title=‘View login page‘) Login

</span>

另外我们也可以使用冒号（:）来作为分割符：


1

2


<span style="font-size: 13px;">a(href: ‘/login‘, title: ‘注册成为CSSer.com会员‘) Login

</span>

Boolean特性也被支持：


1

2


<span style="font-size: 13px;">input(type="checkbox", checked)

</span>

值为变量的Boolean特性只有在值为true时输出：


1

2


<span style="font-size: 13px;">input(type="checkbox", checked: someValue)

</span>

分拆在多行也能正常解析：


1

2

3

4


<span style="font-size: 13px;">input(type=‘checkbox‘,

  name=‘agreement‘,

  checked)

</span>

文档类型

利用!!!来增加页面的文档类型：


1

2


<span style="font-size: 13px;">!!!

</span>

将会输出过渡型文档类型，然而：


1

2


<span style="font-size: 13px;">!!! 5

</span>

将会输出HTML5的文档类型，下面是默认定义的文档类型，这也可以很容易的被扩展：

var doctypes = exports.doctypes = {
   ‘5‘: ‘<!DOCTYPE html>‘,
   ‘xml‘: ‘<?xml version="1.0" encoding="utf-8" ?>‘,
   ‘default‘: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‘,
   ‘transitional‘: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‘,
   ‘strict‘: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‘,
   ‘frameset‘: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">‘,
   ‘1.1‘: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">‘,
   ‘basic‘: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">‘,
   ‘mobile‘: ‘<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">‘
};

要修改默认值只需改变：


1

2


<span style="font-size: 13px;">jade.doctypes.default = ‘whatever you want‘;

</span>

过滤器

过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。


1

2

3

4

5


<span style="font-size: 13px;">body

  :markdown

    Woah! jade _and_ markdown, very **cool**

    we can even link to [CSSer](http://www.csser.com)

</span>

渲染后:


1

2


<span style="font-size: 13px;">   <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>

</span>

过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。


1

2

3

4

5

6

7


<span style="font-size: 13px;">body

  conditionals:

    if role == ‘admin‘

      p You are amazing

    else

      p Not so amazing

</span>

代码

Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：


1

2


<span style="font-size: 13px;">- var foo = ‘bar‘;

</span>

这可被用于条件或循环：


1

2

3


<span style="font-size: 13px;">- for (var key in obj)

  p= obj[key]

</span>

由于Jade的缓冲技术，下面的代码是有效的：


1

2

3

4

5

6

7

8


<span style="font-size: 13px;">- if (foo)

  ul

    li yay

    li foo

    li worked

- else

  p oh no! you are not in csser.com

</span>

甚至详细的迭代循环：


1

2

3

4

5

6


<span style="font-size: 13px;">- if (items.length)

  ul

    - items.forEach(function(item){

      li= item

    - })

</span>

任何你希望的都可以实现！

接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：


1

2

3

4


<span style="font-size: 13px;">- var foo = ‘bar‘

= foo

h1= foo

</span>

输出： bar<h1>bar</h1>. 被’=‘缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：


1

2


<span style="font-size: 13px;">p!= aVarContainingMoreHTML

</span>

一个允许使用”vanilla”Javascript的例外，是 – each 标记，其表现形式为：


1

2


<span style="font-size: 13px;">- each VAL[, KEY] in OBJ

</span>

实现循环数组的例子：


1

2

3

4


<span style="font-size: 13px;">- var items = ["one", "two", "three"]

- each item in items

  li= item

</span>

输出:


1

2

3

4


<span style="font-size: 13px;"><li>one</li>

<li>two</li>

<li>three</li>

</span>

循环对象的键和值：


1

2

3

4


<span style="font-size: 13px;">- var obj = { foo: ‘bar‘ }

- each val, key in obj

  li #{key}: #{val}

</span>

这会输出 <li>foo: bar</li>

也可以进行嵌套循环：


1

2

3

4


<span style="font-size: 13px;">- each user in users

  - each role in user.roles

    li= role

</span>

当一个属性为undefined，Jade会输出空串，例如：


1

2


<span style="font-size: 13px;">textarea= user.signature

</span>

近期的Jade版本会输出空字符串而不是undefined：


1

2


<span style="font-size: 13px;"><textarea></textarea>

</span>

命令行工具：bin/jade

输出html到标准输出（stdout）：


1

2


<span style="font-size: 13px;">jade examples/*.jade --pipe

</span>

生成 examples/*.html ：


1

2


<span style="font-size: 13px;">jade examples/*.jade

</span>

传入参数：


1

2


<span style="font-size: 13px;">jade examples/layout.jade --options ‘{ locals: { title: "CSSer" }}‘

</span>

   
时间： 2024-11-10 14:25:50

Jade模板引擎入门教程的相关文章

smarty模板引擎入门教程

smarty模版是比较大众化的一个模版,在php开发过程当中被很多开发者视为最友好的模版之一,学习smarty课程对于很多培训机构来说也是列入了培训课程之一,那么很多方面就需要我们学习了一. 安装首先打开网页http://smarty.php.net/download.php,下载最新版本的Smarty.解压下载的文件(目录结构还蛮复杂的).例如:(1) 我在根目录下建立了新的目录learn/,再在learn/里建立一个文件夹smarty/.将刚才解压缩出来的目录的libs/拷贝到smarty/

Node.js开发入门—使用jade模板引擎

在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构.模板.stylesheet.routers等.虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数. 安装jade npm instal

jade模板引擎简明用法

①.特性 首个单词为标签,有一些不能识别的标签可作为code,如each for case if  else if unless zen coding风格添加标签,如 .nb#hello 生成 <div class="nb" id="hello"></div> 缩进必须统一使用tab或space,否则会报错 通过缩进来表示嵌套关系,这个很重要!如 p a   生成 <p><a></a></p>

Jade 模板引擎使用

在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'

jade模板引擎

jade是使用JavaScript实现,可供nodejs使用的高性能模板引擎(性能高不高,有些争议.姑且称之为高性能吧!).模板引擎有很多,主要使用比较广泛的是jade和ejs,modejs项目默认使用jade作为模板引擎,我也就不多说了至于如何选择,还是得就事论事综合各种因素来考虑.在此不对优缺点进行分析.插一句嘴,ejs的语法更像jsp.asp这样的技术而jade更像python的语法风格,缩进来缩进去,有点绕.不过这并不影响代码的可读性(我是这么认为的).不管是jade还是ejs语法都比较

初次入坑jade模板引擎（一）

最近由于工作需要全栈开发,nodejs做后端,在写一个后台管理系统的时候,我一直在考虑用怎样的方式去写,尝试过依然采用前后端分离的结构.使用json数据进行数据交互的模式,但是尝试过才知道,真的很花时间和精力,大部分精力都花在了前端构建上面了. 后来我想到了模板引擎,采用现成的UI框架直接套用,然后通过模板引擎直接在服务端生成HTML代码.node常用的模板引擎有ejs和jade,都说jade很牛逼,所以今天就尝试了一下. 首先安装jade npm install jade 安装好后在expre

Node.js开发 ---- Jade 模板引擎使用

1.安装jade插件npm install jade 2.app.js[javascript] view plain copy 在CODE上查看代码片派生到我的代码片var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'); // 设置模板引擎 app.set('views', __dirname); // 设置模板相对路径(相

Jade模板引擎学习（一）安装及基本语法

Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持  超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式 可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀 AST过滤器  过滤器  ... 二

前端模板引擎入门

模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍,  java后台的模板引擎, freemark介绍,其图能很好标明这种关系. http://freemarker.org/ Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e