代码的复用是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. django model的update时auto_now不被更新的原因

    gmt_create自动添加auto_now_add:gmt_modify自动更新auto_now class CommonInfo(models.Model): """ ...

  2. cisco 各类子网的划分

    C类地址子网划分 /25 子网掩码为128: 1位的取值为1,其他7位的取值为0(10000000): 块大小128: (256-128): 2个子网,每个子网最多包含126台主机: /26 子网掩码 ...

  3. redis 启动配置文件加载报错 service redis does not support chkconfig

    # chkconfig: # description:Redis is a persistent key-value database 网上资料 上面的注释的意思是,redis服务必须在运行级2,3, ...

  4. 【转】git2.9.2使用总结

    git2.9.2使用总结 1.系统:Windows7 2.git版本:2.9.2 由于我的git版本是最新版,后面我出现的坑就是最新版本的问题. 3.托管环境:开源中国的码云 . 使用步骤 1.在码云 ...

  5. [学习笔记] Blender layout 视图切换

    layout 数字键5  --- 正交视图/透视图 切换 数字键0 -- 摄像机视图 数字键7 -- 顶视图 数字键1 --- 前视图 数字键3 --- 右视图 ctrl +数字键3 --- 左视图 ...

  6. 乐字节Java反射之三：方法、数组、类加载器和类的生命周期

    本文承接上一篇:乐字节Java发射之二:实例化对象.接口与父类.修饰符和属性 继续讲述Java反射之三:方法.数组.类加载器 一.方法 获取所有方法(包括父类或接口),使用Method即可. publ ...

  7. Acquire and Release Fences

    转载自:   http://preshing.com/20130922/acquire-and-release-fences/ Acquire and release fences, in my op ...

  8. ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file '/u01/app/oracle/product/19.2.0/db_1/dbs/initsanshi.ora'报错

    本人是在Linux安装Oracle19C之后,启动数据库时,XSHELL命令行窗口报的该错误,看了几个解决方案之后,总结如下 从字面的意思来看,是在dbs目录当中没有这个initsanshi.ora文 ...

  9. 电子防抖(EIS)无效的相关修改

    [DESCRIPTION] 电子防抖(EIS)无效的相关修改 [SOLUTION] 电子防抖(EIS)无效,根据不同的版本,可以先查看是否已经做了相关修改.1. MT6580/MT6735平台请参考如 ...

  10. Vue中常用知识点demo

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...