zoukankan      html  css  js  c++  java
  • 模板引擎之-jade

    ##### 首先我们安装jade模板引擎并编译
    `npm install jade --global`
    在项目文件夹下创建一个`index.jade`文件,并且写入
    ```
    doctype
    html
    head
    title imooc jade study
    body
    h1 imooc jade study

    ```
    然后在命令行下执行`jade -P index.jade `参数大写P表示格式化的编译jade文件。
    ##### 一、基础篇
    1、标签
    直接写一个标签名就可以了,标签里面的内容只需要在标签后空一个格写文本。
    2、属性
    所有的属性都可以写在小括号()里面,并且类名和id名可以用简写的方法.classname和#id
    3、注释
    单行注释:// ,多行注释,非缓存注释也就是不会编译到html代码中: //- ,块注释也是用: //-,但是需要将这个符号放在需要注释的代码块上方。
    4、声明变量和数据传递
    `-var course = 'jade'`通过`#{course}`拿到变量,并且可以对变量进行运算`#{course.toUpperCase()}` 一般来说都是从后台传递或者json文件传递数据。

    ##### 二、进阶篇(流程控制)
    1、for
    ```
    - var mooc ={course:'jade',level:'high'}
    - for(var k in mooc)
    p=mooc[k]
    ```
    结果是
    ```
    <p>jade</p>
    <p>high</p>
    ```
    2、each ,可以遍历对象也可以遍历数组,也可以嵌套循环
    ```
    - var classes = ['jade','node','express']
    each k in classes
    p=k
    ```
    结果是
    ```
    <p>jade</p>
    <p>node</p>
    <p>express</p>
    ```
    3、 while
    ```
    - var n = 0
    ul
    while n <= 4
    li= n++
    ```
    结果是
    ```
    <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    ```
    4、if-else

    ##### 三、高级
    1、mixin
    首先定义一个名为study的mixin,然后再用+mixin名使用。
    ```
    mixin study(name,course)
    p #{name}
    ul
    each item in course
    li=item
    +study('luo',['jade','node'])
    ```
    结果是
    ```
    <p>luo</p>
    <ul class="course">
    <li>jade</li>
    <li>node</li>
    </ul>
    ```
    2、虽然mixin可以让我们的代码减少重复,但是只能在单个文件中使用,所以jade又提供了**继承**的方法解决子文件和父文件之间的代码复用的问题。
    使用block关键字,表示需要复用的代码块
    ```
    block des
    p no no no no
    block des
    ```
    结果是
    ```
    <p>no no no no </p>
    <p>no no no no </p>
    ```
    使用extend关键字可以实现继承,通常可以将header和footer的部分放在一个文件中,其他文件继承它们。
    3、模板的包含
    使用的是**include**关键字,它可以引入静态html和css文件和jade文件。如果后缀名有html或者css就不会对引入的文件进行编译,而是直接引入。

  • 相关阅读:
    IDEA 的默认tomcat日志位置以及默认编译后的classes位置
    在linux环境下tomcat 指定 jdk或jre版本
    在Linux环境如何在不解压情况下搜索多个zip包中匹配的字符串内容
    说一下最近找的工作所遇到的一个巨坑,跟各位同行分享一下。(与技术无关)
    Jmeter 深入性能测试进阶-01
    英语
    python 01
    fiddler,ADB, Monkey
    http 协议,SSL证书,http头信息,tcp/http区别,支付功能测试
    扎马步-计算机网络和系统基础知识
  • 原文地址:https://www.cnblogs.com/luoqian/p/6375525.html
Copyright © 2011-2022 走看看