jade模板引擎（二）

jade模板引擎（二）

1.条件语句

jade允许我们不写圆括号（），渲染出常规的JavaScript

一个简单地例子：

- var user = 'miaomiao'
		if user == 'miaomiao'
			p #{user} welcome!
		else
			p= user
				- var user = 'miaomia'
		//现在修改判断user相等的值
		if user == 'miaomia'
			p #{user} welcome!
		else
			p= user

效果如下：

2.jade模板继承

jade通过block和extends来实现模板继承

先说extends

举个例子

先编写一个layout.jade文件

doctype
html
	head
		- var title = 'extend'
		meta(charset="utf-8")
		title #{title}
	body
		block content
		h1 #{title}

接下来利用extends继承layout.jade文件

编写index.jade文件

extends ./layout.jade

效果如下

接下来我们修改一下index的代码

extends ./layout.jade
block content
	h1  jade通过block和extends实现模板继承

效果变成这样

我们可以清楚的看到在index文件中重写了content块，发现把父类继承的完全覆盖了

我们也可以定义script块

block script

script(src='/javascripts/jquery.js')

结果是在当前文件中引用了jQuery文件

3.jade包含

include用法

3.1包含文件

include ./includes/head.jade
include ./includes/foot.jade
include style.css
include script.js

3.2也可包含块内容

include head

3.3引用变量

include user

4.mixins

mixins允许我们写可以重复多次利用的块

可以不带参数

mixin list
  ul
    li apple
    li banana
    li straberry
+list
+list

也可以带参数

mixin list(fruit)
  p please give me two #{fruit} !thank u!
+list('appple')
+list('ipad')