[js高手之路]Node.js模板引擎教程-jade速学与实战1
Posted ghostwu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路]Node.js模板引擎教程-jade速学与实战1相关的知识，希望对你有一定的参考价值。
环境准备：
全局安装jade: npm install jade -g
初始化项目package.json: npm init --yes
安装完成之后，可以使用 jade --help 查看jade的命令行用法
一、在项目目录下新建index.jade文件
inde.jade代码：
1 doctype html 2 html 3 head 4 meta(charset=\'utf-8\') 5 title 6 body 7 h3 欢迎学习jade
语法规则：
1， 标签按照html的缩进格式写
2，标签的属性可以采用圆括号
3，如果标签有内容，可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)
编译之后的index.html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h3>欢迎学习jade</h3> 9 </body> 10 </html>
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下：
1 doctype html 2 html 3 head 4 meta(charset=\'utf8\') 5 title jade template engine 6 body 7 h1 jade template engine 8 h1 jade template engine 9 h1 jade template engine 10 h1 jade template engine 11 div#box.box1.box2(class=\'box3\') 12 #abc.box1.box2.box3 13 h3.box1.box2(class=\'abc def\') 14 a(href=\'http://www.taobao.com\', 15 target = \'blank\') 淘宝 16 input(type=\'button\', value=\'点我\') 17 br 18 p. 19 1,this is 20 <strong>hello</strong> 21 2,test 22 3,string 23 p 24 | 1, this is 25 strong hello 26 | 2, test 27 | 3, test string
执行编译命令：jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.html文件，编译之后的代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>jade template engine</title> 6 </head> 7 <body> 8 <h1>jade template engine</h1> 9 <h1>jade template engine</h1> 10 <h1>jade template engine</h1> 11 <h1>jade template engine</h1> 12 <div id="box" class="box1 box2 box3"></div> 13 <div id="abc" class="box1 box2 box3"></div> 14 <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a> 15 <input type="button" value="点我"><br> 16 <p> 17 1,this is 18 <strong>hello</strong> 19 2,test 20 3,string 21 </p> 22 <p> 1, this is<strong>hello</strong> 2, test 23 3, test string 24 </p> 25 </body> 26 </html>
1，div#box.box1.box2(class=\'box3\') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法
2，#abc.box1.box2.box3，全面没有给元素标签名称，默认就是给div标签加上这些属性
3，多行文本的两种写法
1 doctype html 2 html 3 head 4 meta(charset=\'utf8\') 5 title jade模板引擎学习-by ghostwu 6 body 7 h3 单行注释 8 // div.box.box2 这是一段div 9 h3 不会编译到html文件的注释 10 //- div#box.box2.box3 11 h3 块注释,也叫多行注释 12 //- 13 input(type=\'checkbox\', name=\'meinv\', value=\'仙女\') 仙女 14 input(type=\'checkbox\', name=\'meinv\', value=\'御姐\') 御姐 15 h3 这里不是注释 16 input(type=\'checkbox\', name=\'meinv\', value=\'仙女\') 17 | 仙女 18 input(type=\'checkbox\', name=\'meinv\', value=\'御姐\') 19 | 御姐
编译之后:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>jade模板引擎学习-by ghostwu</title> 6 </head> 7 <body> 8 <h3>单行注释</h3> 9 <!-- div.box.box2 这是一段div--> 10 <h3>不会编译到html文件的注释</h3> 11 <h3>块注释,也叫多行注释</h3> 12 <h3>这里不是注释</h3> 13 <input type="checkbox" name="meinv" value="仙女">仙女 14 <input type="checkbox" name="meinv" value="御姐">御姐 15 </body> 16 </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: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术
五、解释变量
1 doctype html 2 html 3 head 4 meta(charset=\'utf8\') 5 - var title = \'jade模板引擎学习-by ghostwu\'; 6 title #{title.toUpperCase()} 7 style. 8 * { margin : 0; padding: 0; } 9 li { list-style-type: none; } 10 a { text-decoration: none; color: white; } 11 #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;} 12 #nav li { float:left; } 13 #nav li.active { background:red; } 14 #nav li:hover { background:#09f; } 15 #nav li a{ padding: 5px 10px; } 16 body 17 div#nav 18 ul 19 li.active 20 a(href=\'javascript:;\') 首页 21 li 22 a(href=\'javascript:;\') 玄幻小说 23 li 24 a(href=\'javascript:;\') 修真小说 25 li 26 a(href=\'javascript:;\') 都世小说 27 li 28 a(href=\'javascript:;\') 科幻小说 29 li 30 a(href=\'javascript:;\') 网游小说
#{}： 可以解释变量, toUpperCase():变量转大写
把json文件的数据在编译的时候传递到模板,
新建data.json文件数据
1 doctype html 2 html 3 head 4 meta(charset=\'utf8\') 5 - var title = \'jade模板引擎学习-by ghostwu\'; 6 title #{title.toUpperCase()} 7 body 8 h3 #{content}
编译命令：jade index2.jade -P -O data.json -O 指定一个json文件，把json文件的数据传递到模板
编译后的结果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>JADE模板引擎学习-BY GHOSTWU</title> 6 </head> 7 <body> 8 <h3>跟着ghostwu学习jade</h3> 9 </body> 10 </html>
以上是关于[js高手之路]Node.js模板引擎教程-jade速学与实战1的主要内容，如果未能解决你的问题，请参考以下文章
[js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin
[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义
[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)