查看: 1493|回复: 0

[JavaScript/JQuery] [js高手之路]Node.js模板引擎教程-jade速学与实战1 2017-09-16 19:08 by ghostwu, ... 阅读, ... 评论,

发表于 2017-9-23 08:00:01
句号论坛

环境准备:

全局安装jade: npm install jade -g

初始化项目package.json: npm init --yes

安装完成之后,可以使用 jade --help 查看jade的命令行用法

一、在项目目录下新建index.jade文件

inde.jade代码:

  1. 1 doctype html
  2. 2 html
  3. 3 head
  4. 4 meta(charset='utf-8')
  5. 5 title
  6. 6 body
  7. 7 h3 欢迎学习jade
复制代码

语法规则:

1, 标签按照html的缩进格式写

2,标签的属性可以采用圆括号

3,如果标签有内容,可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)

编译之后的index.html代码

  1. 1 <!DOCTYPE html>
  2. 2 <html>
  3. 3 <head>
  4. 4 <meta charset="utf-8">
  5. 5 <title></title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <h3>欢迎学习jade</h3>
  9. 9 </body>
  10. 10 </html>
复制代码

二、class,id等其他属性与多行文本的书写

新建index2.jade文件,代码如下:

  1. 1 doctype html
  2. 2 html
  3. 3 head
  4. 4 meta(charset='utf8')
  5. 5 title jade template engine
  6. 6 body
  7. 7 h1 jade template engine
  8. 8 h1 jade template engine
  9. 9 h1 jade template engine
  10. 10 h1 jade template engine
  11. 11 div#box.box1.box2(class='box3')
  12. 12 #abc.box1.box2.box3
  13. 13 h3.box1.box2(class='abc def')
  14. 14 a(href='http://www.taobao.com',
  15. 15 target = 'blank') 淘宝
  16. 16 input(type='button', value='点我')
  17. 17 br
  18. 18 p.
  19. 19 1,this is
  20. 20 <strong>hello</strong>
  21. 21 2,test
  22. 22 3,string
  23. 23 p
  24. 24 | 1, this is
  25. 25 strong hello
  26. 26 | 2, test
  27. 27 | 3, test string
复制代码

执行编译命令:jade -P ghostwu.html 把index2.jade编译成ghostwu.html文件,编译之后的代码如下:

  1. 1 <!DOCTYPE html>
  2. 2 <html>
  3. 3 <head>
  4. 4 <meta charset="utf8">
  5. 5 <title>jade template engine</title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <h1>jade template engine</h1>
  9. 9 <h1>jade template engine</h1>
  10. 10 <h1>jade template engine</h1>
  11. 11 <h1>jade template engine</h1>
  12. 12 <div id="box" class="box1 box2 box3"></div>
  13. 13 <div id="abc" class="box1 box2 box3"></div>
  14. 14 <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>
  15. 15 <input type="button" value="点我"><br>
  16. 16 <p>
  17. 17 1,this is
  18. 18 <strong>hello</strong>
  19. 19 2,test
  20. 20 3,string
  21. 21 </p>
  22. 22 <p> 1, this is<strong>hello</strong> 2, test
  23. 23 3, test string
  24. 24 </p>
  25. 25 </body>
  26. 26 </html>
复制代码

1,div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法

2,#abc.box1.box2.box3,全面没有给元素标签名称,默认就是给div标签加上这些属性

3,多行文本的两种写法

p. 1,this is hello 2,test 3,string 多行文本第1种写法:p标签后面要跟一个. 里面用原始的html标签写法 p | 1, this is strong hello | 2, test | 3, test string 多行文本第2种写法: 文本前面用竖线 ( | ),标签后面跟内容 三、注释 jade模板代码:
  1. 1 doctype html
  2. 2 html
  3. 3 head
  4. 4 meta(charset='utf8')
  5. 5 title jade模板引擎学习-by ghostwu
  6. 6 body
  7. 7 h3 单行注释
  8. 8 // div.box.box2 这是一段div
  9. 9 h3 不会编译到html文件的注释
  10. 10 //- div#box.box2.box3
  11. 11 h3 块注释,也叫多行注释
  12. 12 //-
  13. 13 input(type='checkbox', name='meinv', value='仙女') 仙女
  14. 14 input(type='checkbox', name='meinv', value='御姐') 御姐
  15. 15 h3 这里不是注释
  16. 16 input(type='checkbox', name='meinv', value='仙女')
  17. 17 | 仙女
  18. 18 input(type='checkbox', name='meinv', value='御姐')
  19. 19 | 御姐
复制代码

编译之后:

  1. 1 <!DOCTYPE html>
  2. 2 <html>
  3. 3 <head>
  4. 4 <meta charset="utf8">
  5. 5 <title>jade模板引擎学习-by ghostwu</title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <h3>单行注释</h3>
  9. 9 <!-- div.box.box2 这是一段div-->
  10. 10 <h3>不会编译到html文件的注释</h3>
  11. 11 <h3>块注释,也叫多行注释</h3>
  12. 12 <h3>这里不是注释</h3>
  13. 13 <input type="checkbox" name="meinv" value="仙女">仙女
  14. 14 <input type="checkbox" name="meinv" value="御姐">御姐
  15. 15 </body>
  16. 16 </html>
复制代码

1,单行注释

// div.box.box2 这是一段div

2,只在jade中注释,不会被编译到html文件

//- div#box.box2.box3

3,块注释( 多行文本注释 ),被注释的内容要另起一行

4,checkbox后面的显示文字部分 要注意,不要挨着属性的后面,要另起一行,写在竖线的后面

四、jade模板实战菜单

  1. doctype html
  2. html
  3. head
  4. meta(charset='utf8')
  5. title jade模板引擎学习-by ghostwu
  6. style.
  7. * { margin : 0; padding: 0; }
  8. li { list-style-type: none; }
  9. a { text-decoration: none; color: white; }
  10. #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
  11. #nav li { float:left; }
  12. #nav li.active { background:red; }
  13. #nav li:hover { background:#09f; }
  14. #nav li a{ padding: 5px 10px; }
  15. body
  16. div#nav
  17. ul
  18. li.active
  19. a(href='javascript:;') 首页
  20. li
  21. a(href='javascript:;') 玄幻小说
  22. li
  23. a(href='javascript:;') 修真小说
  24. li
  25. a(href='javascript:;') 都世小说
  26. li
  27. a(href='javascript:;') 科幻小说
  28. li
  29. a(href='javascript:;') 网游小说
复制代码

编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改,保存之后立刻刷新结果,也就是现代前端开发中很流行的热加载技术

五、解释变量

  1. 1 doctype html
  2. 2 html
  3. 3 head
  4. 4 meta(charset='utf8')
  5. 5 - var title = 'jade模板引擎学习-by ghostwu';
  6. 6 title #{title.toUpperCase()}
  7. 7 style.
  8. 8 * { margin : 0; padding: 0; }
  9. 9 li { list-style-type: none; }
  10. 10 a { text-decoration: none; color: white; }
  11. 11 #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
  12. 12 #nav li { float:left; }
  13. 13 #nav li.active { background:red; }
  14. 14 #nav li:hover { background:#09f; }
  15. 15 #nav li a{ padding: 5px 10px; }
  16. 16 body
  17. 17 div#nav
  18. 18 ul
  19. 19 li.active
  20. 20 a(href='javascript:;') 首页
  21. 21 li
  22. 22 a(href='javascript:;') 玄幻小说
  23. 23 li
  24. 24 a(href='javascript:;') 修真小说
  25. 25 li
  26. 26 a(href='javascript:;') 都世小说
  27. 27 li
  28. 28 a(href='javascript:;') 科幻小说
  29. 29 li
  30. 30 a(href='javascript:;') 网游小说
复制代码

#{}: 可以解释变量, toUpperCase():变量转大写

把json文件的数据在编译的时候传递到模板,

新建data.json文件数据

{ "content" : "跟着ghostwu学习jade" } index2.jade文件模板:
  1. 1 doctype html
  2. 2 html
  3. 3 head
  4. 4 meta(charset='utf8')
  5. 5 - var title = 'jade模板引擎学习-by ghostwu';
  6. 6 title #{title.toUpperCase()}
  7. 7 body
  8. 8 h3 #{content}
复制代码

编译命令:jade index2.jade -P -O data.json -O 指定一个json文件,把json文件的数据传递到模板

编译后的结果:

  1. 1 <!DOCTYPE html>
  2. 2 <html>
  3. 3 <head>
  4. 4 <meta charset="utf8">
  5. 5 <title>JADE模板引擎学习-BY GHOSTWU</title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <h3>跟着ghostwu学习jade</h3>
  9. 9 </body>
  10. 10 </html>
复制代码


太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条