jade模板引擎的基本使用

jade和ejs很大的不同是通過縮排的方式解決巢狀和成對標籤的問題，比較適合有**潔癖的同學。

jade官方有基礎的語法: 

安裝jade

npm install -g jade

編譯jade test.jade 編譯檔案

jade -p test.jade 編譯成帶格式的html檔案

jade -p -w test.jade 實時編譯

唯一需要記住的就是用統一的縮進來巢狀標籤。

jade

doctype html

doctype html

>

ul

li item a
li item b
li item c

<

ul>
<
li>item a
li>
<
li>item b
li>
<
li>item c
li>
ul>

#content

.block
input#bar.foo1.foo2

<

div 
id="content"
>
<
div 
class
="block"
>
<
input 
id="bar"
class
="foo1 foo2"
/>
div>
div>

// 這個單行注釋會輸出到編譯後的檔案中

p 文字1
// 這個多行注釋會輸出到編譯後的檔案中
這個多行注釋會輸出到編譯後的檔案中
p 文字2
//- 
這個多行注釋不會輸出到編譯後的檔案中
這個多行注釋不會輸出到編譯後的檔案中
p 文字3

<

p>文字1
p>
<
p>文字2
p>
<
p>文字3
p>

input(type='checkbox', checked)

<

input 
type
="checkbox"
checked
="checked"
/>

1、在文件中寫json

- var course='

mei'
h1 #

tiny.json

對應html

,]}

ul

each item in movies
lia(href="/move/#")
img(src="#",alt="#")

<

ul>
<
li><
a href
="/move/1"
><
img 
src=""
alt="復仇者聯盟2"
/>
a>
li>
<
li><
a href
="/move/1"
><
img 
src=""
alt="復仇者聯盟3"
/>
a>
li>
ul>

jade模板引擎使用中遇到的坑

1.如果id中有變數的話怎麼辦？就不要用 後跟id的形式了，改為 div.list all live id list e match id dom 2.段落中的標籤加文字加標籤怎麼解決？p.pure u 3 5 m name span.sporttery img width 14 src image...

node前端模板引擎Jade之標籤的基本寫法

1 文件宣告 我們在開始寫乙個 html 頁面的時候，首先要寫上 doctype 文程式設計客棧檔宣告的，現在通常情況下我們都是採用 html5 的文件宣告方式，那麼在 jade 裡面我們應該怎麼寫呢？在 jade 裡面編寫文件宣告有2種方式 當然，jade 還預設支援其他型別的文件宣告，只需要使用...

jade模板基本語法

第二個title是標題物件,是傳過來的字串 method1 title title method2 title titleh1 效果一樣 h1 title 測試一把 h1 this is a h1 p.tcolor welcome to p welcome to titlediv span hell...