你的位置:首页 > Java教程

[Java教程][js高手之路]Node.js模板引擎教程

环境准备:

全局安装jade: npm install jade -g

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

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

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

inde.jade代码:

1 doctype html2 html3  head4   meta(charset='utf-8')5   title6  body7   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 engine10   h1 jade template engine11   div#box.box1.box2(class='box3')12   #abc.box1.box2.box313   h3.box1.box2(class='abc def')14   a(href='http://www.taobao.com',15   target = 'blank') 淘宝16   input(type='button', value='点我')17   br18   p.19    1,this is20    <strong>hello</strong>21    2,test22    3,string23   p24    | 1, this is25    strong hello26    | 2, test27    | 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 is18  <strong>hello</strong>19   2,test20   3,string21  </p>22  <p> 1, this is<strong>hello</strong> 2, test23   3, test string24  </p>25 </body>26 </html>

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

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

3,多行文本的两种写法

p.1,this is<strong>hello</strong>2,test3,string多行文本第1种写法:p标签后面要跟一个. 里面用原始的html标签写法p| 1, this isstrong hello| 2, test| 3, test string多行文本第2种写法: 文本前面用竖线 ( | ),标签后面跟内容 三、注释jade模板代码:
 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.box311   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 htmlhtml 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  body17   div#nav18    ul19     li.active20      a(href='javascript:;') 首页21     li22      a(href='javascript:;') 玄幻小说23     li24      a(href='javascript:;') 修真小说25     li26      a(href='javascript:;') 都世小说27     li28      a(href='javascript:;') 科幻小说29     li30      a(href='javascript:;') 网游小说

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

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

新建data.json文件数据

{"content" : "跟着ghostwu学习jade"}index2.jade文件模板:
1 doctype html2 html3  head4   meta(charset='utf8')5   - var title = 'jade模板引擎学习-by ghostwu';6   title #{title.toUpperCase()}7  body8   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>