模板引擎是一個庫凉蜂,或者一個使用一定的規(guī)則或者語言來解釋數(shù)據(jù)并渲染試圖的框架恨课。模板引擎處理過的最終結果是一個視圖頁面险胰,也就是HTML頁面或者用戶圖形界面GUI。在MVC框架中屯援,模板屬于View層猛们。
使用模板的好處:一個模板可以動態(tài)生成無限多個頁面,而且方便全局性的修改狞洋。
jade是nodejs的模板引擎阅懦,采用空格縮進的規(guī)則
標簽
jade每行開頭都會被默認解釋成HTML標簽,不用<></>和配對徘铝,可以節(jié)省很多鍵盤輸入
變量與數(shù)據(jù)
默認jade傳入的數(shù)據(jù)稱為locals,如果要輸入一個變量需要使用=表示怕午。
例如:
h1=title
p= body
** 屬性**
jade屬性可以通過在標簽后面添加()完成淹魄,格式是(name=value)郁惜,多個屬于通過甲锡,分隔開
例如:
div(id="content", class="main")
//如果屬性value為變量,只需要書寫變量的名字即可缤沦,例如下面的url虎韵,isActive缸废,isChecked
a(herf=url, data-active=isActive)
label
input(type="checkbox", checked=isChecked)
//如果一行輸入不完驶社,可以通過|繼續(xù)在新的一行中輸入HTML內容亡电,入下處的|
| yes/no
字面量
為了方便id和class可以使用#和.代替
例如:
//div(id="content")等同于如下
div#content
//p(class="lead center")等同于如下
p.lead.center
文本
通過使用|可以輸出原始文本
script或style代碼塊
可以使用script或style標簽寫入內容塊
例如:
script.
//下面可以寫入js代碼
console.log("Test");
javascript代碼
可以使用-硅瞧,=腕唧,四苇!=開頭表示注入js代碼方咆。不過這個需要注意避免跨站腳本XSS攻擊瓣赂。
不過if, unless語句可以不用使用前綴也表示標準js代碼
例如:
- var arr = ["a", "b", "c"]
//if語句可以不用-,=,!=符號標注
if(arr.length!=0)
p "arr is null"
else
p "arr is not null"
注釋
通過//顯示注釋內容妓肢,//-不顯示注釋內容
each語句
與if相似苫纤, 在jade中的迭代可以簡單的寫each語句,規(guī)則:each arg index in args
過濾器
文本塊的過濾需要安裝第三方的過濾器
讀取變量
讀取方法:#{name}
case
用法:
case value
when value1
defaule
函數(shù)mixin
mixin產生一些HTML代碼的函數(shù)喊废,并且可以帶參數(shù)污筷。
聲明語法:mixin name(param, param2,...)
使用語法:+name(data)
include
include是把邏輯提取到單獨文件里面的一種方式瓣蛀,主要是為了讓多個文件重用它雷厂。
例如:include ./include/header
注意改鲫, 這里并不需要給名字或者路徑添加雙引號或者單引號。
include操作是在編譯時處理诊县,因此措左,不能在文件名和文件路徑中使用變量怎披。
extend
extend是一種自底而上的方法,與include相反性宏,包含的文件決定要替換的主文件的哪一部分毫胜。
格式:extend filename, block blockname