安装

npm install jade

标签、id && class选择器

div#container.test

文本

// 第一种写法
div 这是一段文本

// 第二种写法
div.
    这是一段文本

// 第三种写法
div
    | 这是一点文本

注释

// 这是一段注释

//- 这段注释不会被显示

case

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

属性

// 属性写在括号中
a(href="test.html",title="test")

DOCTYPE

!!!

或者

!!! 5

或者

!!! html

或者

doctype html

或者

doctype basic

过滤器

代码

- var obj={'name':'llz','age':'18','sex':'man'}
- for(var val in obj)
    p #{val}

循环

- var arr=['llz','18','man']
each a in arr
    p #{a}

条件语句

- var users=[{'name':'llz','role':'admin'},{'name':'zx','role':'user'}]
for user in users
    if (user.role=='admin')
        p #{user.name} is admin
    else
        p #{user.name}

模板继承

// 父模板layout.jade
doctype
html
    head
        meta(charset='utf-8')
        title hello jade
    body
        block header
        block content
        block footer

// 子模板
extends layout.jade

block header
    p this is header
block content
    p this is content
block footer
    p this is footer

前置，追加代码块

block append content
    p this is append content

包含

// 被包含的文件head.jade
head
    meta(charset="utf-8")
    title test
    link(href='global.css')
    script(src='jquery.js')

// 主文件
doctype
html
    include head.jade
        script(src='common.js')
    style
        include index.css
    script
        include index.js

mixins

mixin list
    ul
        li 项目1
        li 项目2
        li 项目3

// 调用
mixin list