导航：

• 试玩

• 特性

• 其它实现

• 安装

• 浏览器支持

• API

• 选项

• 标签

• 标签文本

• 注释

• 块注释

• 内联

• 块展开

• Case

• 属性

• HTML

• Doctypes

• 过滤器

• 代码

• 循环

• 条件语句

• 模板继承

• 前置、追加代码块

• 包含

• Mixins

• 产生输出

• Makefile 的一个例子

• 命令行的 Jade

• 教程

• 许可

• 项目主页

Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。

试玩

你可以在网上试玩 Jade。

特性

• 客户端支持

• 代码高可读

• 灵活的缩进

• 块展开

• Mixins

• 静态包含

• 属性改写

• 安全，默认代码是转义的

• 运行时和编译时上下文错误报告

• 命令行下编译jade模板

• HTML5 模式 (使用 !!! 5 文档类型)

• 在内存中缓存(可选)

• 合并动态和静态标签类

• 可以通过 filters 修改树

• 模板继承

• 原生支持 Express JS

• 通过 each 枚举对象、数组甚至是不能枚举的对象

• 块注释

• 没有前缀的标签

• AST Filters

• 过滤器
  
  

• :stylus 必须已经安装 stylus

• :less 必须已经安装 less.js

• :markdown 必须已经安装 markdown-js 或者 node-discount

• :cdata

• :coffeescript 必须已经安装coffee-script

• Emacs Mode

• Vim Syntax

• TextMate Bundle

• Coda/SubEtha syntax Mode

• Screencasts

• html2jade 转换器

其它实现

jade有其他语言的实现，可以实现前后端渲染的统一：

• php

• scala

• ruby

• python

• java

安装

npm install jade

浏览器支持

把 Jade 编译为一个可供浏览器使用的单文件，只需要简单的执行:

make jade.js

如果你已经安装了 uglifyjs (npm install uglify-js)，你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。

make jade.min.js

默认情况下，为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器里使用的时候，你可以通过传递一个选项 { compileDebug: false } 来去掉这个。
下面的模板

p Hello #{name}

会被翻译成下面的函数：

function anonymous(locals, attrs, escape, rethrow) {
  var buf = [];
  with (locals || {}) {
    var interp;
    buf.push('n
Hello ' + escape((interp = name) == null ? '' : interp) + 'n
');
  }
  return buf.join("");
}

通过使用 Jade 的 ./runtime.js你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 runtime.js 里的工具函数, 它们会放在 jade.attrs, jade.escape 这些里。 把选项 { client: true } 传递给 jade.compile(), Jade 会把这些帮助函数的引用放在jade.attrs, jade.escape.

function anonymous(locals, attrs, escape, rethrow) {
  var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
  var buf = [];
  with (locals || {}) {
    var interp;
    buf.push('n
Hello ' + escape((interp = name) == null ? '' : interp) + 'n
');
  }
  return buf.join("");
}

API

var jade = require('jade');

// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);

选项

• self      使用 self 命名空间来持有本地变量. (默认为 false)

• locals    本地变量对象

• filename  异常发生时使用，includes 时必需

• debug     输出 token 和翻译后的函数体

• compiler  替换掉 jade 默认的编译器

• compileDebug  false的时候调试的结构不会被输出

• pretty    为输出加上了漂亮的空格缩进 (默认为 false)

标签

标签就是一个简单的单词:

html

它会被转换为

标签也是可以有 id 的:

div#container

它会被转换为

怎么加 class 呢？

div.user-details

转换为

多个 class 和 id? 也是可以搞定的:

div#foo.bar.baz

转换为

不停的 div div div 很讨厌啊 , 可以这样:

#foo
.bar

这个算是我们的语法糖，它已经被很好的支持了，上面的会输出：