模版继承 ; block,extends ;如果是原生html文件的话，后缀html

//layout.jade

doctype html

html

  head

    meat(charset='utf-8')

    title learn jade

  body

    block content

//inde.jade

extends layout   //这里注意路径

block content

－－－－－

<!DOCTYPE html>

<html>

  <head>

    <meat charset="utf-8"></meat>

    <title>learn jade</title>

  </head>

  <body>

  </body>

</html>

模版包含 ; include

//index.jade

extends layout

block content

  include style

//style.jade

style.

  h2{

    color: #555;

  }

//结果

  <body>

    <style>

      h2{

        color: #555;

      }

    </style>

  </body>

jade api

  • jade.compile(source, options)
var http = require('http');

var jade = require('jade');

http.createServer(function(req, res) {

  res.writeHead(200, {'Content-Type':'text/plain'})

  var fn = jade.compile('div #{course}', {});

  var html = fn({course: 'jade'});

  res.end(html);

}).listen(3000);

console.log('server Start');

//结果

<div>jade</div>
  • jade.compileFile(path, options)
  • jaed.compileClient(source, options)
  • jade.render(source, options)
  var html = jade.render('div #{course}', {course: 'jade render'});

//结果

<div>jade render</div>
  • jade.renderFile(filename, options)
var http = require('http');

var jade = require('jade');

http.createServer(function(req, res) {

  res.writeHead(200, {'Content-Type':'text/html'})

  var html = jade.renderFile('index.jade', {course: 'jade renderFile', pretty: true});

  res.end(html);

}).listen(3000);

console.log('server Start');

过滤器

**安装 npm install --save markdon less coffee-script **

**直接在jade中使用，无需在node文件中引用 **

:markdowm

  #title

style

  :less

    body{

      p{

        color:#ccc;

      }

    }

script

  :coffee

    console.log 'hi'

利用html2jade反编译

  • 安装 npm install --save html2jade
  • 网址编译成jade html2jade http://www.example.com 地址 > example.jade
  • html文件编译成jade html2jade /example/html > example.jade
  • node.js中使用
var html2jade = require('html2jade');

html2jade.converDocument(document, {}, function(err, jade) {

))

jade

缺点

  • 可移植性差; (跨团队合作问题，可以用html2jade弥补)
  • 调试困难
  • 性能不是很出色（项目要求高的话不适合选择）

适用

  • 团队初期追求效率的情况下

jade学习02的更多相关文章

  1. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  2. Java虚拟机JVM学习02 类的加载概述

    Java虚拟机JVM学习02 类的加载概述 类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对 ...

  3. Python学习02 列表 List

    Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...

  4. Android Testing学习02 HelloTesting 项目建立与执行

    Android Testing学习02 HelloTesting 项目建立与执行 Android测试,分为待测试的项目和测试项目,这两个项目会生成两个独立的apk,但是内部,它们会共享同一个进程. 下 ...

  5. Java学习02

    Java学习02 1.导入内部的包 一.在包的下面加入下面一句话: import    java.util.Scanner; 二.在类中 Scanner input=new     Sanner(Sy ...

  6. ThinkPhp学习02

    原文:ThinkPhp学习02 一.什么是MVC                M -Model 编写model类 对数据进行操作 V -View  编写html文件,页面呈现 C -Controll ...

  7. JVM学习02:GC垃圾回收和内存分配

    JVM学习02:GC垃圾回收和内存分配 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. GC垃圾回收和内存分配知识要点Xmind梳理 案例分析1-(G ...

  8. 2018.12.22 Spring学习02

    Spring学习02 1.使用注解配置Spring 1.1 为主配置文件引入新的命名空间(约束) 添加约束文件xxx-xxx-context.xml 添加到主配置文件中 选择刚才的context.xm ...

  9. 天脉2（ACoreOS653）操作系统学习02

    天脉2(ACoreOS653)操作系统学习02 一.分区内通信方法 分区内通信指同一分区内进程之间的通信.ARINC 653定义的分区内进程通信机制,包括:缓存队列(Buffers-Queue).黑板 ...

随机推荐

  1. WCF错误：413 Request Entity Too Large

    在我们用WCF传输数据的时候,如果启用默认配置,传输的数据量过大,经常会出这个错误. WCF包含服务端与客户端,所以这个错误可能出现在服务端返回数据给客户端,或客户端传数据给服务端时. 1. 服务端返 ...

  2. JS 基本语句

    1.循环中必备的条件: 初始值  循环条件  状态改变   循环体 for(初始值  循环条件  状态改变)    {       循环体     } for(var i=0;i<100;i++ ...

  3. 【leetcode】Subsets II (middle) ☆

    Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...

  4. 【leetcode】Binary Search Tree Iterator（middle）

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  5. C/S love自编程序

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. 无限轮播的N＋2 策略

    N张照片把contentsSize设置为N+2个图片的宽度,例子如下,两端填充如图,当处于一端时,且即将进入循环状态的时候,如第二张图,从状态1滑动到状态2,在滑动结束的时候,将当前的位置直接转到状态 ...

  7. 如何用Jquery判断在键盘上敲的哪个按键

    有时候我们需要判断我们在键盘上敲了哪个键,这个需要查询下键盘上的键对应的值是多少,比如Enter键是13. 下面是Jquery代码,别忘了引用Jquery包哈. <script type=&qu ...

  8. 解决xib约束冲突

    I would recommend to debug and find which constraint is "the one you don't want". Suppose ...

  9. JavaScript对象与数组

    一．Object 类型到目前为止,我们使用的引用类型最多的可能就是 Object 类型了.虽然 Object 的实例不具备多少功能,但对于在应用程序中的存储和传输数据而言,它确实是非常理想的选择.创建 ...

  10. MVA Universal Windows Apps系列学习笔记1

    昨天晚上看了微软的Build 2015大会第一天第一场演讲,时间还挺长,足足3个小时,不过也挺震撼的.里面提到了windows 10.Microsoft edge浏览器.Azure云平台.Office ...