您的位置：首页 > Web前端 > HTML
html模板引擎jade的使用

2016-05-24 16:08 645 查看
jade语法:

#{xxx}  //嵌入数据
p= xxx  //嵌入数据
p #{xx} //嵌入数据

标签 html    // 翻译为<html></html>
div#test     // <div id="test"></div>
div.bb-dd    // <div class="bb-dd"></div>

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

#content
.item
// <div id="content"><div class="item"></div></div>

p 啊噢！ // <p>啊噢！</p>

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

输出 #{}转义  p \#{something}   // <p>#{something}</p>
输出 \  使用\\

//不转义执行script
- var html = "<script>console.log('oo'); $(function(){console.log('ye');});</script>"
| !{html}

//执行js
script

| console.log('yy');
| console.log('dd');

或者
script.
console.log('aa');
console.log('bb');
console.log('cc');
function add(a,b){
return a+b;
}
add(1,3);

//引入css文件
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/jquery.js')

注释：
//just some paragraphs   单行注释    解释渲染为 <!-- just some paragraphs -->
不输出到最终html文件的注释
//- will not output within markup

//条件输出 注意缩进
- var friends = 10
case friends
when 0
p 没有盆友
when 1
p 你有1个盆友
when default
p 你有#{friends}个盆友

//或者这样
- var arr = 0
case friends
when 0: p 没有盆友
when 1: 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
- else
p 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] in OBJ

- var items = ["one", "two", "three"]
each item in items
li= item

//带上索引
each item, i in items
li #{item}: #{i}

键值对
- var obj = { foo: 'bar' }
each val, key in obj
li #{key}: #{val}

- var foo = {one:11,two:22,three:33}
each val,key in foo
p #{key}
span #{val}

for user in users
for role in user.roles
li= role

条件语句:
for user in users
if user.role == 'admin'
p #{user.name} is an admin
else
p= user.name

for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= 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
<style> and <script> tags, respectively
include stylesheet.css
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航