模版继承 ; 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. EF-实体更新

    1.数据库表增加字段,EF更新视图后,对应的实体对象没有新增的字段原因:edmx文件右键属性设置了 保存时转换相关的文本模板-false...正确的应该是rue 2. 更改视图后(或者更改字段类型?) ...

  2. 【hadoop2.6.0】利用JAVA API 实现数据上传

    原本的目的是想模拟一个流的上传过程,就是一边生成数据,一边存储数据,因为能用上HADOOP通常情况下原本数据的大小就大到本地硬盘存不下.这一般是通过把数据先一部分一部分的缓冲到本地的某个文件夹下,hd ...

  3. PHP安全编程：不要让不相关的人看到报错信息

    没有不会犯错的开发者,PHP的错误报告功 能可以协助你确认和定位这些错误,可以提供的这些错误的详细描述,但如果被恶意攻击者看到,这就不妙了.不能让大众看到报错信息,这一点很重要.做到这一 点很容易,只 ...

  4. 二叉树计数（codevs 3112）

    题目描述 Description 一个有n个结点的二叉树总共有多少种形态 输入描述 Input Description 读入一个正整数n 输出描述 Output Description 输出一个正整数 ...

  5. IPv6地址介绍

    IPv6地址介绍 2008 年 04 月 10 日 1． 认识IPv6地址 IPv4地址是类似 A.B.C.D 的格式,它是32位,用\".\"分成四段,用10进制表示:而IPv6 ...

  6. CSS3实现文字抹开特效

    CSS: .column-title { color: #9b9b9b; text-shadow: 1px 1px #d4d4d4;}.column-title:hover { color: #5a5 ...

  7. Xcode开发中的6个小技巧

    Xcode是iPhone和iPad开发者用来编码或者开发iOS app的IDE.Xcode有很多小巧但很有用的功能,很多时候我们可能没有注意到它们,也或者我们没有在合适的水平使用这些功能简化我们的iO ...

  8. 关于logcat日志

    最近学习android,碰到了logcat,个人总结一下. 当不出日志是解决办法: ProjectMenu---后台设置----LOG设置---LOG开关 Logcat(deprecated)和Log ...

  9. Android 注解工具 ButterKnife

    Butter Knife 是 Android 视图字段和方法绑定,使用注解处理来生成样板代码. 主要特性: 在字段使用 @FindView消除findViewById调用 使用 @FindViews在 ...

  10. MYSQL建表语法（主键，外键，联合主键）

    在看<Learning SQL>第二版, 慢慢打实SQL的基础. 建表一: ), lname ), gender ENUM(), city ), state ), country ), p ...