Jade / pug

Jade是一个高性能的能简化HTML编程的模板语言。 Jade是被haml影响而出现，最开始它是用node.js写的，现在它也被多个语言实现：Node, Python, Scala, Ruby, Java, and PHP. 它以前叫Jade，现在改名为pug了，不过感觉还是Jade这个名字出现得多一点，文件名后缀也是.jade。也多次在项目中用到jade了，这里再把教程看一遍总结一下。

Jade的特点

语法简洁
简单易学
模板继承
客户端支持
灵活的缩进
Mixin
在内存中缓存(可选)
迭代、枚举、条件语句等

mixin

可以在Jade中定义“复用块”，以增强代码的复用性，及便于代码的维护。“复用块”用关键字“mixin”定义，用“+”调用。

mixin showName
	div CYF
+showName
+showName

<div>CYF</div>
<div>CYF</div>

可将“复用块”理解为“函数”（function），它可接收“参数”（param），使“复用块”更具灵活性。

mixin showName(name)
	div= name
+showName('CYF')
+showName('Cao Yongfeng')

<div>CYF</div>
<div>Cao Yongfeng</div>

“复用块”还可接收一个“块”（block）参数，即一组Jade语句，只需将这组Jade语句以“缩进”的形式写在“mixin”下面即可。

mixin showName(name)
	div= name
	if block
		block
+showName('CYF')
	div Welcome to my blog

<div>CYF</div>
<div>Welcome to my blog</div>

注释

jade的注释是 // 和 //- 都可以，都能嵌套注释。

解析纯文本

<div>
	<a href="http://google.com">Google</a>
	If you think you can, you can.
</div>

若想实现上面这样的代码，有一排为纯文本，在Jade中需要用一个竖线 ‘|’ 来标识。

div
	a(href="http://google.com") Google
	| If you think you can, you can.

模板继承

Jade支持继承，即一个Jade模板继承自另一个Jade模板：

//- layout.jade
doctype html
html
	head
		title this is Title
		block script
	body
		block content
		
//- index.jade
extends layout.jade

block script
	script(type="text/javascript", src="/js/jquery.js")

block content
	div This is content

<!doctype html>
<html>
<head>
<title>this is Title</title>
<script type="text/javascript" src="/js/jquery.js"></script>
</head>
<body>
<div>This is content</div>
</body>
</html>

逻辑代码

Jade支持嵌入Javascript代码。注意，这里指的不是运行于浏览器端的Javascript，而是指运行于Server端的Javascript。如：

- for(var i = 0; i < 3; i++)
	div This is div element

<div>This is div element</div>
<div>This is div element</div>
<div>This is div element</div>

-
	var n = 3;
	for(var i = 0; i < n; i++)
		div This is div element

<div>This is div element</div>
<div>This is div element</div>
<div>This is div element</div>

变量赋值：

- var foo = "bar"
p= foo

<p>bar</p>

迭代（Python的语法）：

for item, i in ['foo', 'bar', 'baz']
	li= item
	li= i

<li>foo</li>
<li>0</li>
<li>bar</li>
<li>1</li>
<li>baz</li>
<li>2</li>

条件语句：

- var language = "Jade"
if language == "Jade"
	p Awesome
else
	p Not awesome
	
<p>Awesome</p>

各人觉得这一部分功能实用，而且在jade中添加进了逻辑代码，我还是习惯在html和jade中不要添加进这种逻辑代码，因此也没有用过，这一部分了解一下就好。