一、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. SpringMVC详解（二）------详细架构

    通过上篇博客,我们能编写一个 SpringMVC 的入门实例,但是为什么要这样写?这样写有啥好处?通过这篇博客我们会有详细的了解. 本篇博客源码下载链接:http://pan.baidu.com/s/ ...

  2. 使用JavaScript实现简单的双色球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 编译器报错：'IHTMLControlElement' : redefinition

    由于我安装了platform SDK,编译导致错误: error C2367: 'IHTMLControlElement' : redefinition; different uuid specifi ...

  4. Hibernate2---- 查询单条记录

    1.根据已完成的Hibernate1基础案例,我们接下来写一下查询,修改删除,对于基础生可以学习一下 只改写一下测试类的代码 private void findStudent() { //02Hibe ...

  5. java子类和父类中静态块、非静态块、构造函数的执行顺序

    public class qqqq extends Parent{ public static void main(String[] args) { new Child(); } } class Pa ...

  6. c#获取数组中指定元素的索引

    //获取元素的索引 ArrayList arrList = new ArrayList(); ; i < array.Length; i++) { ) { arrList.Add(i); } } ...

  7. 【SVN】手动删除svn元信息

    工作中当重建svn仓库,需要把之前的项目导入到新的仓库中,熟悉又快捷的方式是项目上右键->Team断开连接->删除元信息,然后项目右键->Team>Share Project- ...

  8. JDK环境变量的配置

    JDK环境变量的配置.. ==================>>> 右键“我的电脑”,选择“属性”,弹出的对话框中选择“高级系统设置” 在弹出的系统属性对话框中.选择“高级”,再选 ...

  9. SpringMVC（一）--基础、REST、@RequestParam、POST请求乱码等

    1.SpringMVC基本概述 Spring 为展现层提供的基于 MVC 设计理念的优秀的Web 框架,是目前最主流的 MVC 框架之一 Spring3.0 后全面超越 Struts2,成为最优秀的 ...

  10. 一步步带你做vue后台管理框架(一)——介绍框架

    系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框 ...