Jade/Pug模板引擎

doctype html

html

head

meta(charset='utf-8')

title 我的网站

body

div

|hehe

a: img(src="#")

div(style={width:"100px",height:"100px"})

测试div

div(class="test") 我是类名为test的div

.test我是类名为test的div

#myid 我是id名为myid的div

.myclass#myids 我是有id也有class的div

-varname= "张三"

div 名字是:#{name}

//我是注释

//

我是注释1

我是注释2

//-我是jade注释

//-

我是jade注释一

我是jade注释二，不会显示在HTML文件

//-for循环

ul

-for(vari= 0;i< 3;i++)

li 我是循环的li

//-数组

-vararr= ["张三","李四","王五"]

forvalinarr

p #{val}

//-对象数组

-vararrs= [{name:"张三",age:"22"},{name:"李四",age:"23"}]

forvalinarrs

p 姓名是#{val.name} 年龄是#{val.age}

//-循环对象

-varobj= {name:"张三",age:22}

foritem,indexinobj

p 下表是#{index} 值是#{item}

//-if else

-varjudge= false

ifjudge

p judge的值是true

else

p judge的值是false

//-switch

-varnum= 3

casenum

when 1

p #{num}的值等于1

when 2

p #{num}的值等于2

when 3

p #{num}的值等于3

default

p #{num}是其他值

//-CSS

style(type="text/css").

.div{

width: 100px;

}

//-JS

script(type="text/javascript").

console.log("1111");

functiontest(){

console.log("我是test函数");

}

//-mixin类似于封装函数

mixin list

ul

-for(vari= 0;i<3;i++)

li 我是li的内容

//-调用mixin

+list

+list

mixin pet(name,sex)

p 宠物的名字是#{name},宠物的性别是#{sex}

+pet("小明","男")

+pet("小红","女")