html jade引入,html模板引擎jade的使用

jade语法:

#{xxx}//嵌入数据

p= xxx //嵌入数据

p #{xx} //嵌入数据

标签 html//翻译为

div#test //

div.bb-dd //

div#bb.aa.cc//也可以的,类似emmet的语法

#content

.item//

p 啊噢！//

啊噢！

p|foo bar baz|rawr rawr|go jade go//输出大段文本内容

foo bar baz rawr.....

输出 #{}转义 p \#{something}//

#{something}

输出 \ 使用//不转义执行script

- var html = ""

| !{html}//执行js

script| console.log(‘yy‘);| console.log(‘dd‘);

或者

script.

console.log(‘aa‘);

console.log(‘bb‘);

console.log(‘cc‘);functionadd(a,b){return a+b;

}

add(1,3);//引入css文件

link(rel=‘stylesheet‘, href=‘/stylesheets/style.css‘)

script(src=‘/jquery.js‘)

注释：//just some paragraphs 单行注释 解释渲染为

不输出到最终html文件的注释//- will not output within markup

//条件输出 注意缩进

- var friends = 10

casefriends

when0p 没有盆友

when1p 你有1个盆友

whendefaultp 你有#{friends}个盆友//或者这样

- var arr = 0

casefriends

when0: p 没有盆友

when1: p 你有1个盆友//元素多个属性

input(name=‘user[name]‘ autofocus=‘autofocus‘)//或者用逗号 input(type="checkbox", checked)

a标签

a(href=‘/user/‘ + user.id)=user.name

或者 a(href=‘/user/#{user.id}‘)=user.name

class 属性是一个特殊的属性，你可以直接传递一个数组，比如 bodyClasses= [‘user‘, ‘authenticated‘] :

body(class=bodyClasses)

文档类型!!! 5 或者 !!!html 或者 doctype html

执行代码 ,逻辑控制

jade支持三种类型的可执行代码1. 前缀 -， 这是不会被输出的- var foo = ‘bar‘;- for (var key in obj) //条件或循环

p=obj[key]- if(foo)

ul

li yay

li foo

li worked- elsep oh no!didnt work- if(items.length)

ul- items.forEach(function(item){

li=item-})2.前缀一个=返回一个值- var foo = ‘bar‘

=foo

h1=foo//= 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 !=

if, else if, else, until, while, unless 它们是普通的javascript代码

同时 Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是 each

循环：

语法 each VAL[, KEY]inOBJ- var items = ["one", "two", "three"]

each iteminitems

li=item//带上索引

each item, i initems

li #{item}: #{i}

键值对- var obj = { foo: ‘bar‘}

each val, keyinobj

li #{key}: #{val}- var foo = {one:11,two:22,three:33}

each val,keyinfoo

p #{key}

span #{val}for user inusersfor role inuser.roles

li=role

条件语句:for user inusersif user.role == ‘admin‘p #{user.name} is an adminelsep=user.namefor user inusers- if (user.role == ‘admin‘)

p #{user.name} is an admin- elsep=user.name

模板继承：

block xxx 在子模板中实现

子模板中继承时 使用 extends xxx 指定

实现block时默认会替换block 块

也可以使用

block append 或 block prepend 在块的前面或者后面追加

包含 使用 include xxx/xx

比如:

./layout.jade

./includes/./head.jade

./tail.jade

此时layout.jade

html

include includes/head

body

h1 My Site

p Welcome to my super amazing site.

include includes/foot

或者给定后缀扩展名

html

head//- css and js have simple filters that wrap them in

include stylesheet.css