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")