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. POJ3177 Redundant Paths（边双连通分量+缩点）

    题目大概是给一个无向连通图,问最少加几条边,使图的任意两点都至少有两条边不重复路径. 如果一个图是边双连通图,即不存在割边,那么任何两个点都满足至少有两条边不重复路径,因为假设有重复边那这条边一定就是 ...

  2. JS生成随机的由字母数字组合的字符串

    前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法   1 Math.random().toString(36).substr( ...

  3. NOIP200002税收与补贴

    试题描述 每样商品的价格越低,其销量就会相应增大.现已知某种商品的成本及其在若干价位上的销量(产品不会低于成本销售),并假设相邻价位间销量的变化是线性的且在价格高于给定的最高价位后,销量以某固定数值递 ...

  4. [译]- 6-1 排列窗体上的控件（Laying Out Widgets on a Form）

     排列窗体上的控件(Laying Out Widgets on a Form) 中英文对照:form(窗体),layout(布局或者排列,意思是进行窗体上控件的排列的过程,如大小位置等) absolu ...

  5. windows 下安装Yii2 高级版本

    1.  首先安装 Composer 2.  执行  composer global require "fxp/composer-asset-plugin:~1.1.1" 3. 执行 ...

  6. JBoss错误

    jboss进程在启动时碰到Address already in use: JVM_Bind /0.0.0.0:8080错误. 这个错误的含义是8080端口被占用了. 解决方法: 方法1: 开始--运行 ...

  7. mongodb 3.2 分片部署步骤

    #linux 网络优化1. 文件中/etc/sysctl.conf, 加入net.core.somaxconn = 2048fs.file-max = 2000000fs.nr_open = 2000 ...

  8. UnrealEngine4 PBR Shading Model 概述

      虽然是概述,但内容并还是有些多,写上一篇PBR概念概述后,也在考虑怎么继续下去,最后还是觉得先多写一些东西再慢慢总结,所以还是尽量把这些年PBR相关的Paper精粹沉淀下来吧.     因为UE4 ...

  9. vi 整行 多行 复制与粘贴

    vi编辑器中的整行(多行)复制与粘贴就非常必要了. 1.复制 1)单行复制 在命令模式下,将光标移动到将要复制的行处,按“yy”进行复制: 2)多行复制 在命令模式下,将光标移动到将要复制的首行处,按 ...

  10. access violation at address General protection fault

    https://en.wikipedia.org/wiki/General_protection_fault In memory errors, the faulting program access ...