标签

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

    它会被转换为

    标签也是可以有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-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.

    会被渲染为:

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

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

    1. 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 现在支持使用'(' 和 ')' 作为属性分隔符

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

      1. div(something=null)

      Boolean 属性也是支持的:

      1. input(type="checkbox", 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>

      添加文档类型只需要简单的使用 !!!, 或者 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.     };