文章目录
  1. 1. 内联和块展开
  2. 2. attributes
  3. 3. #Boolean
    1. 3.1. class attributes
    2. 3.2. Class & ID
  4. 4. case
  5. 5. code
    1. 5.1. Unbuffered Code
    2. 5.2. Buffered Code
    3. 5.3. Unescaped Buffered Code
  6. 6. comments
    1. 6.1. 单行注释
    2. 6.2. 不输出的注释
    3. 6.3. 块注释
    4. 6.4. 条件注释
  7. 7. conditions
  8. 8. doctype
  9. 9. extends
  10. 10. filters
  11. 11. includes
    1. 11.1. including Plain Text
    2. 11.2. including Filered Text
  12. 12. iteration
    1. 12.1. each
    2. 12.2. while
  13. 13. mixins
  14. 14. plain text
    1. 14.1. Piped Text
    2. 14.2. Inline in a Tag
    3. 14.3. Block in a Tag
  15. 15. 参考

之前简单介绍了Jade,并给出了一些小例子,下面就详细的介绍一下Jade的语法规则.我们主要通过给出实际例子的形式介绍。

内联和块展开

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

attributes

Jade:

a(class='button', href='google.com') Google

html:

<a href="google.com" class="button">Google</a>

#Boolean

使用代码的 Boolean 属性只有当属性为 true 时才会输出;不指定值的时候默认是true;

Jade:

input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())

html:

<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox" checked="true"/>

如果doctype是html,jade不会映射属性和使用简单风格(被所有浏览器理解)。

Jade:

doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')

html:

<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">

class attributes

Jade:

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])

html:

<a class="foo bar baz"></a>
<a class="bing foo bar baz bing"></a>

Class & ID

Jade:

a.button
.content
a#main-link

html:

<a class="button"></a
<div class="content"></d>
<a id="main-link"></

case

jade:

- var name = "Bob"
case name
when "Bob"
    p Hi Bob!
when "Alice"
    p Howdy Alice!
default
    p Hello #{name}!

html:

<p>Hi Bob!</p>

code

可以在jade中使用内联js代码。

Unbuffered Code

-开头, 这是不会被输出的。

Jade:

- for (var x = 0; x < 3; x++)
  li item

html:

<li>item</li>
<li>item</li>
<li>item</li>

Buffered Code

我们要 转义 输出的代码,比如我们返回一个值,只要前缀一个 =:

Jade:

p
  = 'This code is <escaped>!'

html:

<p>This code is &lt;escaped&gt;!</p>

Unescaped Buffered Code

如果想直接输出不转义的值可以使用 !=:

Jade:

p
  != 'This code is <strong>not</strong> escaped!'

html:

<p>This code is <strong>not</strong> escaped!
</p>

comments

单行注释

和 JavaScript 里是一样的,通过 // 来开始,并且必须单独一行:

Jade:

// just some paragraphs
p foo
p bar

html:

<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>

不输出的注释

加一个短横线就行了:

Jade:

//- will not output within markup
p foo
p bar

html:

<p>foo</p>
<p>bar</p>

块注释

Jade:

body
  //
    #content
      h1 Example

html:

<body>
  <!--
  <div id="content">
    <h1>Example</h1>
  </div>
  -->
</body>

条件注释

Jade:

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

html:

<body>
  <!--[if IE]>
    <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>
  <![endif]-->
</body>

conditions

Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号,这样会看上去对设计师更友好一点, 同时要在心里记住这个表达式渲染出的是 常规 JavaScript:

for user in users
  if user.role == 'admin'
    p #{user.name} is an admin
  else
    p= user.name

和下面的使用了常规 JavaScript 的代码是相等的:

for user in users
  - if (user.role == 'admin')
    p #{user.name} is an admin
  - else
    p= user.name

Jade 同时支持 unless, 这和 if (!(expr)) 是等价的:

for user in users
  unless user.isAnonymous
    p
      | Click to view
      a(href='/users/' + user.id)= user.name     

=>

<p>Click to view<a href="/users/user.id">user.name</a></p>

doctype

Jade:

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

html:

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

extends

Jade允许使用extends关键字实现模板继承,可以重载在父模板中预定义的块。

layout.Jade:

doctype html
html
  head
    block title
      title Default title
  body
    block content    

index.jade:

extends ./layout.jade

block title
  title Article Title

block content
  h1 My Article    

index.html:

<!doctype html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>

filters

过滤器允许其他语言在Jade 模板中使用

Jade:

:markdown
  # Markdown

  I often like including markdown documents.
script
  :coffee
    console.log 'This is coffee script'

html:

<h1>Markdown</h1>
<p>I often like including markdown documents.</p>
<script>console.log('This is coffee script')</script>

includes

includes允许将一份jade文档中的内容插入到另一份。

index.jade:

doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

head.jade:

head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

footer.jade:

#footer
  p Copyright (c) foobar

index.html:

<!doctype html>
<html>
  <head>
    <title>My Site</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

including Plain Text

index.jade:

//- index.jade
doctype html
html
  head
    style
      include style.css
  body
    h1 My Site
    p Welcome to my super lame site.
    script
      include script.js

style.css:

/* style.css */
h1 { color: red; }

script.js:

// script.js
console.log('You are awesome');

index.html:

<!doctype html>
<html>
  <head>
    <style>
      /* style.css */
      h1 { color: red; }
    </style>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <script>
      // script.js
      console.log('You are awesome');
    </script>
  </body>
</html>

including Filered Text

index.jade:

doctype html
html
  head
    title An Article
  body
    include:markdown article.md

article.md:

# article.md

This is an article written in markdown.

index.html:

<!doctype html>
<html>
  <head>
    <title>An Article</title>
  </head>
  <body>
    <h1>article.md</h1>
    <p>This is an article written in markdown.</p>
  </body>
</html>

iteration

each

Jade:

ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val

html:

<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>

while

Jade:

- var n = 0
ul
  while n < 4
    li= n++

html:

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

mixins

Mixins允许我们创建可复用的代码块,类似于LESS.js中mixins。

Jade:

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

html:

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

plain text

三种方式获取纯文本。

Piped Text

前缀 “|”:

Jade:

| Plain text can include <strong>html</strong>
p
  | It must always be on its own line

html:

Plain text can include <strong>html</strong>
<p>It must always be on its own line</p>

Inline in a Tag

Jade:

p Plain text can include <strong>html</strong>

html:

<p>Plain text can include <strong>html</strong></p>

Block in a Tag

tag末尾加一个“.”,适合大块文本

Jade:

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')

html:

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>

参考

  1. http://naltatis.github.io/jade-syntax-docs/#mixin
  2. https://github.com/visionmedia/jade/blob/master/Readme_zh-cn.md#a18
  3. http://jade-lang.com/reference/attributes/
文章目录
  1. 1. 内联和块展开
  2. 2. attributes
  3. 3. #Boolean
    1. 3.1. class attributes
    2. 3.2. Class & ID
  4. 4. case
  5. 5. code
    1. 5.1. Unbuffered Code
    2. 5.2. Buffered Code
    3. 5.3. Unescaped Buffered Code
  6. 6. comments
    1. 6.1. 单行注释
    2. 6.2. 不输出的注释
    3. 6.3. 块注释
    4. 6.4. 条件注释
  7. 7. conditions
  8. 8. doctype
  9. 9. extends
  10. 10. filters
  11. 11. includes
    1. 11.1. including Plain Text
    2. 11.2. including Filered Text
  12. 12. iteration
    1. 12.1. each
    2. 12.2. while
  13. 13. mixins
  14. 14. plain text
    1. 14.1. Piped Text
    2. 14.2. Inline in a Tag
    3. 14.3. Block in a Tag
  15. 15. 参考