zoukankan      html  css  js  c++  java
  • 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即可。

    结束

  • 相关阅读:
    linux基础
    hadoop部署
    django.db.utils.OperationalError: cannot ALTER TABLE "servers_ecs" because it has pending trigger events
    理解go的闭包
    go time模块
    Android 安全性和权限
    Android permission
    AndroidManifest.xml--android系统权限定义
    关于Android4.x系统默认显示方向各种修改
    跨域解决方案
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6755390.html
Copyright © 2011-2022 走看看