语法

行结束标志

CRLF 和 CR 会在编译之前被转换为 LF

标签

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

  1. html

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

标签也是可以有id的:

  1. div#container

它会被转换为 <div id="container"></div>

怎么加类呢？

  1. div.user-details

转换为 <div class="user-details"></div>

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

  1. div#foo.bar.baz

转换为 <div id="foo" class="bar baz"></div>

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

  1. #foo
  2. .bar

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

  1. `<div id="foo"></div><div class="bar"></div>`

标签文本

只需要简单的把内容放在标签之后：

  1. p wahoo!

它会被渲染为 &lt;p&gt;wahoo!&lt;/p&gt;.

很帅吧，但是大段的文本怎么办呢：

  1. p
  2.   | foo bar baz
  3.   | rawr rawr
  4.   | super cool
  5.   | go jade go

渲染为 &lt;p&gt;foo bar baz rawr…..&lt;/p&gt;

怎么和数据结合起来？ 所有类型的文本展示都可以和数据结合起来，如果我们把{ name: 'tj', email: 'tj@vision-media.ca' } 传给编译函数，下面是模板上的写法:

  1. #user #{name} &lt;#{email}&gt;

它会被渲染为 &lt;div id="user"&gt;tj &lt;tj@vision-media.ca&gt;&lt;/div&gt;

当就是要输出#{} 的时候怎么办? 转义一下!

  1. p \#{something}

它会输出&lt;p&gt;#{something}&lt;/p&gt;

同样可以使用非转义的变量!{html}, 下面的模板将直接输出一个script标签

  1. - var html = "<script></script>"
  2. | !{html}

内联标签同样可以使用文本块来包含文本：

  1. label
  2.   | Username:
  3.   input(name='user[name]')

或者直接使用标签文本:

  1. label Username:
  2.   input(name='user[name]')

只包含文本的标签，比如script, style, 和 textarea 不需要前缀| 字符, 比如:

  1.  html
  2.     head
  3.       title Example
  4.       script
  5.         if (foo) {
  6.           bar();
  7.         } else {
  8.           baz();
  9.         }

这里还有一种选择，可以使用'.' 来开始一段文本块，比如：

  1.  p.
  2.     foo asdf
  3.     asdf
  4.      asdfasdfaf
  5.      asdf
  6.     asd.

会被渲染为:

  1.  <p>foo asdf
  2.     asdf
  3.       asdfasdfaf
  4.       asdf
  5.     asd
  6.     .
  7.     </p>

这和带一个空格的 '.' 是不一样的, 带空格的会被Jade的解析器忽略，当作一个普通的文字:

  1. p .

渲染为:

  1. <p>.</p>

需要注意的是广西块需要两次转义。比如想要输出下面的文本：

  1. </p>foo\bar</p>

使用:

  1. p.
  2.   foo\\bar

注释

单行注释和JavaScript里是一样的，通过"//"来开始，并且必须单独一行：

  1. // just some paragraphs
  2. p foo
  3. p bar

渲染为：

  1. <!-- just some paragraphs -->
  2. <p>foo</p>
  3. <p>bar</p>

Jade 同样支持不输出的注释，加一个短横线就行了：

  1. //- will not output within markup
  2. p foo
  3. p bar

渲染为：

  1. <p>foo</p>
  2. <p>bar</p>

块注释

块注释也是支持的：

  1.  body
  2.     //
  3.       #content
  4.         h1 Example

渲染为：

  1. <body>
  2.   <!--
  3.   <div id="content">
  4.     <h1>Example</h1>
  5.   </div>
  6.   -->
  7. </body>

Jade 同样很好的支持了条件注释：

  1. body
  2.   //if IE
  3.     a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

渲染为：

内联

Jade 支持以自然的方式定义标签嵌套:

  1. ul
  2.   li.first
  3.     a(href='#') foo
  4.   li
  5.     a(href='#') bar
  6.   li.last
  7.     a(href='#') baz

块展开

块展开可以帮助你在一行内创建嵌套的标签，下面的例子和上面的是一样的：

  1.  ul
  2.     li.first: a(href='#') foo
  3.     li: a(href='#') bar
  4.     li.last: a(href='#') baz

属性

Jade 现在支持使用'(' 和 ')' 作为属性分隔符

  1. a(href='/login', title='View login page') Login

当一个值是 undefined 或者 null 属性不会被加上, 所以呢，它不会编译出 'something="null"'.

  1. div(something=null)

Boolean 属性也是支持的:

  1. input(type="checkbox", checked)

使用代码的Boolean 属性只有当属性为true时才会输出：

  1. input(type="checkbox", checked=someValue)

多行同样也是可用的：

  1. input(type='checkbox',
  2.   name='agreement',
  3.   checked)

多行的时候可以不加逗号：

  1. input(type='checkbox'
  2.   name='agreement'
  3.   checked)

加点空格，格式好看一点？同样支持

  1. input(
  2.   type='checkbox'
  3.   name='agreement'
  4.   checked)

冒号也是支持的:

  1. rss(xmlns:atom="atom")

假如我有一个user 对象 { id: 12, name: 'tobi' } 我们希望创建一个指向"/user/12"的链接 href, 我们可以使用普通的javascript字符串连接，如下:

  1. a(href='/user/' + user.id)= user.name

或者我们使用jade的修改方式,这个我想很多使用Ruby或者 CoffeeScript的人会看起来像普通的js..:

a(href='/user/#{user.id}')= user.name

class属性是一个特殊的属性，你可以直接传递一个数组，比如bodyClasses = ['user', 'authenticated'] :

  1. body(class=bodyClasses)

HTML

内联的html是可以的，我们可以使用管道定义一段文本 :

  1. html
  2.   body
  3.     | <h1>Title</h1>
  4.     | <p>foo bar baz</p>

或者我们可以使用. 来告诉Jade我们需要一段文本：

  1. html
  2.   body.
  3.     <h1>Title</h1>
  4.     <p>foo bar baz</p>

上面的两个例子都会渲染成相同的结果：

  1. <html><body><h1>Title</h1>
  2. <p>foo bar baz</p>
  3. </body></html>

这条规则适应于在jade里的任何文本：

  1. html
  2.   body
  3.     h1 User <em>#{name}</em>

Doctypes

添加文档类型只需要简单的使用 !!!, 或者 doctype 跟上下面的可选项:

  1. !!!

会渲染出 transitional 文档类型, 或者:

  1. !!! 5

or

  1. !!! html

or

  1. doctype html

doctypes 是大小写不敏感的, 所以下面两个是一样的:

  1. doctype Basic
  2. doctype basic

当然也是可以直接传递一段文档类型的文本：

  1. doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN

渲染后:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN>

会输出 html 5 文档类型. 下面的默认的文档类型，可以很简单的扩展：

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

通过下面的代码可以很简单的改变默认的文档类型：

  1.  jade.doctypes.default = 'whatever you want';