HTML模板引擎：Jade
最近在项目开发中，除了尝试使用GraphQL搭建后端服务接口，还应用到了jade模板引擎，一种更加高性能简洁易懂的模板引擎。良好的代码组织（变量、函数、引用）、较少的代码是吸引我的两个优势。
Jade是什么？
Jade是一款高性能简洁易懂的模板引擎，是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。
安装
npm install -g jade用法
Harp 的 Asset Pipeline 用起来相当简单。所有的预编译都是静默完成，不需要任何设置。只要将你的文件命名成 .jade 后缀，而不是 .html，Harp 网页服务器会把它当作一个 .html 文件。
基本规则
缩进代表嵌套
每行以第一个空格为“分割符”之前的字符串（这部分暂称为 “tag-string”）编译为一个 html tag（以下简称 tag ），此空格之后的所有字符都原封不动的装进这个 tag 里
使用css里的 .class 和 #id 的语法，直接用这两种语法开头的话可以省略 div
html attribute 可以写在括号“()”里跟在 tag-string 后面，此时括号内的空格不会被前述的第二条规则计算为“分割符”
| 处在行首，表示该行不做编译处理
基本语法
行结束标志：
缩进代表嵌套
标签：标签就是一个简单的单词
html渲染为：
<html></html>标签ID、类：采用跟css语法类似的方式
div#container content //ID
.container content //类
span#container.inner content渲染为：
<div id="container">content</div>
<div class="container">content</div>
<span id="container" class="inner">content</span>标签文本：只需要简单的把内容放在标签之后
单行注释：单行注释和JavaScript里是一样的，通过"//"来开始，并且必须单独一行；不输出的注释，加一个短横线就行了：
// just some paragraphs
p foo
p bar渲染为：
// just some paragraphs
p foo
p bar
块注释：
body
//
#content
h1 Example渲染为：
<body>
<!--
<div id="content">
<h1>Example</h1>
</div>
-->
</body>
属性：使用'(' 和 ')' 作为属性分隔符
img(src="#{assets}images/logo.png",alt="logo")渲染为：
<img src="/static/assets/images/logo.png" alt="logo">Case
定义变量，并根据变量值进行条件渲染。
html
body
- 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>
<body>
<p>you have 10 friends</p>
</body>
</html>循环
尽管已经支持 JavaScript 原生代码，Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是each, 这种形式：
html
body
- var items = ["one", "two", "three"]
ul
each item in items
li= item渲染为：
<html>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
条件语句
Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的，然后它允许你不使用圆括号，这样会看上去对设计师更友好一点，同时要在心里记住这个表达式渲染出的是常规 JavaScript：
for user in users
if user.role == 'admin'
p #{user.name} is an admin
else
p= user.name模板继承
Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。
Jade 块如果没有内容，Jade 会添加默认内容，下面的代码默认会输出 block scripts, block content, 和 block foot。
首先新建一个布局文件：layout.jade
//- layout.jade
doctype html
html(ng-app="webApp")
head
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
title Blockcloud
link(rel='stylesheet', href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700')
body
block content下面是继承layout来进行通用错误提示页：
extends layout
block content
h1= message
h2= error.status
pre #{error.stack}
包含
includes 允许静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, 常见的例子是包含头部和页脚。
include include/config.jade
doctype html
html
head
title Home
include include/head.jade
body.home
.wrapper.center.has_slider
include include/header.jade
.main
include include/footer.jadeinclude/config.jade：对应为路径和文件
- const style_name = "default";
- const assets = "/static/assets/";
- const images = "/static/assets/images/manager/"include/head.jade：页头对应路径和文件
link(rel="profile", href="http://www.tip.center")
link(rel="stylesheet", type="text/css", media="all", href="#{assets}css/jquery-ui.css")
link(rel="stylesheet", type="text/css", media="all", href="#{assets}css/service.css")
script(src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js")
script(src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js")
script(type="text/javascript", src="#{assets}js/common.js")
meta(name="viewport", content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0")
过滤器
支持markdown。必须是安装了 markdown-js 或者 node-discount 。
#安装markdown-js
npm install -g markdown-js
#或者安装node-discount
npm install -g node-discount
例如：
:markdown
### Hello Markdown!渲染后：
<h3>Hello Markdown!</h3>