jade模板引擎（二）

野性酷女 2022-08-18 02:04 206阅读 0赞

# ``  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

效果如下：

![Center][]

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

效果如下

![Center 1][]

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

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

效果变成这样

![Center 2][]

我们可以清楚的看到在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

![Center 3][]

也可以带参数

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

![Center 4][]

[Center]: /images/20220731/697a875c44ff4f5081ea59341a425c37.png
[Center 1]: /images/20220731/b973ab0f619e4c94807f5c830b74dd86.png
[Center 2]: /images/20220731/0c574c8941a94185bf54a4cd78329b12.png
[Center 3]: /images/20220731/ae42e8d68619424a95e6d62a6eb4e689.png
[Center 4]: /images/20220731/b425521f4bab4dcbb55374a86c52950c.png