jade模板

doctype html
html
head
    style.
        div{
            float:left
        }
        h2
    script.
        var a = 1;
body
    p.
        hello jade
        hello jade
    - var user = { description: '我喜歡貓' }

    //- if 判斷
    #user.user
    if user.description
        h2 描述
        p.description= user.description
    else
        h1 描述
        p.description 用戶無描述

    //- for 循環
    - var array = [1,2,3]
    ul
        - for (var i = 0; i < array.length; ++i) {
            li hello #{array[i]}
        - }

    //- each
    ul
        each val, index in ['西瓜', '蘋果', '梨子']
            li= index + ': ' + val
    - var friends = 10

    //- Case
    case friends
        when 0
            p you have no friends
        when 1
            p you have a friend
        default
            p you have #{friends} friends

    //- 申明可重用的塊
    mixin list
        ul
            li foo
            li bar
            li baz
    //- 調用
    +list()
    +list()

    mixin pets (pets)
        ul#pets.pets
            - each val, key in pets
                li #{ val + ':' + key }
    //- 調用
    +pets(['cat', 'dog', 'pig'])

    mixin article(title)
        .article
            .article-wrapper
                h1= title
                //- block 爲 jade 關鍵字表明外部傳入的塊
                if block
                    block
                else
                    p 該文章沒有內容
                
    +article('Hello world')
    +article('Hello Jade')
        p 這裏是外部傳入的塊
        p 再寫兩句

    mixin link(href, name)
        a(class!=attributes.class, href=href)= name
    +link('/foo', 'foo')(class="btn")