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. POJ2226 Muddy Fields(二分图最小点覆盖集)

    题目给张R×C的地图,地图上*表示泥地..表示草地,问最少要几块宽1长任意木板才能盖住所有泥地,木板可以重合但不能盖住草地. 把所有行和列连续的泥地(可以放一块木板铺满的)看作点且行和列连续泥地分别作 ...

  2. POJ2240 Arbitrage(Floyd判负环)

    跑完Floyd后,d[u][u]就表示从u点出发可以经过所有n个点回到u点的最短路,因此只要根据数组对角线的信息就能判断是否存在负环. #include<cstdio> #include& ...

  3. HDU 1045 (DFS搜索)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1045 题目大意:在不是X的地方放O,所有O在没有隔板情况下不能对视(横行和数列),问最多可以放多少个 ...

  4. JAVA中堆栈和内存分配

    (一).栈.堆 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在堆(new 出来的对象)或 ...

  5. LeetCode-Sudoku Solver (递归解法)

    题目地址: https://leetcode.com/problems/sudoku-solver/ // 将字符串的数独题转换成 int[9][9] ][], char ** b, int boar ...

  6. iOS-OC根据时间戳获取距离现在的状态(刚刚,分钟前,今天,昨天)

     iOS-OC根据时间戳获取距离现在的状态(刚刚,分钟前,今天,昨天) 获取时间戳 - (NSString *)distanceTimeWithBeforeTime:(double)beTime { ...

  7. QCheckBox 的按钮响应

    Qt中QCheckBox的按键响应如下,其中checkbox为对象名: void YourClass::on_checkbox_toggled(bool state) { // Do somethin ...

  8. php函数描述及例子

    /** * xml2array() will convert the given XML text to an array in the XML structure. * Link: http://w ...

  9. java密码验证正则表达式校验

    ,正则表达式就是记录文本规则的代码.php密码验证正则表达式(8位长度限制)<?php //密码验证 $password = "zongzi_Abc_oo13a2"; $n ...

  10. 当PHP引擎试图实例化一个未知类的操作

    在PHP开发过程中,如果希望从外部引入一个class,通常会使用include和require方法,去把定义这个class的文件包含进来,但是这样可能会使得在引用文件的新脚本中,存在大量的includ ...