模板引擎是一個庫,或者一個使用一定的規則或者語言來解釋數據并渲染試圖的框架。模板引擎處理過的最終結果是一個視圖頁面,也就是HTML頁面或者用戶圖形界面GUI。在MVC框架中,模板屬于View層。
使用模板的好處:一個模板可以動態生成無限多個頁面,而且方便全局性的修改。
jade是nodejs的模板引擎,采用空格縮進的規則
標簽
jade每行開頭都會被默認解釋成HTML標簽,不用<></>和配對,可以節省很多鍵盤輸入
變量與數據
默認jade傳入的數據稱為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)
//如果一行輸入不完,可以通過|繼續在新的一行中輸入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語句,規則:each arg index in args
過濾器
文本塊的過濾需要安裝第三方的過濾器
讀取變量
讀取方法:#{name}
case
用法:
case value
when value1
defaule
函數mixin
mixin產生一些HTML代碼的函數,并且可以帶參數。
聲明語法:mixin name(param, param2,...)
使用語法:+name(data)
include
include是把邏輯提取到單獨文件里面的一種方式,主要是為了讓多個文件重用它。
例如:include ./include/header
注意, 這里并不需要給名字或者路徑添加雙引號或者單引號。
include操作是在編譯時處理,因此,不能在文件名和文件路徑中使用變量。
extend
extend是一種自底而上的方法,與include相反,包含的文件決定要替換的主文件的哪一部分。
格式:extend filename, block blockname