node模版引擎Jade学习笔记

学习教程

注意事项

如果想直接运行.jade文件，需要全局安装 jade -> npm install jade –save-dev

jade index.jade -P -w -O index.json 以上命令的意思是：将index.jade文件编译成-P(格式化)、-w(实时监控)、-O index.json(引入index.json文件数据)的html文件

一定要使用空格来缩进(如果使用Tab键，很容易出问题)

建议使用p #{obj}的语法(p #{obj} #{obj}正常编译)，而不是p= obj的语法(p= obj= obj会报错)

关键词前面一律不要加-(如:each、while、else…)

可以在sublime中安装jade代码高亮插件

代码示例

基础语法

doctype html
html
  head
    meta(charset='utf-8')
    title test
    //样式语法
    style.
      body {
        background: red;
      }
  body
    p
      //id class 属性语法
      p#a.b(a='a', b=111) 222333
    //换行文本语法
    p.
      111
      222
    //声明变量
    - var obj1 = {name: 'hvb'}
    - var job = '<span>worker</span>'
    //对象取值 安全转义 设置属性
    p(id='obj1.name', class=obj1.name) #{obj1.name} #{age} #{job} !{job} \#{}
    - var obj2 = {a: 1, b: 2}
    - var obj3 = [11, 22]
    - var obj4 = [{name: 'hvb', age: [1, 2]}, {name: 'hvj', age: [3, 4]}]
    //for in 循环
    - for (var k in obj2)
      p #{obj2[k]}
    //each 循环遍历对象
    each v, k in obj2
      p #{k}: #{v}
    //each 循环遍历数组
    each v, k in obj3
      p #{k}: #{v}
    //each 循环嵌套
    each v1, k1 in obj4
      p #{v1.name}
      //3元运算
      each v2, k2 in v1.age
        span #{v2%2 ? v2+'奇数' : v2+'偶数'}
    - var num = 0
    //while 循环
    while num < 3
      p #{num++}
    - var index = 2
    //if 判断
    if index < 2
      p 111
    else if index >= 2 && index < 4
      p 222
    else
      p 333
    //unless 判断
    unless index != 3
      p 444
    //switch 判断
    case index
      when 1
        p 1
      when 2
      when 3
        p 3
      default
        p 0
    //
    - var a = 'qqq'
    p(b=a) #{a}
    //mixin 传参 设置属性(繁琐)
    mixin animate(name, pet)
      p(id=attributes.id, class=pet) this is #{name} #{attributes.id}
    +animate('dog', 'dogs')(id='aDog')
    //mixin 设置属性(简便)
    mixin animate2(name)
      p&attributes(attributes) #{name}
    +animate2('sheep')(id='sheep', class='sheep')
    //mixin 传参(不固定个数)
    mixin animate3(...obj)
      p #{obj}
    +animate3(1, 2, 3)
    //mixin 嵌套
    mixin cat(name, say)
      +animate(name)
      p it can #{say}
    +cat('cat', 'miao~')
    //mixin 代码块
    mixin pig
      if block
        block
        p there are blocks
      else
        p no block
    +pig
      p one block
      p other block
    //定义继承
    block desc
      p this is block
    //引用继承
    block desc
  script.
    var a = 1;
    var b = 2;
    console.log(a+b)

模版继承 extends

nav.jade

p this is nav

index.jade(和nav.jade同级目录)

extends nav

使用 node 编译

var jade = require('jade')

// compile 编译
var html1 = jade.compile('p #{name}', {})({name: 'hvb'})
console.log('html1', html1)

// render 渲染
var html2 = jade.render('p #{name}', {name: 'hvj'})
console.log('html2', html2)

// rendFile 读取文件渲染
var html3 = jade.renderFile('views/index.jade', {name: 'hvb', pretty: true})
console.log('html3', html3)

html2jade(html转jade插件)

全局安装 npm install html2jade -g

局部安装 npm install html2jade –save-dev

保存网页为jade文件(这个有问题。如何解决请告知) html2jade https://www.baidu.com > baidu.jade

转换本地文件 html2jade index.html > index.jade

使用 node 运行

var html2jade = require('html2jade')

// html 转成 jade
html2jade.convertHtml('<p><p>jade</p></p>', {}, function(err, jade) {
    console.log(jade)
})