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

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

layout.jade

doctype html

html

  head

    block title

      title Default title

  body

    block content

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

extends ./layout.jade

block title

  title Article Title

block content

  h1 My Article

生成html

<!DOCTYPE html>

<html>

  <head>

    <title>Article Title</title>

  </head>

  <body>

  </body>

</html>

也可以通过include 引入

include ./layout.jade

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

layout.jade

doctype html

html

  head

    block title

      title Default title

  body

    block content

        p hello

test.jade

extends ./layout.jade

block title

  title Article Title

block append content

  h1 My Article

输出html

<!DOCTYPE html>

<html>

  <head>

    <title>Article Title</title>

  </head>

  <body>

    <p>hello</p>

    <h1>My Article</h1>

  </body>

</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. 初始化lpc2106开发工程

    单片机型号:lpc2106.Init.s:初始化pc指针和sp指针.    AREA    Init, CODE, READONLY    IMPORT  test1_main    EXPORT  ...

  2. BZOJ1707 : [Usaco2007 Nov]tanning分配防晒霜

    S向每头奶牛连边,容量1 每个防晒霜向T连边,容量cover 每头奶牛向SPF在自己范围内的防晒霜连边,容量inf 用线段树优化建图跑最大流即可. #include<cstdio> con ...

  3. CSS创建三角形（小三角）的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  4. 更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法

    首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本低什么的,尝试自己解决但失败之后,我在搜索引擎上找了很多中文的 ...

  5. 如何下载某些 flash 在线视频 并使用ffmpeg下载分段并加密的m3u8视频流

    有些网站使用 flash 在线播放视频,不方便进行下载. 可以使用 Chrome 的 Developer Tools 模拟成 iOS 设备(通过修改 User Agent),然后取得 h.264 视频 ...

  6. C++ Ouput Exactly 2 Digits After Decimal Point 小数点后保留三位数字

    在C++编程中,有时候要求我们把数据保留小数点后几位,或是保留多少位有效数字等等,那么就要用到setiosflags和setprecision函数,记得要包含头文件#include <ioman ...

  7. 使用SBT构建Scala应用(转自git)

    # 使用SBT构建Scala应用 ## SBT简介 SBT是Simple Build Tool的简称,如果读者使用过Maven,那么可以简单将SBT看做是Scala世界的Maven,虽然二者各有优劣, ...

  8. Servlet 编程 http请求类型

    HTTP协议的8种请求类型介绍 HTTP协议中共定义了八种方法或者叫“动作”来表明对Request-URI指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所支持的HTT ...

  9. sqlite相关工具使用

    sqlite3可视化工具 1.sudo apt-get install sqlitebrowser 2.sudo apt-get install sqliteman3.sqlitestudio需要去官 ...

  10. 完美解决VS2003.Net fatal error LNK1201: 写入程序数据库“.pdb”时出错

    我的开发环境是Win7旗舰64位+VS2003.Net,经常卡pdb错误,文末给出一个完美的解决方案和一个懒人补丁包.问题描述如下:在重新编译的时候,经常报错: fatal error LNK1201 ...