jade學習01

時間 2019-11-16

標籤 jade 學習欄目 Node.js 简体版

原文原文鏈接

編寫

簡單例子

doctype html
html
  head
    title learn jade
  body
    h1 learn jade

經常使用命令

編譯: jade index.jade //默認編譯成壓縮後的html文件
排版編譯: jade -P index.jade
實時檢測: jade -w index.jade / `jade -P -w index.jade

聲明文檔：

jade html,
jade strict,
jade frameset,
jade xml

格式：

子級縮進兩格，
標籤與文本空一格,
標籤加文本和文本換行:

<div>
      a
      b c<span>d</span>e
      f
    </div>

div a
     |b c
     span d
     |e  
     |f

div.
   a
   b c <span>d</span> e  
   f

添加屬性：

h1(class="a b", id="c", other="value") ;
id與class能夠放在外面: h1.a.b#c(other="value") 這種狀況下若是沒有寫標籤，默認爲div;

註釋

通常註釋: \\ 註釋在標籤前面，包括子元素在內都會被註釋；若是這行文本不屬於標籤，者註釋這行文本
緩衝註釋：\\- 編譯的時候直接省略

樣式和腳本

//注意空兩格

style.
  body{color:red}   
script.
  var a = 1;

添加變量

模版內部 //若是與外部部定義的變量相同，內部優先

body
  - var name = 'value'
  div(id='#{name}') #{name.toUpperCase()} 

//下面等號中不能再加文本; 上面的方式沒定義變量輸出undefined,下面則留空

body
  - var name = "value"
  div(id=name)= name
//

<body>
  <div id="value">VALUE </div>
</body>

命令行傳入 jade index.jade -P -w --obj '{"name": "value"}'html
json文件外部傳入 jade index.jade -P -w -O index.json
模版外部java

變量轉義

jade 會默認進行變量轉義
非轉義輸出: !#{}或!=;
利用反斜槓：

- var data = 'a'
p \#{data}

//
p #{data}

語句 //注意空格層級別

- var name = {name1: 'value1', name2: 'value2', name3: 'value3'}

 - for(k in name) 
   p #{k}: #{name[k]}

each

//object

 - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}

 - each  value, key in name
    p #{key}: #{value}

//arrasy
 - var name = {name1: 'value1', name2: 'value2', name3: 'value3'}

 - for(k in name) 
   p #{k}: #{name[k]}  

//層疊

- var name = [{id:1, items:['a','b','c']},{id:2, items:['d','e','f']}]

- each section in name
   p=section.id
     each item in section.items
       span=item

while

- var n = 0
ul
  while n < 4
    li= n++

- var lessons = ['jade','node']

if lessons
  if lessons.length > 1
    p #{lessons.join(',')}
      else 
        p lessons'length less than 1
  else
    p no lessons

unless; //if的反轉
switch

- var name = 'jade'

case name
  when 'jade': p #{name} is jade
  when 'node': p #{name} is node

mixin

重複和嵌套

mixin study(name, courses)
      p #{name} study
      ul.courses
        each course in courses
          li= course
    
    mixin group(student)
      h4 #{student.name}
      +study(student.name, student.courses)

    +group({name:'tom',courses:['jade','node']})
    +group({name:'jack',courses:['java','express']})

block代碼塊

mixin team(slogon)
      h4 #{slogon}
      if block
        block
      else
        p no team

    +team('slogon')
      p Good job!

//結果
    <h4>slogon</h4>
    <p>Good job!</p>

傳遞屬性

mixin attr(name)
      p(class!=attributes.class) #{name}

    +attr('attr')(class='magic')

//結果
<p class="magic">attr</p>

//

    mixin attrs(name)
      p&attributes(attributes) #{name}

    +attrs('attrs')(class='magic2', id='attrid')
//結果
<p id="attrid" class="magic2">attrs</p>

//在不肯定傳入參數個數

mixin attrs2(name, ...items)
      ul(class!=name)
        each item in items
          li= item

+attrs2('node','jade','express')