jade复用说白了就是模板的继承。

使用 block 标识符，设置一个可修改的代码片段

layout.jade

  1. doctype html
  2. html
  3.   head
  4.     block title
  5.       title Default title
  6.   body
  7.     block content

test.jade 使用extends继承layout.jade，block后对应代码片段的文字

  1. extends ./layout.jade
  2.  
  3. block title
  4.   title Article Title
  5.  
  6. block content
  7.   h1 My Article

生成html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Article Title</title>
  5.   </head>
  6.   <body>
  7.   </body>
  8. </html>

也可以通过include 引入

  1. include ./layout.jade

如果想要追加代码片段，可以使用 append 和 prepend 指令。append 用于在原有代码片段之后追加，prepend 用于在原有代码片段之前追加。

layout.jade

  1. doctype html
  2. html
  3.   head
  4.     block title
  5.       title Default title
  6.   body
  7.     block content
  8.         p hello

test.jade

  1. extends ./layout.jade
  2.  
  3. block title
  4.   title Article Title
  5.  
  6. block append content
  7.   h1 My Article

输出html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Article Title</title>
  5.   </head>
  6.   <body>
  7.     <p>hello</p>
  8.     <h1>My Article</h1>
  9.   </body>
  10. </html>

jade复用的更多相关文章

  1. nodejs学习（二） ---- express中使用模板引擎jade

    系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...

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

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

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

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

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

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

  5. 模板引擎之-jade

    ##### 首先我们安装jade模板引擎并编译`npm install jade --global`在项目文件夹下创建一个`index.jade`文件,并且写入```doctypehtml head ...

  6. Jade简单教程

    Express框架里内嵌了Jade模板引擎.正好项目里也要用到,本篇整理了下Jade的相关用法. 安装与执行 标签和属性 多行文本 变量 语句 Mixin 模板 注释 过滤器 安装与执行 安装很简单: ...

  7. Express全系列教程之(十)：jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  8. jade 入门

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

  9. jade安装及基本语法使用

    一.cmd安装jade: cnpm install -g jade //cnom install jade -g与上面使用效果一致. 二.jade命令行中使用: 使用cmd: jade index.j ...

随机推荐

  1. office2010永久的密钥

      1.Office Professional Plus 2010: 6QFDX-PYH2G-PPYFD-C7RJM-BBKQ8 BDD3G-XM7FB-BD2HM-YK63V-VQFDK   2.O ...

  2. SPOJ287 Smart Network Administrator（最大流）

    题目大概是说,一个村庄有n间房子,房子间有m条双向路相连.1号房子有网络,有k间房子要通过与1号房子相连联网,且一条路上不能有同样颜色的线缆,问最少要用几种颜色的线缆. 二分枚举颜色个数,建立容量网络 ...

  3. java不用jni，也可以获得当前系统性能信息

    最近做个项目,就是要取得cpu占有率等等的系统信息,一开始以为要用动态链接库了,但后来发现可以像下面这样做,不去调用jni,这样省去了很多看新技术的时间o(∩_∩)o... 在Java中,可以获得总的 ...

  4. Shell 之数组 [转]

    本文也即<Learning the bash Shell>3rd Edition的第六章Command-Line Options and Typed varilables之读书笔记之三,但 ...

  5. List 中对象属性排序

    有几个方法可以实现:让 Student 实现Comparable接口,或是实例化一 个比较器, 现在用 Comparator 比较器实例来做一个:ComparableTest.java import  ...

  6. MySQL 记录不存在时插入 记录存在则更新的实现方法

    INSERT INTO table (a,b,c) VALUES (1,2,3) ON DUPLICATE KEY UPDATE c=c+1; INSERT 中 ON DUPLICATE KEY UP ...

  7. 获取当前 Windows 的安装序列号

    Dim s s = InputBox("当前Windows系统序列号为:", "Windows序列号", GetWindowsSN) WScript.Quit ...

  8. CSV to XLSX (专用)

    $csvFile = "F:\ACL\HZ ACL\ACL-APAC.CSV" $path = "F:\ACL\HZ ACL\ACL-APAC.XLSX" $r ...

  9. Maven 私有库 Nexus的安装

    1.下载 Nexus下载地址:http://www.sonatype.org/nexus/go/ # wget https://sonatype-download.global.ssl.fastly. ...

  10. MONGODB 计算机服务

    安装完成后,在 BIN目录执行如下 E:\APMServ5.2.6\MongoDb\bin>mongod --logpath E:\APMServ5.2.6\MongoDb\logs\Mongo ...