jade 學習筆記

2021-07-16 13:51:10 字數 2057 閱讀 4210

特別注意:

縮排要麼用空格,要麼用tab,不能同時用兩種

子元素和父元素要有縮排

標籤和文字之間要有空格

doctype html

html

head

title this is title

body

section

divp

ulstrong

hr

加class

p. 後跟**塊

| 表示換行

jade 也可以巢狀html標籤

style.

body

script.

//單行注釋

//- 非緩衝注釋 不會編譯到html中

//-

p 塊注釋

//條件注釋

變數申明 和 資料傳遞

安全轉義 和 非安全轉義

doctype html

html

head

title

body

-var data = 『

text

』 p #//&*** ….

p= data

p !//不轉義

p!= data

輸出 # ! {}

p # ! ,]

dl -var n = 0

ul while n < 4

li= n++

if lessons

if lessons.length > 1

p #

else if lessons.length > 2

p= lesson.join(『, 『)

else

p no lesson

//反向判斷 unless

mixins jade **塊重用 是乙個函式

mixin lesson

p hello mixin

+lesson //呼叫lesson

mixin study(arg1,arg2)

p #

ul.courses

each c in arg2

li= c

+sdudy(『***』,[a,b,c])

//巢狀呼叫

mixin group(student)

+study(student.name,student.courses)

+group()

//mixin就相當於函式 接下來不同說,當**太多的時候

//難免會出現多個文件的維護 感覺這些個概念完全是用來組織**的

//模版繼承

block desc

p hello world

block desc

extends layout

//模版包含

include head

include title.html

jade.js 裡面的complie render readfile

filters 與其它外掛程式共同使用

//不能傳動態資料

:markdown

hi,this is a markdown [link]

(:less

body

}script

:coffee

console.log 『hello,coffee』

******************************==

jade -p index.jade// 編譯成index.html

jade學習筆記

1 編譯檔案 jade 檔名 p w 2 大段文字的寫法 內容前加 或者採用.元素名.內容 例 3 注釋 單行注釋 jade注釋 僅在jade中注釋,不會顯示在html檔案裡 塊注釋 下面一行並縮排的 都會被解釋成塊注釋 僅在jade中注釋,html中不顯示 例 4 宣告變數和替換資料 1.直接在j...

學習前端模板引擎 jade 一

通常大部分前端開發工作者一開始步入前端開發的時候,都是直接簡單的寫html頁面然後丟給後台開發,後台開發在來嵌入模版。對於日益龐大的前端頁面來說,還是用老的字串拼接的方法來嵌入html內容已經不適應當下的開發趨勢了。廢話不多說,直接切入正題。第二步我要安裝npm包管理工具,在node環境下,不裝gr...

Jade高階使用

要使用jade,其實不是那麼容易接受的,幾個優點我列出來。1.熟悉的話,開發確實比較快,適合全棧開發。2.強制使用縮排,但比較簡潔,也不像html又要寫開頭又要寫結尾。3.模板繼承方便 pages 放置頁面 layout.jade var express require express var po...