doctype html head meta(charset='utf-8') title my resume style. body{background-color:#ABFDBA} script. var name = 'scoot' body - var jade = {source:'jade',level:'high'} h2 a frondend enginner #{jade.level} p | Alice | Tom | Hairen a(href='www.baidu.com') baidu .skills haha div.program lalla ul#fruit.fruit li aaa li bbb div: a hahhah
<!DOCTYPE html > <head> <metacharset="utf-8"/> <title>my resume </title> <style>body{background-color:#ABFDBA}</style> <script>var name = 'scoot'</script> </head> <body> <h2>a frondend enginner high</h2> <p> Alice Tom Hairen <ahref="www.baidu.com">baidu </a> </p> <divclass="skills"> haha</div> <divclass="program"> lalla</div> <ulclass="friuts"id="fruit"> <li>aaa</li> <li>bbb</li> </ul> <div><a>hahhah </a></div> </body>
符号
符号
含义
.
表示之后的内容翻译为纯文本
:
表示嵌套关系,不需要换行
|
表示之后的内容翻译为纯文本,不识别HTML标签
//
注释,在编译出来的html中显示
//-
注释,在编译出来的html中不显示
| 后接 js 代码 #{变量} | 转义插值 !{变量} | 非转义插值
逻辑操作
1 2 3 4 5 6 7 8 9 10 11 12
- var list = ['one', 'two','three'] - for (k in list) p= list[k] if list if (list.length > 2) p lists more than two else if (list.length >= 1) p two lists or one list else p no list else p no list
输出
1 2 3 4
<p>one</p> <p>two</p> <p>three</p> <p>lists more than two </p>
Mixin
minix可以理解为就是在定义一个函数,然后用+来调用函数,函数可以进行嵌套。
1 2 3 4 5 6 7
mixin student(name,course) p #{name} studing #{course} mixin group(obj) h2 my name is #{obj.name} +student(obj.name,obj.course) h1 +group({name:'tom',course:'jade'})
输出:
1 2 3 4
<h1> <h2>my name is tom</h2> <p>tom studing jade</p> </h1>
模板继承
关键词
描述
block
占位符,通过其实现子模板的追加和替换
extends
继承,子模板继承父模板中的代码
append
在子模板中向后追加内容
prepend
在子模板中向前追加内容
include
引入文件,并将其中的代码放到模板中
实例
例如,父模板如下:
1 2 3 4 5 6 7 8 9 10
// layout.jade doctype html html head block scripts script(src='jquery.js') block styles body block content p there's no content here