node模版引擎Jade学习笔记

最新推荐文章于 2024-06-05 09:49:13 发布

vcxiaohan2

最新推荐文章于 2024-06-05 09:49:13 发布

阅读量2.7k

点赞数 1

分类专栏： node 文章标签：模板引擎 jade node

本文链接：https://blog.csdn.net/u011500781/article/details/53688425

版权

node 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习教程

带你学习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
    div
      //id class 属性语法
      p#a.b(a='a', b=111) 222333
    //换行文本语法
    div.
      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)

模版引用include和模版继承extends使用示例
- index.jade(主页模版) layout.jade(布局模版) head.jade(头部模版) foot.jade(尾部模版) 此4个文件为同级目录
- head.jade
```
div.head
  p this is head
```
- foot.jade
```
div.foot
  p this is foot
```
- layout.jade
```
doctype html
html
  head
    meta(chatset="utf-8")
  body
    include head
    block content
    include foot
```
- index.jade
```
extends layout
block content
  div.content
    p this is content
```
- index.html(由index.jade编译)
```
<!DOCTYPE html>
<html>
  <head>
    <meta chatset="utf-8">
  </head>
  <body>
    <div class="head">
      <p>this is head</p>
    </div>
    <div class="content">
      <p>this is content</p>
    </div>
    <div class="foot">
      <p>this is foot</p>
    </div>
  </body>
</html>
```
- 使用 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 http://www.baidu.com > baidu.jade
- 转换本地文件 html2jade index.html > index.jade
- 使用 node 运行
```
var html2jade = require('html2jade')

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

vcxiaohan2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
node模版引擎Jade学习笔记

学习教程带你学习Jade模板引擎注意事项如果想直接运行.jade文件，需要全局安装 jade -> npm install jade –save-devjade index.jade -P -w -O index.json 以上命令的意思是：将index.jade文件编译成-P(格式化)、-w(实时监控)、-O index.json(引入index.json文件数据)的html文件一定要使
复制链接

扫一扫

专栏目录