先来看一下例子

jade.jade

doctype html
html(lang="en")
  head
    - var name = 'Jade'
    title= name
    meta(charset="utf-8")
    link(rel="stylesheet", type="text/css" href="/stylesheets/style.css")

  body
    h1 Jade - node template engine
    #container.col
      if name === 'Jade'
        p #{name} is very cool
      else
        p Get on Jade
    footer
      p.
        Jade is a terse and simplae
        templating language with a
        strong focus on performance
        and powerful features.

jade.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Jade</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
  <h1>Jade - node template engine</h1>
  <div id="container" class="col">
    <p>Jade is very cool</p>
  </div>
  <footer>
    <p>
      Jade is a terse and simplae
      templating language with a
      strong focus on performance
      and powerful features.
    </p>
  </footer>
</body>
</html>

install

npm install -g jade

jade, 以空格或缩进和换行来组织代码,每行开始的第一个单词被定义为一个 tag

Tags

默认,每行开始的第一个单词代表一个标签,可以是自定义的标签:

jade:

h1 h1 tag
custom custom tag
img(src="/images/logo.png", alt="")

html:

<h1>h1 tag</h1>
<custom>custom tag</custom><img src="/images/logo.png" alt="">

使用缩进能进行标签嵌套:

jade:

ul
  li Item A
    a(href="javascript:;") a link
  li Item B
  li Item C

html:

<ul>
  <li>Item A<a href="javascript:;">a link</a></li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

doctype

jade, 中统一用 doctype 前缀,然后后边跟关键字进行区分使用的文档类型;

  • html5

    jade:doctype html

    html: <!DOCTYPE html>

  • xml

    jade:doctype xml

    html: <?xml version="1.0" encoding="utf-8" ?>

  • strict

    jade:doctype strict

    html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • frameset

    jade:doctype frameset

    html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  • 1.1

    jade:doctype 1.1

    html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  • basic

    jade:doctype basic

    html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

  • mobile

    jade:doctype mobile

    html: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

  • 也可以用自定义的

    jade:doctype blog.jayself.com

    html: <!DOCTYPE blog.jayself.com>

Attributes

属性必须用括号包起来,多个属性用逗号分隔,classid,可以直接用 (.) 和 (#) 而不需要放到括号内;

jade:

div.container.flow#container Content
a(class="btn", href="javascript:;", title="submit") Button

html:

<div id="container" class="container flow">Content</div><a href="javascript:;" title="submit" class="btn">Button</a>

对于 classid, 还可以省略 tag 而直接用,最终会自动生成一个 div:

jade:

.content content
#content.content.box content

html:

<div class="content">content</div>
<div id="content" class="content box">content</div>

Plain Text

根据不同的情况,jade 提供了三种方式获取纯文本

  • 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

    方式二,文本与 tag 放到同一行

    jade:

      .content content
      #content.content.box content
    

    html:

      <div class="content">content</div>
      <div id="content" class="content box">content</div>
    
  • Block in a Tag

    方式三,适合有大量文本的情况;在 tag 后使用一个点号 (.), tag 与 点号之间不能有空格

    jade:

      p.
        Jade is a terse and simplae
        templating language with a
        strong focus on performance
        and powerful features.
    

    html:

      <p>
        Jade is a terse and simplae
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    

case

case, 类似于 javascript 中的 switch,可用于在多个代码块中显示 casewhen 匹配的代码块

语法如下:

case condition
  when state1
    code 1
  when state2
    code 2
  when staten
    code n
  default
    code default

例:

jade:

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

html:

<p>you have 10 friends</p>
  • Case Fall Through

    我们也可以多个 when, 执行一个代码块

    jade:

      - var friends = 1
      case friends
        when 0
        when 1
          p you have very few friends
        default
          p you have #{friends} friends
    

    html:

      <p>you have very few friends</p>
    
  • Block Expansion

    我们还可以将 when加上冒号(:),与代码块放到一行;

    jade:

      - var friends = 1
      case friends
        when 0: p you have no friends
        when 1: p you have a friend
        default: p you have #{friends} friends
    

    html:

      <p>you have a friends</p>
    

code

jade, 支持三种类型的 code

  • Unbuffered Code

    这种类型的 code 以一个中横线 (-) 开头,不会直接输出

    jade:

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

    html:

      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    
  • Buffered Code

    此类型的 code 以一个等号 (=) 开头;为了安全, jade 会将 html 代码进行转义;

    jade:

      p
        = 'This code is <escaped>!'
    

    html:

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

    当然,我们也可以把 =及后面的文本与 tag 放在同一行

    jade:

      p= 'This code is' + ' <escaped>!'
    

    html:

      <p>This code is &lt;escaped&gt;!</p>
    
  • Unescaped Buffered Code

    此类型的 code 以一个叹号加一个等号 (!=) 开头,而且 jade 不会转义 html 代码;如果是变量,可以写成 !{var}作用于#{val},只是不转义;

    jade:

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

    html:

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

    jade:

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

    html:

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

comments

jade 使用双斜线 (//)进行单行注释;如果不想让注释的内容显示到生成的 html 代码中,可以在双斜线 (//)后跟一个单横线(-);

例:

jade:

//just some paragraphs
p foo
p bar

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

html:

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

<p>foo</p>
<p>bar</p>
  • Block Comments

    双斜线 (//)后面的注释内容换行并缩进可进行块级注释;

    例:

    jade:

      body
        //
          As much text as you want
          can go here.
    

    html:

      <body>
        <!--
        As much text as you want
        can go here.
        -->
      </body>
    
  • Conditional Comments

    条件注释,只有在 IE10,及以下的 IE浏览器才支持,jade中的条件注释没有特别的语法,而是直接采用一般的 html 条件注释

    例:

    jade:

      <!--[if IE 8]>
      <html lang="en" class="lt-ie9">
      <![endif]-->
      <!--[if gt IE 8]><!-->
      <html lang="en">
      <!--<![endif]-->
    

    html:

      <!--[if IE 8]>
      <html lang="en" class="lt-ie9">
      <![endif]-->
      <!--[if gt IE 8]><!-->
      <html lang="en">
      <!--<![endif]-->
    

conditionals

条件语句,其实也就跟普通 javascript 一样,不过在 jade 中,我们可以省略括号;

要注意,在 jade 中,使用 var 定义变量时,一定要在 var 前,加一个中横线(-),不然的话,var 会被解析成一个 <var> 标签;

例:

jade:

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2 Description
    p.description= user.description
  else if authorised
    h2 Description
    p.description.
      User has no description,
      why not add one...
  else
    h1 Description
    p.description User has no description

html:

<div id="user">
  <h2>Description</h2>
  <p class="description">foo bar baz</p>
</div>

jdade, 还提供了一个表否定的语法 unless, 作用跟 if !expr 是等价的;

下面两是等价的:

unless user.isAnonymous
  p Your're logged in as #{user.name}

等价于:

if !user.isAnonymous
  p You're logged in as #{user.name}

extends

Extedns - Template Inheritance

jade,允许使用 extedns 关键字结合 block 关键字预定义一个模板文件给其他子模板调用,来实现模板之间的继承;

如果父模板里面定义了某块内容,而子模板中没有定义,那默认就会显示父模板的块内容;这样我们就可以把一些公共的东西定义到一个父模板中,然后子模板直接调用,来达到高效输出;

模板还可以多重继承哟,写更少的代码,做更多的事;嘿嘿

同一个页面,只能 extends 一个模板;多个模块可以使用 include

例:

laytout.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 支持的过滤器有如下几种:

例:

jade:

:markdown
  #Markdown

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

html:

<h1>Markdown</h1>

<p>I often like including markdown documents.</p>
<script>(function() {


}).call(this);

  <console class="log">'This is coffe script'</console>
</script>

includes

inclues 允许我们可以插入另一个 jade 文件到当前的 jdade 文件中;

例:

index.jade

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

includes/header.jade

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

includes/footer.jade

#footer
  p Copyright (c) Reg.Jay
//- 怎么让 &copy; 转义字符生效呢?
  • Including Plain Text

    includejade 文件,比如 cssjs以及纯文本文件等,一定要记得把文件的后缀名加上咯;

例:

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

h1 { color: red; }

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 Filtered Text

    还可以 include 过滤器,语法是 include:FilterName FilterFile.FilterType

例:

index.jade

doctype html
html
  head
    title An Article
  body
    include:markdown 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

jade支持两种主要的迭代方法, eachwhile,当然如果个人喜欢也可以使用 for,因为 jade 是支持 javascript 原生代码的。很强大的吧。嘿嘿。

  • each

    推荐使用 each, 因为它更容易迭代一个数组和对象;

    语法:each val, [key] in obj

    例:

    jade:

      ul
        each val in [1, 2, 3, 4, 5]
          li= val
    

    html:

      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    

    注意啦,这里要在标签中使用变量,必须使用等号 (=),如果要混合使用变量和字符串,那应该把变量放到 #{} 中,并且不能使用等号,如#{val}

    例2:同时获取索引和值:

    jade:

      ul
        each val, index in ['zero', 'one', 'two']
          li= index + ': ' + val
    

    html:

      <ul>
        <li>0: zero</li>
        <li>1: one</li>
        <li>2: two</li>
      </ul>
    

    例3:还可以用来迭代一个对象的 key

    jade:

      ul
        each val, index in {'one': 'one','two': 'world','three': 'one', 'four': 'dream'}
          li= index + ': ' + val
    

    html:

      <ul>
        <li>one: one</li>
        <li>two: world</li>
        <li>three: one</li>
        <li>four: dream</li>
      </ul>
    
  • while

    用法跟 javascript 一样

    例:

    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

使用 mixin 可以创建可重用的代码块;

语法:minxin mixinName,调用的时候直接+mixinName

例:

jade:

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list

html:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

在使用的时候,还可以给mixin定义参数,当作一个函数来使用;

例:

jade:

mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

html:

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

Mixin Blocks

mixin 也可以使用像 include 那样的块

例:

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>
  • Mixin Attributes

例:

jade:

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

html:

<a href="/foo" class="btn">foo</a>