jade 入门

时间：2023-03-08 23:56:29
jade 入门

推荐网站：

　    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 西安交通大学


页面中的显示如下：
jade 入门

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

doctype html

html

head

    title 朱振伟

body

    h1 hello

    //- 这是一行注释，它不会输出到html代码中

    p 西安交通大学


html代码如下：

jade 入门

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

多行注释： （输出到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如下：

jade 入门

文本

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

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

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

doctype html

html

head

    title 朱振伟

body

    p 这是单行文本

    p

        | 这是管道文本

        | 这是管道文本

        | 这是管道文本

    p.

        这是多行文本

        这是多行文本

        这是多行文本

    p

        这不符合要求

        这不符合要求

        这不符合要求

效果如下：

jade 入门

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

js代码（变量）

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

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

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

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

doctype html

html

head

    title 朱振伟

body

    - var name = "<JohnZhu>";

    p #{name}

    h2= name

    h3!= name

最终输出如下：

jade 入门

条件语句

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]}

        -}

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

doctype html

html

head

    title 朱振伟

body

    - var arr = ["hello", "hi", "morning"], n = ;

    ul

        while n < arr.length

            li= arr[n++]

最终的输出如下：

jade 入门

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

遍历语句

doctype html

html

head

    title 朱振伟

body

    - var arr = [, , ];

    - for value, index in arr

        p= value + "  " + index

运行结果如下：

jade 入门

Mixins

doctype html

html

head

    title 朱振伟

body

    mixin list

        ul

            li foo

            li bar

            li foo_bar

    +list

    +list

最终的html如下：

jade 入门

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

doctype html

html

head

    title 朱振伟

body

    mixin list(name)

        li.pet= name

    ul

        +list('dog')

        +list('cat')

        +list('pig')

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

效果如下:

jade 入门

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

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和名称就可以定义、改写原来的内容

　　jade 入门

　　

除了上面的继承方式，我们还可以通过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和名称就可以定义、改写原来的内容

最终得到的效果如下：
jade 入门

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

结束

相关文章