jade复用
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复用的更多相关文章
- nodejs学习(二) ---- express中使用模板引擎jade
系列教程,上一节教程 express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...
- 模板引擎之-jade
##### 首先我们安装jade模板引擎并编译`npm install jade --global`在项目文件夹下创建一个`index.jade`文件,并且写入```doctypehtml head ...
- Jade简单教程
Express框架里内嵌了Jade模板引擎.正好项目里也要用到,本篇整理了下Jade的相关用法. 安装与执行 标签和属性 多行文本 变量 语句 Mixin 模板 注释 过滤器 安装与执行 安装很简单: ...
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- jade 入门
推荐网站: jade官网 html在线转换为jade 参考文章1 参考文章2 node的模板常用的有两个,一个是ejs,另外一个就是jade,相对来说,ejs更容易理解,像原生的html,很多 ...
- jade安装及基本语法使用
一.cmd安装jade: cnpm install -g jade //cnom install jade -g与上面使用效果一致. 二.jade命令行中使用: 使用cmd: jade index.j ...
随机推荐
- zoj 1097 普吕弗序列
题目大意:输入一颗无根树的括号序列,求这棵树的普吕弗序列. 分析思路: 1)普吕弗序列,可以参考维基百科,其做法是找出树中编号最小的叶子节点,并将此叶子节点及边删除,并输出其邻接的节点标号: 2)递归 ...
- HDU2588 GCD(欧拉函数)
题目问[1,n]中与n的gcd大于等于m的数的个数. 好难想... 假设x满足条件,那么gcd(x,n)=d>=m,而x/d与n/d一定互质. 又x<=n,所以x/d<=n/d. 于 ...
- python 代码片段12
#coding=utf-8 d={'title':'python web development','year':2008} print d.setdefault('pub','addision we ...
- BZOJ4120 : [Baltic2015]Editor
活跃区的操作序列的优先级单调不上升,所以每次undo的一定是一段区间. 以优先级为权值建立可持久化权值线段树,维护优先级在某区间内的最靠后的位置. #include<cstdio> con ...
- BZOJ3118 : Orz the MST
对于树边显然只需要减少权值,对于非树边显然只需要增加权值 设i不为树边,j为树边 X[i]:i增加量 X[j]:j减少量 C[i]:修改1单位i的代价 对于每条非树边i(u,v),在树上u到v路径上的 ...
- 【BZOJ】1818: [Cqoi2010]内部白点(树状数组+离散+特殊的技巧)
http://www.lydsy.com/JudgeOnline/problem.php?id=1818 这一题一开始我就看错了,bzoj的那个绝对值109简直坑人,应该是10^9,我直接写了个暴力. ...
- libtiff4.04
http://www.linuxfromscratch.org/blfs/view/svn/general/libtiff.html 安装方法 : ./configure --prefix=/usr ...
- 【C语言】17-预处理指令3-文件包含
这讲介绍最后一个预处理指令---文件包含 一.基本概念 其实我们早就有接触文件包含这个指令了, 就是#include,它可以将一个文件的全部内容拷贝另一个文件中. 二.一般形式 1.第1种形式#inc ...
- Ubuntu 14.04 AMD 64位 下 Android Studio 的安装
Ubuntu 14.04 AMD 64位 下 Android Studio 的安装 作者:yoyoyosiyu 邮箱:yoyoyosiyu@163.com 时间:2015年8月25日 Android ...
- backtrack5渗透 笔记
目录 1.信息收集 2.扫描工具 3.漏洞发现 4.社会工程学工具 5.运用层攻击msf 6.局域网攻击 ...