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 1 
 li Item 2
 li Item 3

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

建议统一使用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 = [1, 2, 3];
    ul 
        -for (var i = 0; i < array.length; i++) {
            li hello #{array[i]}
        -}

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

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

最终的输出如下:

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

遍历语句

doctype html
html
head
    title 朱振伟
body
    - var arr = [5, 10, 15];
    - 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',"1","yellow")
        +list('cat',"2","blue")
        +list('pig',"3","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',"1","yellow")
        +list('cat',"2","blue")
        +list('pig',"3","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即可。

结束

原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6755390.html