pug模板入门
Pug原名不叫Pug，是大名鼎鼎的jade，后來(lái)由于商標(biāo)的原因，改為Pug，哈巴狗。其實(shí)只是換個(gè)名字，語(yǔ)法都與jade一樣。丑話說(shuō)在前面，Pug有它本身的缺點(diǎn)——可移植性差，調(diào)試?yán)щy，性能并不出色，但使用它可以加快開(kāi)發(fā)效率。本文將詳細(xì)介紹pug模板引擎
1.pug中文文檔參考
https://pug.bootcss.com/api/getting-started.html
2.入門示例
1.在原始目錄下建立一個(gè)views目錄，來(lái)存放該 test.pug
htmlheadscriptstylebody2.把該代碼輸出成一個(gè)html文件,我們可以在源目錄下新建一個(gè)build目錄來(lái)存放生成的文件，那就將剛才的app.js寫成
Var jade = require('pug');//加載jade引擎 var fs = require('fs')var str = jade.renderFile('./views/test.pug' ,{pretty : true }); //pretty : ture 相當(dāng)于beauty格式化一下輸出的代碼 fs.writeFile('./build/test.html' ,str , function(err){if (err)console.log("編譯失敗");elseconsole.log("編譯成功"); })3.生成的html頁(yè)面
<html><head><script></script><style></style></head><body></body> </html>4.關(guān)于class/style的寫法——屬性放在（）里面，用逗號(hào)分隔
htmlheadscriptstylebodydiv(class=['aaa','bbb','ccc'])//class也可以寫成div(style="aaa bbb ccc")div(style={width:'200px' ,height:'300px' ,background:'red'})//style也可以寫成div(style="width:200px;xxxx")運(yùn)行一下node.js，則輸出結(jié)果為
<html><head><script></script><style></style></head><body><div class="aaa bbb ccc"></div><!--class也可以寫成div(style="aaa bbb ccc")--><div style="width:200px;height:300px;background:red;"></div><!--style也可以寫成div(style="width:200px;xxxx")--></body> </html>關(guān)于上方輸出格式，可以發(fā)現(xiàn)，style是可以用json傳輸?shù)?#xff0c;class是可以采用數(shù)組傳輸進(jìn)去的。
因此可以在node.js中直接插入相關(guān)屬性數(shù)據(jù)，然后在jade文件調(diào)用，這樣就可以很方便的生成不同框架的模板文件
如果你想插入相關(guān)屬性數(shù)據(jù)，并調(diào)用的話，應(yīng)當(dāng)在node.js中的 jade.renderFile中如此添加數(shù)據(jù)
并在test.jade文件中修改如下：
htmlheadscriptstylebodydiv(class=arr)div(style=cls)運(yùn)行一下，結(jié)果是跟剛才的相同
5、在pug標(biāo)簽中輸入數(shù)據(jù)時(shí)，記得在相應(yīng)標(biāo)簽后，加一個(gè)空格
我們通常前端編程的時(shí)候，一般都會(huì)寫到
<div>名稱：DobTink<div>年齡：15</div><script src="a.js"></script><script>window.onload = function () {console.log('測(cè)試輸出');}</script> </div><a href="http://www.dobtink.com">首頁(yè)</a而在jade中，我們需要這樣來(lái)寫這實(shí)際上是最常見(jiàn)的情況，文本只需要和標(biāo)簽名隔開(kāi)一個(gè)空格即可,
有時(shí)可能想要寫一個(gè)大段文本塊。比如嵌入腳本或者樣式。只需在標(biāo)簽后面接一個(gè) .即可
6、在pug中使用if else switch while 等語(yǔ)句
pug中的 if 使用
Pug 的條件判斷的一般形式的括號(hào)是可選的，所以可以省略掉開(kāi)頭的 -，效果完全相同。類似一個(gè)常規(guī)的 JavaScript 語(yǔ)法形式
pug中的 switch 使用
htmlheadbody-var a = 3;case awhen 0div aaawhen 1div bbbwhen 2div cccwhen 3div ddddefaultdiv default7.循環(huán)
Pug 目前支持兩種主要的迭代方式： each 和 while
uleach val in [1, 2, 3, 4, 5]li= val <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ul>8. 代碼1
html head title pug學(xué)習(xí) meta(charset='utf-8') script. var message = 'hello pug'; window.function(){ // alert(message); } body div(id='contaner' class='style1') p(id='p1' style={color:'red',fontsize:'20px'}) 用戶名: input(name='username' type='text' placeholder='請(qǐng)輸入用戶名' value=username) br p 密碼: input(name='password' type="password" placeholder='請(qǐng)輸入密碼' value=password)-var k = 10; if(k % 2 === 0) p 登錄成功 else p 用戶名密碼出錯(cuò) div ul each item in week li= item9. Pug使用css樣式
//-引入內(nèi)部樣式表 style. #container{ background-color: gray; } //-引入外部樣式表 link(rel="stylesheet", href="css/my.css")3.Html代碼轉(zhuǎn)pug代碼
https://html2jade.org/
4.繼承
Pug 支持使用 block 和 extends 關(guān)鍵字進(jìn)行模板的繼承。一個(gè)稱之為“塊”（block）的代碼塊，可以被子模板覆蓋、替換
示例: 定義父模板 layout.pug
子模板 page-a.pug
//- page-a.pug extends layout.pug block scripts script(src='/jquery.js') script(src='/my.js') block content div 正文內(nèi)容 p 子內(nèi)容5. 包含 include
//- includes/head.pug head title 我的網(wǎng)站 meta(charset='utf-8') script. var message = 'hello pug'; window.function(){ // alert(message); } html //- head //- title pug學(xué)習(xí) //- meta(charset='utf-8') //- script. //- var message = 'hello pug'; //- window.function(){ //- // alert(message); //- } include head.pug body div(id='contaner' class='style1')6. 注釋
//單行注釋，會(huì)顯示在編譯后的html代碼中 <!--單行注釋，會(huì)顯示在編譯后的html代碼中 --> div 單行注釋 <div>單行注釋</div>//- 單行注釋，不會(huì)顯示在編譯后的html代碼中 div 單行注釋 <div>單行注釋</div> //- 多單注釋 不顯示在html代碼中7. Express框架集成pug模板
//設(shè)置默認(rèn)模板引擎是pug app.engine('.pug', pug.__express); app.set('view engine', 'pug');總結(jié)
- 上一篇： 解决序列号不正确无法安装Win2003
- 下一篇： Gnome3桌面美化