Jade學習筆記

Jade 高亮顯示:
https://packagecontrol.io/installation#st3
npm install -g jade 全局安裝jade
Jade 模板引擎
Jade是express默認的模板引擎
將動靜部分柔和的一種實現機制或者是技術
動態：純數據 佔位符
靜態：模板
特色：
1，超強的可讀性
2，靈活易用的縮進
3，塊擴展
4，代碼默認通過編碼處理，以加強安全性
5，編譯及運行時的上下文錯誤報告
6，命令行編譯支持
7，html5模式
8，可選的內存緩存
9，聯合動態的靜態標記類
10，利用過濾器解析樹的處理
經過命令行能夠將jade按照到全局使用命令對jade文件進行編譯。
jade -p:編譯成可讀html
jade -w:對文件編輯狀態進行實時的監控
...
元素，標籤
<h1 class="title"></h1> --> h1.title
<h1 id="title"></h1>-->h1#title
<h1 id="head" class="title"></h1>-->h1#head.title
div能夠直接寫:#id.classname----><div id="id" class="classname"></div>
h1.title(id="head",class="title3") what------><h1 id="head" class="title title3">what</h1>
a(href="www.baidu.com",title="jade study",data-uid="1000") link--->link
input(type="text",value="jade",name="class")----><input type="text" name="class" value="jade">
input(type="checkbox",value="jade",name="class",checked)----><input type="checkbox" name="class" value="jade" checked>
jade註釋
單行註釋 //
非緩衝註釋（不被編譯到） //-
塊註釋 //- 在塊元素上註釋

大段文本
p.
1.a
strong 2.b
3.c
引入腳本和樣式:
style.
body{color:red}
script.
var i = "baidu"
jade 能夠像js同樣聲明變量
-var i = "jade"
title #{i.toUpperCase()} study
demo.jade

demo.html