[Jade模板引擎]官網案例

官網案例地址 http://naltatis.github.io/jade-syntax-docs/

 

1. 基本用法

doctype html
html
    head
        title my jade template
    body
        -var name = "Bob"
        h1 Hello #{name}

定義了一個變量name, 而後使用#{name}格式來讀取變量name值

變量定義的語法  - var variable = value

標籤內容放在標籤名後面，用一個空格隔開

 

2. id & classes

#content
    .block
        input#bar.foo1.foo2

id使用#  class使用.  針對div能夠省略掉div標籤名

 

3. Nesting 內聯代碼

ul#books
    li
        a(href="#book-a") book A
    li
        a(href="#book-b") book B

// 等價於下面的內聯寫法

ul#books
    li: a(href="#book-a") book A
    li: a(href="#book-b") book B

內聯寫法能夠節省代碼行數

 

4. 大段文本

// 文本中使用變量
- var book = {"name": "Hello", price: 12.99}
h1 foo
h2= book.name
h3 "#{book.name}" for #{book.price} $

解析變量的方式，通常情形使用 #{} 的語法形式。 若是該標籤只有變量一個值，能夠使用 tag= 的語法來直接解析。

針對p標籤中的大段文本，使用p.表示後面的內容強制解析，在單獨某行前面使用|表示這一行須要解析。須要注意的是，若是使用了原生HTML標籤，這表示強制顯示HTML標籤格式內容

p.
    foo bar
    hello world
    <span>hello jade<span>

p
    | foo bar
    | hello world
    <span>hello jade<span>

 

5. 變量建立和使用

// 使用 - var variable 的語法進行變量聲明
- var foo = "hello react"
h1= foo

// 變量聲明也能夠使用字符串拼接
- var book = {name: "hello"}
- var foo = book.name + 'world'
h1= foo

#{name} ===  = name

!{name} ===  != name

 

6. 迴避變量轉義

使用!{name}或者!=name能夠避免特殊字符轉義，如 < > 等等

- var name = "Hello <em>World</em>"
li Hello <em>World</em>
li= name
li!=name
// !=name 表示特殊字符不會轉義，所以會顯示 <>

 

7. 標籤屬性

input(type="text", placeholder="your name")

- var type = "text"
- var name = "bob"
input(type=type, value="Hello #{name}")

input(checked=true, disabled=false)
input(checked)

 

8. 文檔註釋

單行註釋 //

多行註釋 // 可是要放在多行代碼塊前面一行且高出一級

不可見註釋 //- 生成後的html文件中註釋不可見

// single line comment
//- invisible single line comment

// block comment
    h1 hello world
    p how to protect envrionment

//- invisible block line comment
    h2 how are you?

 

9. 流程控制--條件判斷

- var name = "bob"
if name == 'bob'
    h1 Hello #{name}
else
    h1 My name is #{name}


// unless expr ===  if(!(expr))
- var errors = false
unless errors
    p no errors

 

10. 流程控制--for each循環控制

- var books = ["nodejs in action", "vue in action", "react in action"]

select
    each book, i in books
        option(value=i) Book #{book}

// 生成一個select表單元素

- var books = []
ul
    for book in books
        li= book
    else
        li sorry, no books

for 能夠和 else 一塊兒使用

 

11. 流程控制--case多重選擇

- var name = "Bob"
case name
    when "Bob"
        p Hi Bob!
    when "Alice"
        p Howdy Alice!
    default
        p Hello #{name}!

case 和 when 一塊兒使用

 

12. mixin

// 帶參數的mixin
mixin book(name, price)
    li #{name} for #{price} $

ul#books
    +book("Book A", 12.99)
    +book("Book B", 5.99)

mixin的使用方法就是前面加上+

 

// 帶參數，帶標籤屬性的mixin
mixin book(name)
    div&attributes(attributes)=name

+book("Book A")#first
+book("Book B")(title="book b")
+book("Book C").last