jade模板引擎簡介

模板引擎是一個庫,或者一個使用一定的規則或者語言來解釋數據并渲染試圖的框架。模板引擎處理過的最終結果是一個視圖頁面,也就是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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,754評論 18 399
  • Express框架里內嵌了Jade模板引擎。正好項目里也要用到,本篇整理了下Jade的相關用法。 安裝與執行 標簽...
    張歆琳閱讀 25,553評論 8 42
  • 作者:楊會會 拍攝:楊會會 是的,我不知道這是什么花,它俘獲了我的心,我想知道它的名字。 [從學校里走過,看到滿樹...
    楊會會_9ece閱讀 307評論 9 1
  • GL,工程師,相識十年,因為他總是嘻嘻哈哈說自己不愛讀書,我們都忘記了他是某航空研究所的正牌博士,研究科目就不說了...
    老神在在_曾用名蓮葉田田閱讀 512評論 0 1