jade模板
Posted 品读夜的黑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jade模板相关的知识，希望对你有一定的参考价值。
jade 模板使用
npm install jade -g 安装到全局
jade index.jade 导出一个 index.html 压缩后的
jade -P index.jade 导出一个 index.html 没有压缩的
jade -P -w index.jade -w 对文件实时编译
特殊的div
.container
p 巧巧
a(href=‘http://baidu.com‘, title=‘巧莉‘, data-uid=‘100‘)
input(name=‘course‘, type=‘text‘, value=‘jade‘)
input(name=‘type‘, type=‘checkbox‘ checked)
长文本写法
p
|
qiaoqiaotongxie
|
2.bbc
插入标签
p.
a
qiaoqiaojadjade
1. aa
2. bb
<strong>我就是这么叼</strong>
3. cc
4. dd
5. e
a qiaoqiaojad
p
|
a
a 我是来插入广告的
|
1. aa
|
2. bb
|
3. cc
a 我是一个爱捣乱的标签
注释和条件注释
单行注释 //
非缓冲注释 //-
块注释
h3 单行注释
// a 巧克力
p 非缓冲注释
//- 你是看不到宝宝我的
h3 块注释
//
ul
li
a 也无风雨也无晴
li
a 有花堪折直须折
li
a 锦瑟无端五十弦
//-
ul
li
a 也无风雨也无晴
li
a 有花堪折直须折
li
a 锦瑟无端五十弦
IE注释
doctype html
html
<!--[if IE 7]><html class=‘ie7‘><! [endif]-->
<!--[if IE 8]><html class=‘ie8‘><! [endif]-->
<!--[if IE 9]><html class=‘ie9‘><! [endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
如果用全注释 html标签在结尾处是要闭合的
变量
页面内声明变量
- var course = ‘jade‘
命令行方式变量
jade index.jade -P -w --obj ‘{"course":"jade course"}‘
命令行方式外部文件
jade index.jade -P -w -O index.json
// 网站开发中 通常数据都是从后台程序去调用
转义
#{data}
p= data
非转义
!{data}
p!= data
p \!{htmlData} 输出 !{htmlData}
p \#{htmlData} 输出#{htmlData}
没有数值的变量
input(value="#{newData}")
input(value=newData)
<input value="undefined">
<input>
流程
-var qiao = {course: ‘jade‘,study:‘巧莉‘,age:24}
for 语法
-for (var k in qiao)
p= qiao[k]
each 语法
-each value, key in qiao
p #{key}: #{value}
each value, key in qiao
p #{key}: #{value}
h3 遍历数组
-var courses = [‘node‘, ‘jade‘, ‘express‘, ‘Ejs‘, ‘cheerio‘, ‘bower‘]
-each value, key in courses
p #{key}: #{value}
嵌套循环
-var sections = [{id:1,items:[‘a‘,‘b‘]},{id:2,items:[‘c‘,‘d‘,‘e‘,‘h‘]}];
dl
each section in sections.length > 0 ? sections : [{id:0, items: [‘none‘]}]
dt= section.id
each item in section.items
dd= item
嵌套循环
while循环
-var n = 0
ul
while n < 4
li= n++
if else unless 语法
- var show = true
- var lessons = [‘jade‘, ‘node‘];
if show
p 显示
if lessons.length > 2
p #{lessons.join(‘, ‘)}
else if lessons.length > 1
p #{lessons.join(‘/ ‘)}
else
p no lesson
else
p no show
unless 反向的判断
unless !show
p #{lessons.length}
unless !lessons.length
p 逗逼 #{lessons.length}
case 语法
- var name = ‘jade‘
case name
when ‘java‘
when ‘node‘
p Hi node !
when ‘jade‘: p Hi jade !
when ‘express‘: p Hi express !
default
p Hi #{name}
mixin的用法
mixin lesson
p qiao study jade
+lesson
mixin study(name,courses)
p #{name}
ul#courses.courses
each course in courses
li= course
+study(‘巧莉‘,[‘jade‘,‘node‘,‘express‘,‘cheerio‘])
+study(‘苏东坡‘,[‘西湖醋鱼‘, ‘叫花鸡‘, ‘东坡肉‘])
mixin team(slogon)
h4 #{slogon}
if block
block
else
p no team
+team(‘slogon‘)
p Good job!
p 大逗逼
结果
<h4>slogon</h4>
<p>Good job!</p>
<p>大逗逼</p>
h2 单个属性值的情况
mixin attr(name)
p(class!=attributes.class) #{name}
+attr(‘attr‘)(class=‘magic‘)
// != 此处的class是不需要转义的
h2 多个属性值的情况
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs(‘attrs‘)(class=‘magic2‘, id=‘deep‘)
h3 参数不定的情况下
mixin magic(name, ...items)
ul(class=‘#{name}‘)
each item in items
li= item
+magic(‘qiao‘,‘逗逼‘,‘搞笑的‘)
以上是关于jade模板的主要内容，如果未能解决你的问题，请参考以下文章