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 ...
随机推荐
- 模拟 POJ 1573 Robot Motion
题目地址:http://poj.org/problem?id=1573 /* 题意:给定地图和起始位置,robot(上下左右)一步一步去走,问走出地图的步数 如果是死循环,输出走进死循环之前的步数和死 ...
- python 代码片段12
#coding=utf-8 d={'title':'python web development','year':2008} print d.setdefault('pub','addision we ...
- BZOJ3772: 精神污染
Description 兵库县位于日本列岛的中央位置,北临日本海,南面濑户内海直通太平洋,中央部位是森林和山地,与拥有关西机场的大阪府比邻而居,是关西地区面积最大的县,是集经济和文化于一体的一大地区, ...
- Http中涉及到的知识点总结
1.URL地址 协议-> HTTP:超文本传输协议,除了用来传输文本,还可以传输HTML页面.CSS文件.JS文件.图片.音视频... HTTPS:SSL,它比HTTP更加安全一些 FTP:文件 ...
- Android使用AsyncTask实现可以断点续传的DownloadManager功能
http://www.it165.net/pro/html/201211/4210.html 最近做项目卡壳了,要做个Android的应用市场,其他方面都还好说,唯独这个下载管理算是给我难住了,究其原 ...
- CentOS 下安装python 之MySQLdb
yum -y install mysql-devwget http://downloads.sourceforge.net/project/mysql-python/mysql-python-test ...
- Struts2+Spring3+Mybatis3开发环境搭建
本文主要介绍Struts2+Spring3+Mybatis3开发环境搭建 Struts和Spring不过多介绍. MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBa ...
- 让input不可编辑的方法
两种方法: disabled="true " 文字会变成灰色,不可编辑. readOnly="true" 文字不会变色,也是不可编辑的 <input na ...
- Scrum会议2(Beta版本)
组名:奋斗吧兄弟 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding. ...
- php常用Stream函数集介绍
php常用Stream函数集介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-24 本篇文章是对php中的常用Stream函数集进行了详细的分析介绍,需要的朋友参考下 ...