代码的复用是jade非常突出的一个设计目标，jade不仅仅通过mixin来复用代码，他在文件的组织能力上也非常突出，说白了，就是继承和包涵
 
block定义的方式和调用的方式
block desc

　　p jade study

block desc

block desc
=>
<p>jade study</p>

<p>jade study</p>

<p>jade study</p>
继承
layout.jade
html

　　head

　　　　meta(charset='utf-8')

　　　　title layout

　　body

　　　　block descript

　　　　　　p from layout

　　　　block content

index.jade

extends layout.jade

block content

　　block descript

　　　　p desc from index

　　h1 mixin

　　mixin lession

　　　　p jade study

　　+lession
=>
index.html
<html>

　　<head>

　　　　<meta charset="utf-8"/>

　　　　<title>layout</title>

　　</head>

　　<body>

　　　　<p>desc from index</p>

　　　　<p>desc from index</p>

　　　　<h1>mixin</h1>

　　　　<p>jade study</p>

　　</body>

</html>
这里extends，多个文件可以复用，最大的减少代码的重复，block也是就近原则

jade继承的更多相关文章

  1. jade模板引擎

    最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...

  2. jade 入门

    推荐网站: jade官网 html在线转换为jade 参考文章1 参考文章2     node的模板常用的有两个,一个是ejs,另外一个就是jade,相对来说,ejs更容易理解,像原生的html,很多 ...

  3. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  4. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  5. jade学习02

    模版继承 ; block,extends ;如果是原生html文件的话,后缀html //layout.jade doctype html html head meat(charset='utf-8' ...

  6. Jade之Template Inheritance

    Template inheritance jade支持通过关键字block和extends来实现模板继承. 比如,在layout.jade写上如下代码 html head title My Site ...

  7. Jade之Extends

    Extends jade允许多个jade文件继承一个jade文件. jade: //- layout.jade doctype html html head block title title Def ...

  8. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  9. jade复用

    jade复用说白了就是模板的继承. 使用 block 标识符,设置一个可修改的代码片段 layout.jade doctype html html head block title title Def ...

随机推荐

  1. gitblit git SERVER window 安装配置 hook post-receive 自动部署

    项目中使用的是gitblit windos版 1.安装 需要JAVA SDK http://gitblit.com/Download Gitblit GO (Windows) 下载后,解压缩,放到例如 ...

  2. linux SSH 登录

    1:  远程连接linux server:       ssh -p22 root@192.168.XXX.XXX 然后输入密码. 2: 免密码的方式: A: sudo -i B: ssh-keyge ...

  3. APK在Android Studio下如何签名

    apk签名的意义 Android系统要求每一个Android应用程序必须要经过数字签名才能够安装到系统中,也就是说如果一个Android应用程序没有经过数字签名,是没有办法安装到系统中的! Andro ...

  4. 导航current背景

    ========================================简单一点的 var locationUrl = location.href.toLowerCase(); //导航cur ...

  5. 按CSS查询一个元素

    按CSS查询 示例1 查询一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  6. EventBus使用的坑

    最近使用eventbus发送通知,在想该怎么携带List集合数据.于是尝试直接发送List. 使用一次,正常接收.使用两次,出现类转换异常.原来在接收List类型的消息时,并不会管List内的泛型,是 ...

  7. CentOS7.5下安装nginx --项目部署

    1.安装ngnix一些依赖包 [root@VM_39_157_centos ~]# yum -y install gcc gcc-c++ openssl-devel pcre-devel httpd- ...

  8. （二）javaweb开发的常见概念总结（来自那些年的笔记）

    目录 WEB开发相关知识 WEB服务器 Tomcat服务器 WEB应用程序 配置WEB应用 配置缺省的WEB应用 Web设置首页 web.xml文件 配置虚拟主机 配置https连接器 为我们的网站, ...

  9. Rabbitmq C++客户端 Rabbitmq Client

    概述 最近项目消息队列服务选用了rabbitmq,server端用的C++开发的,于是需要开发rabbitmq的c++客户端,国际惯例先百度了一圈,然后github搜了一圈,竟然发现排名靠前的需要付费 ...

  10. wordpress 图片上传时发生了错误，请稍后再试 的解决办法

    前一天网站还是好好的,仅一天过后就显示图片无法上传,百思不得其解 上下百度,大多数帖子提供的解决办法对我都不适用,继续搜,最后发现一篇帖子中提到是wp-config的编码格式问题 想到昨天刚好修改了下 ...