简介
jade 是一种提供类似于 zen coding
语法的模板系统，它提供简洁的语法，然后渲染出各式各样的 HTML。除了类zen coding 语法外，还提供流程控制的 if 和
for（each）、模板继承、过滤器、模板引入以及 mixin 等功能。
本文就以简要介绍的方式给读者介绍一下 jade
的基本功能，让读者感受一下这款模板语言的设计思想以及概要情况，并且可以自己尝试编写一些模板。同时，本文还将介绍渲染jade 的工具，因为 jade
最初是由 Node.js 开发支持的，所以最好的原生语言是 Node.js，所以本文为了方便，也将使用Node.js
编写的工具进行渲染。但是，不仅仅只有 Node.js 支持渲染 jade，我知道的至少还有 python 也是有库可以渲染 jade
的，这个将会在其他文章中提到。
Jade 语法
因为 jade 是用来编写 HTML 的，而 HTML
的主要特点就是标签，然后标签的常用属性有：id、class、style。所以，我们先来看看在 jade 中，如何来编写这些标签：
简单标签
一个最简单的标签：
a
渲染之后是：
<a></a>
标签带 id
在编写 css 的时候，id选择器我们使用一个 "#" 再加 id 来选择，在 jade 中，我们也可以这么写：
a#main-link
渲染之后就是：
<a id="main-link"></a>
标签带 class
和 id 一样，在 css 中 class 我们都是用一个 "." 再加 class 来选择，那么 jade 中，我们要这么玩：
a.button
渲染一下：
<a class="button"></a>
不带标签的标签
因为在 HTML 中，div 的出场率实在太高了，所以 jade 就将它作为默认标签了，如果你直接写一个 id/class 的话，那么 jade
就将以 div 补全，例如：
.button
渲染之后：
<div class="button"></div>
其他属性
对于非常用的属性，我们可以直接以键值对的方式指定。
div#foo(data-bar="foo")
渲染之后：
<div data-bar="foo"></div>
条件判断
简写 HTML 只是 jade 提供功能的冰山一角，在 jade 中还提供了几种条件语句，可以做一些判断。
if/else
if/else 在编程语言中几乎都有，所以 jade 作为一个模板语言，也少不了，使用也很简单，直接判断即可，例如这段：
#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
如果 user 是 user = { description: 'foo bar baz' } 这样的，那么判断的结果就是：
#user
h2 Description
p.description= user.description
那渲染出来就是：
<div id="user">
<h2>Description</h2>
<p class="description">foo bar baz</p>
</div>
unless
如果是只有一个判断 "非" 的条件语句，那么在 jade 中可以直接使用 unless，类似：
unless user.isAnonymous
p You're logged in as #{user.name}
其实就是：
if !user.isAnonymous
p You're logged in as #{user.name}
case
对于多条件判断，在程序语言中，我们经常可以用 swich/case 来判断，在 jade 中，我们也支持类似的语法，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
渲染之后的结果就是：
<p>you have 10 friends</p>
模板继承
继承是高级模板应该具有的功能，使用继承，我们可以共用相同的模板结构，减少冗余开发。和很多模板语言（例如 jinja）一样，jade 的模板继承也是和
block 关键词关联的，block 在非继承情况下等同于不存在，例如这段：
//- layout.jade
doctype html
html
head
block title
title Default title
body
block content
渲染出来是：
<!doctype html>
<html>
<head>
<title>Default title</title>
</head>
<body>
</body>
</html>
然后使用继承的话，就会替换对应 block 中的内容，需要说明的是，不需要替换所有的 block，选取需要的 block 替换即可。
//- index.jade
extends ./layout.jade
block title
title Article Title
block content
h1 My Article
渲染结果就是：
<!doctype html>
<html>
<head>
<title>Article Title</title>
</head>
<body>
<h1>My Article</h1>
</body>
</html>
模板引入
和 模板继承 类似的就是 模板引入 了，继承 顾名思义就是承接 父模板 的内容，然后根据自己需要修改，但是 引入 的话就是在自身加入引入模板的内容，引入的内容是什么就是什么，不能修改，下面举个例子：
文件： index.jade
doctype html
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
文件：includes/head.jade
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
文件：includes/foot.jade
#footer
p Copyright (c) foobar
渲染结果为：
<!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>
过滤器
在 jade 中，不仅仅支持简写的 HTML，还支持使用过滤器来使用其他语言/工具，例如 Markdown，Coffee
script，只需要在对应的代码之前加上 ":" + 过滤器 名称即可，例如：
:markdown
# Markdown
I often like including markdown documents.
script
:coffee-script
console.log 'This is coffee script'
渲染之后：
<h1>Markdown</h1>
<p>I often like including markdown documents.</p>
<script>console.log('This is coffee script')</script>
迭代器
在模板中，肯定少不了循环迭代，所以 jade 也是支持的，使用起来也很简单，支持的关键字有 each、for 和 while 三种：
each
ul
each val in [1, 2, 3, 4, 5]
li= val
渲染一下：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
while
- var n = 0
ul
while n < 4
li= n++
渲染一下：
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
for
- for (var x = 0; x < 3; x++)
li item
渲染一下：
<li>item</li>
<li>item</li>
<li>item</li>
结语
以上就是 jade 的概要介绍了，我认为已经介绍完了 jade 的主要功能，并且可以帮助编写和修改一些jade
模板了。如果你觉得不够的话，可以在最后的参考资料中找到 jade 的官网进行更多学习。