Jade

Posted by liveipool on February 19, 2017

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中不要添加进这种逻辑代码,因此也没有用过,这一部分了解一下就好。