jade 入门

推荐网站：

• jade官网
• html在线转换为jade
• 参考文章1
• 参考文章2

　    node的模板常用的有两个，一个是ejs，另外一个就是jade，相对来说，ejs更容易理解，像原生的html，很多模板都是类似的，但要写的会比较复杂一些。 而jade的好处是更简洁，比如不使用<>之类的标签，而是用缩进，需要运行的js代码之前只有 - 即可，而不需要像ejs的<%  %>麻烦，如果要比较的话，可以看到jade和python是类似的，都是追求简洁的模范。

在Express中调用jade模板引擎

var express = require('express');
var app = express();
app.set('views', __dirname);
app.set('view engine', 'jade');
app.get('/', function (req, res) {
    res.render('index');
});
app.listen(3000, function () {
    console.log("Server is running at localhost:3000");
});

在当前目录下建立jade文件，

doctype html
html
head
    title 朱振伟
body
    h1 hello

这样在访问3000端口时就可以成功地渲染到页面上了。

标签

　　在jade中声明文档类型只需要是下面这种简洁的形式：

doctype html

　　

　　在jade中创建一个列表，只需要是下面的形式：

ul
 li Item
 li Item
 li Item 

　　即不需要使用<>来包含标签，不需要闭合标签，不需要配对。 但是，正确的缩进是非常必要的。

建议统一使用4个空格作为缩进标准。当然，只要缩进也是对的。

 

注释

　　在jade中注释分为单行注释和多行注释，并且每种注释又分为在编译后显示注释和不显示注释。下面分别说明

单行注释：（在生成的html中不显示）

doctype html
html
head
    title 朱振伟
body
    h1 hello
    // 这是一行注释，它会输出到html代码中
    p 西安交通大学

页面中的显示如下：

单行注释：（不显示在html代码中）

doctype html
html
head
    title 朱振伟
body
    h1 hello
    //- 这是一行注释，它不会输出到html代码中
    p 西安交通大学

html代码如下：

可以看到，是否输出的区别仅仅在于是否有 - 。

多行注释： （输出到html中）

doctype html
html
head
    title 朱振伟
body
    h1 hello
    //
        这是多行注释，它不会输出到html代码中
        多行注释要保持同样的缩进
        再来一行
    p 西安交通大学

多行注释：（不输出到html中）

doctype html
html
head
    title 朱振伟
body
    h1 hello
    //-
        这是多行注释，它不会输出到html代码中
        多行注释要保持同样的缩进
        再来一行
    p 西安交通大学

同样，区别仅在于是否有 - 。

属性

下面是属性最常用的方法，多个属性之间使用逗号隔开。

doctype html
html
head
    title 朱振伟
body
    h1 hello
    input(type="text",placeholder="search",id="search")

由于class和id是非常常用的属性，所以jade使用sublime中Emmet的用法。

doctype html
html
head
    title 朱振伟
body
    div.header
        h2#title.font-bigger hello
        p#content.font-big  hello,world

html如下：

文本

单行文本 - 直接在标签后面添加文字

管道文本 - 换行后添加|符号。

多行文本 - 在标签后添加 . 然后换行

doctype html
html
head
    title 朱振伟
body
    p 这是单行文本
    p
        | 这是管道文本
        | 这是管道文本
        | 这是管道文本
    p.
        这是多行文本
        这是多行文本
        这是多行文本
    p
        这不符合要求
        这不符合要求
        这不符合要求

效果如下：

但是在后台我们可以看到最后的p是不符合要求的，会报错：

js代码（变量）

- 位于句首，只会在后台执行代码，而不会显示

#{}  会将变量等显示出来

= 会将变量显示，对特殊字符转义

!= 会将变量显示，对特殊字符也不会转义

doctype html
html
head
    title 朱振伟
body
    - var name = "<JohnZhu>";
    p #{name}
    h2= name
    h3!= name

最终输出如下：

条件语句

doctype html
html
head
    title 朱振伟
body
    - var name = "JohnZhu";
    - if (name == "JohnZhu")
        h2 你的名字 --- JohnZhu
    - else
        h2 你的名字？你的名字？

最终在页面渲染的是 你的名字 --- JohnZhu

分支语句

doctype html
html
head
    title 朱振伟
body
    - var name = "JohnZhu";
    case name
        when "JohnZhu"
            p JohnZhu
        when "htt"
            p htt
        default
            p it is default 

最后显示的是 JohnZhu

循环语句

doctype html
html
head
    title 朱振伟
body
    - var array = [, , ];
    ul
        -for (var i = ; i < array.length; i++) {
            li hello #{array[i]}
        -}

即使用 - 之后只会在服务器端运行，而不会渲染，最终的输出如下所示：

doctype html
html
head
    title 朱振伟
body
    - var arr = ["hello", "hi", "morning"], n = ;
    ul
        while n < arr.length
            li= arr[n++]

最终的输出如下：

可以看出while的特殊之处在于它并没有在前面使用 - ，否则会出错。

遍历语句

doctype html
html
head
    title 朱振伟
body
    - var arr = [, , ];
    - for value, index in arr
        p= value + "  " + index

运行结果如下：

Mixins

doctype html
html
head
    title 朱振伟
body
    mixin list
        ul
            li foo
            li bar
            li foo_bar

    +list
    +list

最终的html如下：

当然，这是最简单的混合宏。 更加使用的是使用参数传递 。

doctype html
html
head
    title 朱振伟
body
    mixin list(name)
        li.pet= name

    ul
        +list('dog')
        +list('cat')
        +list('pig')

(注意：只要是使用MIXINS， 就必须使用 + 来调用)

效果如下:

此外，还可以使用 ... 来表示数量不定的参数。

doctype html
html
head
    title 朱振伟
body
    mixin list(name,...items)
        li.pet= name
        - each item in items
            li.pet= item

    ul
        +list('dog',"","yellow")
        +list('cat',"","blue")
        +list('pig',"","orange")

即使用...代表未知的参数，使用items表示这些位置参数的集合， 然后利用jade中的each方法来遍历其中的每一个参数即可。

includes

　　实现高度复用的一种方式就是将代码片段保存在不同的文件中，当我们需要的时候时候include引入即可。

　　如： header.jade中的内容如下：

head
    title 这一部分是通过include得到的

　　footer.jade中的内容如下：

div.footer 这是footer, 这是通过include得到的。

　　index.jade中的内容如下：

doctype html
html
include ./header.jade
body
    mixin list(name,...items)
        li.pet= name
        - each item in items
            li.pet= item

    ul
        +list('dog',"","yellow")
        +list('cat',"","blue")
        +list('pig',"","orange")
    include ./footer.jade

　　在index.jade中，通过include即可将其他文件的代码引入，达到组合使用的目的。

继承

　　jade使用extends来继承代码，与include纯粹的引用不同，extends可以修改代码。其中，现在layout.jade中设置block + 名称， 其中block是关键字。layout.jade如下所示：

doctype html
html
head
    title MYJADE
body
    block content

　　index.jade继承了layout.jade，内容如下：

extends ./layout.jade

block content
    p 这是通过extends得到的。
    h4 通过关键词block和名称就可以定义、改写原来的内容

　　

　　

除了上面的继承方式，我们还可以通过prepend和append来决定添加的位置。

如layout.jade的内容如下：

doctype html
html
head
    title MYJADE
body
    block content
    p  这是body下的内容

index.jade的内容如下：

extends ./layout.jade

block prepend content
    p 这是通过extends得到的。
    h4 通过关键词block和名称就可以定义、改写原来的内容

最终得到的效果如下：

如果说我们需要将index.jade的内容放在最后，使用append即可。

结束