环境准备:
全局安装jade: npm install jade -g
初始化项目package.json: npm init --yes
安装完成之后,可以使用 jade --help 查看jade的命令行用法
一、在项目目录下新建index.jade文件
inde.jade代码:
- doctype html
- html
- head
- meta(charset='utf-8')
- title
- body
- h3 欢迎学习jade
语法规则:
1, 标签按照html的缩进格式写
2,标签的属性可以采用圆括号
3,如果标签有内容,可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)
编译之后的index.html代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <body>
- <h3>欢迎学习jade</h3>
- </body>
- </html>
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下:
- doctype html
- html
- head
- meta(charset='utf8')
- title jade template engine
- body
- h1 jade template engine
- h1 jade template engine
- h1 jade template engine
- h1 jade template engine
- div#box.box1.box2(class='box3')
- #abc.box1.box2.box3
- h3.box1.box2(class='abc def')
- a(href='http://www.taobao.com',
- target = 'blank') 淘宝
- input(type='button', value='点我')
- br
- p.
- 1,this is
- <strong>hello</strong>
- 2,test
- 3,string
- p
- | 1, this is
- strong hello
- | 2, test
- | 3, test string
执行编译命令:jade -P
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf8">
- <title>jade template engine</title>
- </head>
- <body>
- <h1>jade template engine</h1>
- <h1>jade template engine</h1>
- <h1>jade template engine</h1>
- <h1>jade template engine</h1>
- <div id="box" class="box1 box2 box3"></div>
- <div id="abc" class="box1 box2 box3"></div>
- <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>
- <input type="button" value="点我"><br>
- <p>
- 1,this is
- <strong>hello</strong>
- 2,test
- 3,string
- </p>
- <p> 1, this is<strong>hello</strong> 2, test
- 3, test string
- </p>
- </body>
- </html>
1,div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法
2,#abc.box1.box2.box3,全面没有给元素标签名称,默认就是给div标签加上这些属性
3,多行文本的两种写法
- doctype html
- html
- head
- meta(charset='utf8')
- title jade模板引擎学习-by ghostwu
- body
- h3 单行注释
- // div.box.box2 这是一段div
- h3 不会编译到html文件的注释
- //- div#box.box2.box3
- h3 块注释,也叫多行注释
- //-
- input(type='checkbox', name='meinv', value='仙女') 仙女
- input(type='checkbox', name='meinv', value='御姐') 御姐
- h3 这里不是注释
- input(type='checkbox', name='meinv', value='仙女')
- | 仙女
- input(type='checkbox', name='meinv', value='御姐')
- | 御姐
编译之后:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf8">
- <title>jade模板引擎学习-by ghostwu</title>
- </head>
- <body>
- <h3>单行注释</h3>
- <!-- div.box.box2 这是一段div-->
- <h3>不会编译到html文件的注释</h3>
- <h3>块注释,也叫多行注释</h3>
- <h3>这里不是注释</h3>
- <input type="checkbox" name="meinv" value="仙女">仙女
- <input type="checkbox" name="meinv" value="御姐">御姐
- </body>
- </html>
1,单行注释
// div.box.box2 这是一段div
2,只在jade中注释,不会被编译到html文件
//- div#box.box2.box3
3,块注释( 多行文本注释 ),被注释的内容要另起一行
4,checkbox后面的显示文字部分 要注意,不要挨着属性的后面,要另起一行,写在竖线的后面
四、jade模板实战菜单
- doctype html
- html
- head
- meta(charset='utf8')
- title jade模板引擎学习-by ghostwu
- style.
- * { margin : 0; padding: 0; }
- li { list-style-type: none; }
- a { text-decoration: none; color: white; }
- #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
- #nav li { float:left; }
- #nav li.active { background:red; }
- #nav li:hover { background:#09f; }
- #nav li a{ padding: 5px 10px; }
- body
- div#nav
- ul
- li.active
- a(href='javascript:;') 首页
- li
- a(href='javascript:;') 玄幻小说
- li
- a(href='javascript:;') 修真小说
- li
- a(href='javascript:;') 都世小说
- li
- a(href='javascript:;') 科幻小说
- li
- a(href='javascript:;') 网游小说
编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改,保存之后立刻刷新结果,也就是现代前端开发中很流行的热加载技术
五、解释变量
- doctype html html head meta(charset = 'utf8') -
- var title = 'jade模板引擎学习-by ghostwu';
- title# {
- title.toUpperCase()
- }
- style. * {
- margin: 0;
- padding: 0;
- }
- li {
- list - style - type: none;
- }
- a {
- text - decoration: none;
- color: white;
- }#nav {
- width: 980px;
- height: 34px;
- margin: 20px auto;
- line - height: 34px;
- background: #800;
- }#nav li {
- float: left;
- }#nav li.active {
- background: red;
- }#nav li: hover {
- background: #09f;
- }#nav li a {
- padding: 5px 10px;
- }
- body div#nav ul li.active a(href = 'javascript:;')首页li a(href = 'javascript:;')玄幻小说li a(href = 'javascript:;')修真小说li a(href = 'javascript:;')都世小说li a(href = 'javascript:;')科幻小说li a(href = 'javascript:;')网游小说
#{}: 可以解释变量, toUpperCase():变量转大写
把json文件的数据在编译的时候传递到模板,
新建data.json文件数据
- doctype html html head meta(charset = 'utf8') -
- var title = 'jade模板引擎学习-by ghostwu';
- title# {
- title.toUpperCase()
- }
- body h3# {
- content
- }
编译命令:jade index2.jade -P -O data.json -O 指定一个json文件,把json文件的数据传递到模板
编译后的结果:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf8">
- <title>JADE模板引擎学习-BY GHOSTWU</title>
- </head>
- <body>
- <h3>跟着ghostwu学习jade</h3>
- </body>
- </html>
来源: http://www.cnblogs.com/ghostwu/p/7531956.html