1,this is    hello    2,test    3,string   

 1, this ishello 2, test     3, test string   

1，div#box.box1.box2(class='box3') 這種寫法是emmet的寫法 #就是id屬性 點(.)就是class屬性 括號也是屬性寫法

2，#abc.box1.box2.box3，全面沒有給元素標簽名稱，默認就是給div標簽加上這些屬性

3，多行文本的兩種寫法

p.

1,this is
hello
2,test
3,string

多行文本第1種寫法：p標簽后面要跟一個. 里面用原始的html標簽寫法

p

| 1, this is
strong hello
| 2, test
| 3, test string

多行文本第2種寫法： 文本前面用豎線 ( | )，標簽后面跟內容

三、注釋

jade模板代碼：

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎學習-by ghostwu
  body
    h4 單行注釋
    // div.box.box2 這是一段div
    h4 不會編譯到html文件的注釋
    //- div#box.box2.box3
    h4 塊注釋,也叫多行注釋
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h4 這里不是注釋
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

編譯之后:

 
  
  
 
 
  
單行注釋
  
  
不會編譯到html文件的注釋
  
塊注釋,也叫多行注釋
  
這里不是注釋
  仙女
  御姐
 

1，單行注釋

// div.box.box2 這是一段div

2，只在jade中注釋，不會被編譯到html文件

//- div#box.box2.box3

3，塊注釋( 多行文本注釋 )，被注釋的內容要另起一行

4，checkbox后面的顯示文字部分 要注意，不要挨著屬性的后面，要另起一行，寫在豎線的后面

四、jade模板實戰菜單

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎學習-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首頁
        li
          a(href='javascript:;') 玄幻小說
        li
          a(href='javascript:;') 修真小說
        li
          a(href='javascript:;') 都世小說
        li
          a(href='javascript:;') 科幻小說
        li
          a(href='javascript:;') 網游小說

編譯( jade index.jade -P -w )之后的效果: -w: 實時監控文件的修改，保存之后立刻刷新結果，也就是現代前端開發中很流行的熱加載技術

五、解釋變量

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎學習-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首頁
        li
          a(href='javascript:;') 玄幻小說
        li
          a(href='javascript:;') 修真小說
        li
          a(href='javascript:;') 都世小說
        li
          a(href='javascript:;') 科幻小說
        li
          a(href='javascript:;') 網游小說

#{}： 可以解釋變量, toUpperCase():變量轉大寫

把json文件的數據在編譯的時候傳遞到模板,

新建data.json文件數據

{
"content" : "跟著ghostwu學習jade"
}
index2.jade文件模板:

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎學習-by ghostwu';
    title #{title.toUpperCase()}
  body
    h4 #{content}

編譯命令：jade index2.jade -P -O data.json -O 指定一個json文件，把json文件的數據傳遞到模板

編譯后的結果：

 
  
  
 
 
  
跟著ghostwu學習jade
 

以上是“基于Node.js模板引擎jade的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。