一、block 模块复用

把需要复用的模块用block定义

block后面跟上模块的名字,引用一次block 内容就会被复用一次

编译之后的结果:

二,继承模板(extends)

在实际开发中,网站的头部,尾部一般都是公用的,我们可以通过jade的模板继承( extends ) 功能,把公共部分抽象出来,然后让不同的页面继承这些公共部分, 而且继承过来之后还可以重写

新建一个layout.jade模板

这是一个公共的模板,如果我们的首页需要这个公共模板,同时首页需要修改这个公共模板的布局部分( block container ),那么我们可以这样做

index.jade(首页模板)

extends就是继承layout模板,layout模板根据实际路径要变化,我这里index.jade跟layout.jade是同级,然后在index.jade模板中,我重写了block container模块,编译index.jade之后的结果是:

从上图可知,布局在index.jade中被重写了,这样的模板复用就非常灵活了

三、包含模板(include)

上例,把layout.jade的head部分独立出来,放在header.jade中

然后在layout.jade中用include引入

编译index.jade之后的效果;

四、jade Api方法

compile用法:

render用法:

renderFile,那就是渲染文件里面的模板代码

index2.jade

server.js

五、在jade中使用插件

如less插件,需要安装

cnpm install jstransformer-less less -g

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

  1. [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

    一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...

  2. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  3. [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

    强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...

  5. [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件

    这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...

  6. [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

    该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...

  7. [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

    接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...

  8. [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

    promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...

  9. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

随机推荐

  1. 自定义类似于Jquery UI Selectable 的Vue指令v-selectable

    话不多说,先看效果. 其实就是一个可以按住鼠标进行一个区域内条目选择的功能,相信用过Jquery UI 的都知道这是selectable的功能,然而我们如果用Vue开发的话没有类似的插件,当然你仍然可 ...

  2. Python爬虫从入门到放弃(二十四)之 Scrapy登录知乎

    因为现在很多网站为了限制爬虫,设置了为只有登录才能看更多的内容,不登录只能看到部分内容,这也是一种反爬虫的手段,所以这个文章通过模拟登录知乎来作为例子,演示如何通过scrapy登录知乎 在通过scra ...

  3. canvas基础语法

    前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...

  4. Promise与异步

    不知道promise,大家现在用了吗?如果还不了解的话,今天就来对了-基础的了解起来- 正文从这开始- 接触过promise的的都知道它的应用场景和用途,Promise可以用来避免异步操作函数里的嵌套 ...

  5. 接口测试之soapUI(WebService)

    一.WebService介绍   WebService是一种跨编程语言和跨操作系统平台的远程调用技术,XML+XSD,SOAP和WSDL就是构成WebService平台的三大技术.   1)XML+X ...

  6. 输入输出系统--I/O接口

    计算机组成原理\硬件结构\输入输出系统\I/O接口 一.概述 接口可以看做是两个系统或两个部件之间的交接部分,它即可以是两种硬设备之间的连接电路,也可以是两个软件之间共同的逻辑边界. I/O接口通常是 ...

  7. matplotlib 出图示例

    如果你想要在Linxu中获得一个高效.自动化.高质量的科学画图的解决方案,应该考虑尝试下matplotlib库.Matplotlib是基于python的开源科学测绘包,基于python软件基金会许可证 ...

  8. pandas数据分析(数据结构)

    本文主要从以下两个方向对pandas的数据结构进行展开,分别为Series和DataFrame(对应的分别是系列与numpy中的一维数组和二维数组) 1.首先从Series讲起,主要介绍Series的 ...

  9. python+selenium自动化软件测试(第4章):场景判断与封装

    4.1 显示等待WebDriverWait 前言:在脚本中加入太多的sleep后会影响脚本的执行速度,虽然implicitly_wait()这种隐式等待在一定程度上节省了很多时间.但是一旦页面上某些j ...

  10. mybatis的延迟加载

    1. 什么是延迟加载 举个例子: 如果查询订单并且关联查询用户信息.如果先查询订单信息即可满足要求,当我们需要查询用户信息时再查询用户信息.把对用户信息的按需去查询就是延迟加载. 所以延迟加载即先从单 ...