功能
Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。
功能
- 客户端支持
- 超强的可读性
- 灵活易用的缩进
- 块扩展
- 代码默认经过编码处理以增强安全性
- 编译及运行时的上下文错误报告
- 命令行编译支持
- HTML5模式（使用!!!5文档类型）
- 可选的内存缓存
- 联合动态和静态标记类
- 利用过滤器解析树的处理
- 支持 Express JS
- 利用each透明的循环objects,arrays甚至不可枚举对象
- 块注释
- 不需要标记前缀
- AST过滤器
- 过滤器
- :sass 需要安装 sass.js
- :less 需要安装 less.js
- :markdown 需要安装 markdown-js 或 node-discount
- :cdata
- :coffeescript 需要安装 coffee-script
- Vim语法文件
- TextMate包
- Screencasts
其它语言实现
- php
- Scala
- Ruby
安装
通过npm：
npm install jade
浏览器支持
可以通过下面命令将jade编译为客户端浏览器兼容的文件：
$ make jade.js
或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：
$ make jade.min.js
公开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
- scope 执行作用域（this）
- locals 本地变量对象
- filename 处理异常及缓存时使用
- cache 通过文件名将Javascript缓存在内存中
- debug 输出生成的标记和函数体
- compiler 替换jade默认编译引擎
语法
行尾
在解析前会将 CRLF 和 CR 转换为 LF.
标记
标记是一行的第一个单词：
html
会被转换为 <html></html>
标记也可以有id：
div#container
这将被渲染成<div id="container"></div>
如何处理类？
div.user-details
渲染为: <div class="user-details"></div>
多个class？并且还有id？
div#foo.bar.baz
渲染为：<div id="foo" class="bar baz"></div>
总写div确实很烦人，可以省略之：
#foo .bar
输出： <div id="foo"></div><div class="bar"></div>
标记文本
只需要将文本内容放在标记后面：
p wahoo!
渲染为 <p>wahoo!</p>.
酷，但是如何处理大段文本呢？
p | foo bar baz | rawr rawr | super cool | go jade go
渲染为 <p>foo bar baz rawr.....</p>
内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: '一回', email: 'xianlihua[at]gmail.com' }}，可以这样做：
#user #{name} <#{email}>
输出：<div id="user">一回 <xianlihua[at]gmail.com></div>
出于某种原因需要输出#{}？转义之：
p \#{CSSer, 关注Javascript技术}
这样就得到了：<p>#{CSSer, 关注Javascript技术}</p>
也可以使用反转义变量!{html}，下面的代码将输出script标记：
- var html = "<script></script>" | !{html}
包含文本的嵌套标记也可以使用文本块：
label | Username: input(name='user[name]')
或者直接使用标记文本:
label Username: input(name='user[name]')
只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：
html head title CSSer, 关注Web前端技术 script if (foo) { bar(); } else { baz(); }
再次作为替代方案，我们可以使用点号'.'来表示一个文本块，例如：
p. foo asdf asdf asdfasdfaf asdf asd.
输出:
<p>foo asdf asdf asdfasdfaf asdf asd . </p>
如果点号'.'与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：
p .
输出:
<p>.</p>
注释
单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：
// 一些段落 p foo p bar
将会输出：
<!-- 一些段落 --> <p>foo</p> <p>bar</p>
Jade也支持非缓冲注释，只需增加一个横杠：
//- 该行注释将不会被输出到解析后的页面中 p foo p bar
输出：
<p>foo</p> <p>bar</p>
块注释
块注释会依据缩进进行处理：
body // #content h1 CSSer,关注Web前端技术
输出：
<body> <!-- <div id="content"> <h1>CSSer,关注Web前端技术</h1> </div> --> </body>
Jade也支持条件注释，例如：
body /if IE a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox
输出:
<body> <!--[if IE]> <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a> <![endif]--> </body>
嵌套
Jade支持通过嵌套来以自然的方式定义标记：
ul li.first a(href='#') foo li a(href='#') bar li.last a(href='#') baz
块扩展
块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：
ul li.first: a(href='#') foo li: a(href='#') bar li.last: a(href='#') baz
特性
目前Jade支持'('和')'的特性定界符。
a(href='/login', title='View login page') Login
另外我们也可以使用冒号（:）来作为分割符：
a(href: '/login', title: '注册成为CSSer.com会员') Login
Boolean特性也被支持：
input(type="checkbox", checked)
值为变量的Boolean特性只有在值为true时输出：
input(type="checkbox", checked: someValue)
分拆在多行也能正常解析：
input(type='checkbox', name='agreement', checked)
文档类型
利用!!!来增加页面的文档类型：
!!!
将会输出过渡型文档类型，然而：
!!! 5
将会输出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">' };
要修改默认值只需改变：
jade.doctypes.default = 'whatever you want';
过滤器
过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。
body :markdown Woah! jade _and_ markdown, very **cool** we can even link to [CSSer](http://www.csser.com)
渲染后:
<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>
过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。
body conditionals: if role == 'admin' p You are amazing else p Not so amazing
代码
Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：
- var foo = 'bar';
这可被用于条件或循环：
- for (var key in obj) p= obj[key]
由于Jade的缓冲技术，下面的代码是有效的：
- if (foo) ul li yay li foo li worked - else p oh no! you are not in csser.com
甚至详细的迭代循环：
- if (items.length) ul - items.forEach(function(item){ li= item - })
任何你希望的都可以实现！
接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：
- var foo = 'bar' = foo h1= foo
输出： bar<h1>bar</h1>. 被'='缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：
p!= aVarContainingMoreHTML
一个允许使用"vanilla"Javascript的例外，是 - each 标记，其表现形式为：
- each VAL[, KEY] in OBJ
实现循环数组的例子：
- var items = ["one", "two", "three"] - each item in items li= item
输出:
<li>one</li> <li>two</li> <li>three</li>
循环对象的键和值：
- var obj = { foo: 'bar' } - each val, key in obj li #{key}: #{val}
这会输出 <li>foo: bar</li>
也可以进行嵌套循环：
- each user in users - each role in user.roles li= role
当一个属性为undefined，Jade会输出空串，例如：
textarea= user.signature
近期的Jade版本会输出空字符串而不是undefined：
<textarea></textarea>
命令行工具：bin/jade
输出html到标准输出（stdout）：
jade examples/*.jade --pipe
生成 examples/*.html ：
jade examples/*.jade
传入参数：
jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'
[完]
相关推荐
在本示例"jade模板引擎demo"中，我们将会探讨Jade如何通过其特有的语法来简化网页开发，以及如何在实际项目中使用它。 1. Jade的基本语法： - 语句结束：与JavaScript类似，Jade并不需要分号(;)来结束语句，而是...
Node下载安装 登录node官网下载安装包，安装方式有两种，一种是Windows安装包（.msi）形式，另一种是Windows（.exe）形式。 ...Node.js默认安装目录为"C:\Program Files\node js"，这里可以修改目录，不推荐放在C盘，...
虽然那只是一个简单的HelloWorld类的小东西，可里面包含的内容还是有些多了，为了更好的理解Express所支持的jade模板引擎的用法，我们这次提供一个手动创建的小网站，可以显示来访者的IP，并对访问进行计数。...
根据提供的信息，我们可以总结出以下关于Jade软件的相关知识点： ### Jade 软件简介 Jade 是一款广泛应用于材料科学、化学、物理学等多个领域的X射线衍射数据分析软件。它能够帮助用户进行数据处理、分析以及图表...
为什么要配置Jade模板引擎，而不是Smarty之类 原因很简单NodeJS与PHP之间摇摆不定时，前端至少统一了 配置Jade主要用到composer，需要用之前开启一个composer application/config.php $config['composer_autoload'...
本教程将引导你入门JADE，了解如何在Java环境中构建和运行基于代理的程序。 1. 安装与配置JADE环境： 首先，你需要访问JADE的官方网站（http://jade.tilab.com/）下载最新版本的JADE。解压缩后，你会看到四个主要...
Spark Jade 模板引擎Spark 和 Jade 模板引擎的实现Spark Java： : Jade4J： : 版本0.1如何使用确保 lib 文件夹中有 jade4j-0.4.3.jar import static spark.Spark.get ;import java.io.IOException ;import java.util...
Jade是受Haml的影响以JavaScript实现用于node的高性能模板引擎。 客户端支持 高可读性 灵活缩进 html 5模式 可选内存缓冲 默认代码转义以提高安全性 以过滤器产生解析树 模板继承 开箱即用的Express JS...
基于模板引擎Jade的应用详解 模板引擎Jade是一种流行的模板引擎，它可以将模板语言转换为HTML语言，从而提高开发效率和页面加载速度。在这篇文章中，我们将详细介绍基于模板引擎Jade的应用，并提供相关的实践经验。...
Swig是node.js中一个流行的前端模板引擎，它的特点在于语法简单、易于理解和使用，与传统的Jade模板引擎相比，Swig更贴近标准的HTML结构，这使得许多习惯了传统HTML的开发者更容易上手。 Swig模板引擎的主要特点...
jade-php, Pug ( Jade ) 模板引擎移植到 PHP pug-php 为模板编译器添加了 PHP脚本支持。 3版本的Phug Pug，一个非常可以定制的模板引擎，并以英镑/Pug developpers作为新 PHP Pug引擎参考。 Phug文档 s
不过，选择模板引擎时应根据项目需求和个人喜好来决定，例如Jade（Pug）虽然语法简洁，但可能需要一段时间适应其独特的缩进方式。总的来说，Swig因其直观的HTML语法和广泛的功能，成为许多开发者的首选。
说的简单点，模板引擎就是一个字符串中有几个变量待定，通过模板引擎函数把数据动态的塞进去。 今天我们就来聊一聊 Jade 的使用方法和语法说明。Jade官网：jade-lang.com/ Jade 命令行工具 Jade 的使用需要依赖 ...
Jade 是一种高性能的模板引擎，它深受 Haml（一种用于 Ruby 的模板引擎）的影响，采用 JavaScript 编写，主要面向 Node.js 开发者提供服务。通过 Jade，开发者能够更加高效、简洁地创建 HTML 文档。 #### 二、特性 ...
Node.js中的Jade模板引擎是一种用于服务器端模板渲染的工具。它允许开发者以一种更简洁和美观的方式编写HTML代码。Jade模板引擎继承了Haml模板语言的设计哲学，因此它的语法也与Haml类似，注重于使用缩进而非花括号...
jade软件的入门文件，从这个ppt中可以快速上手jade软件
### Jade初学者入门知识点 #### 一、JADE概述 JADE（Java Agent Development Framework）是一种基于Java的框架，用于开发符合FIPA（Foundation for Intelligent Physical Agents）规范的多智能体系统（Multi-Agent...
异步渲染Jade模板引擎。 用法（RequireJS） 安装： bower install ajade 用法示例： define([ '/path/to/ajade/index', '/path/to/master_template.jade', ], function( aJade, tpl ) { // tpl can be ...