[js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
一、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-模板引用,继承,插件使用的更多相关文章
- [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义
一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin
强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...
- [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件
这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...
- [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件
接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...
- [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist
promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...
随机推荐
- [UWP]了解模板化控件(5.1):TemplatePart vs. VisualState
1. TemplatePart vs. VisualState 在前面两篇文章中分别使用了TemplatePart及VisualState的方式实现了相同的功能,其中明显VisualState的方式更 ...
- HIVE—索引、分区和分桶的区别
一.索引 简介 Hive支持索引,但是Hive的索引与关系型数据库中的索引并不相同,比如,Hive不支持主键或者外键. Hive索引可以建立在表中的某些列上,以提升一些操作的效率,例如减少MapRed ...
- c#通过反射获取自定义属性
PropertyInfo[] properties = typeof(BPM_ContractApproval_Purchase).GetProperties(); foreach (var prop ...
- new 、 delete 、 malloc 、 free 关系
1.new . delete . malloc . free 关系 delete 会调用对象的析构函数 , 和 new 对应, free 只会释放内存, new 调用构造函数. malloc 与 fr ...
- Windows常用的一些DOS命令整理
Windows常用的一些DOS命令整理.. MS DOS 命令大全 ---清空Dos屏幕使用命令:cls -- Dos切换当前目录到D盘:cd d: 一.基础命令 1 dir 无参数:查看当前所在目录 ...
- composer安装报错Composer throws [ReflectionException] Class Fxp\Composer\AssetPlugin\Repository\NpmRepository does not exist
解决方法:删除C:\Users\Administrator\AppData\Roaming\Composer\vendor\fxp下的文件
- 【Linux】修改Linux字符集
一.查看字符集 常见的几种方法: (1) [root@devhxyw03 ~]# echo $LANG zh_CN.GBK (2) [root@devhxyw03 ~]# env | grep LAN ...
- jQuery表单事件
1.focus() 获得焦点,适用于所有元素2.blur() 失去焦点,适用于所有元素3.change() 当内容改变时触发 只适用于 input textarea select4.select() ...
- [REST] 1.REST的起源
0. 世界上第一个网站 1990年12月20日,这一天对于现在的互联网来说意义非凡.欧洲核子研究组织(CREN)的科学家Tim Berners-Lee在一台NeXT电脑上启动了世界上的第一个网站(当然 ...
- Spring Aop 应用实例与设计浅析
0.代码概述 代码说明:第一章中的代码为了突出模块化拆分的必要性,所以db采用了真实操作.下面代码中dao层使用了打印日志模拟插入db的方法,方便所有人运行demo. 1.项目代码地址:https:/ ...