jade模板引擎mixins
2017-08-28 本文已影响94人
大乔是个美少女
mixins基本用法：
mixin demo
p this is a demo
//- 调用方法
+demo
<p>this is a demo</p>
带有参数的mixins方法：
mixin info(name, skills)
p my name is #{name}
ul.skill-box
li #{skill}
+info('sqrtthree', ['html', 'css', 'javascript', 'nodejs'])
<p>my name is sqrtthree</p>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>nodejs</li>
</ul>
带有不定参的mixin方法：
mixin info(calssName, ...skills)
ul(class='#{className}')
each skill in skills
li #{skill}
+info('list', 'html', 'css', 'javascript', 'nodejs')
<ul class='list'>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>nodejs</li>
属性传递的mixin方法：
mixin attr(text)
p(class=attributes.class) #{text}
+attr('text')(class='tips')
<p class='tips'>text</p>
Jade模板block
block demo
p this is a demo
block demo
block demo
block demo
<p>this is a demo.</p>
<p>this is a demo.</p>
<p>this is a demo.</p>
<p>this is a demo.</p>
调用其他文件中的mixin模块：
doctype html
html
head
title this is a demo.
body
h1 demo.
block cont
extends layout // 这里的 layout 指的是需要继承的模板文件
block cont
h2 Look, this is a demo.
p this is a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>this is a demo.</title>
</head>
<body>
<h1>demo.</h1>
<h2>Look, this is a demo.</h2>
<p>this is a paragraph.</p>
</body>
</html>
或者使用includes
div#footer
p copyright.
doctype html
html
head
title this is a demo.
body
h1 Hello, World.
include footer
<!DOCTYPE html>
<html>
<head>
<title>this is a demo.</title>
</head>
<body>
<h1>Hello, World.</h1>
<div id="footer">
<p>copyright.</p>
</div>
</body>
</html>
