[js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法
环境准备:
全局安装jade: npm install jade -g
初始化项目package.json: npm init --yes
安装完成之后,可以使用 jade --help 查看jade的命令行用法
一、在项目目录下新建index.jade文件
inde.jade代码:
1 doctype html
2 html
3 head
4 meta(charset='utf-8')
5 title
6 body
7 h3 欢迎学习jade
语法规则:
1, 标签按照html的缩进格式写
2,标签的属性可以采用圆括号
3,如果标签有内容,可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)
编译之后的index.html代码:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <h3>欢迎学习jade</h3>
9 </body>
10 </html>
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下:
1 doctype html
2 html
3 head
4 meta(charset='utf8')
5 title jade template engine
6 body
7 h1 jade template engine
8 h1 jade template engine
9 h1 jade template engine
10 h1 jade template engine
11 div#box.box1.box2(class='box3')
12 #abc.box1.box2.box3
13 h3.box1.box2(class='abc def')
14 a(href='http://www.taobao.com',
15 target = 'blank') 淘宝
16 input(type='button', value='点我')
17 br
18 p.
19 1,this is
20 <strong>hello</strong>
21 2,test
22 3,string
23 p
24 | 1, this is
25 strong hello
26 | 2, test
27 | 3, test string
执行编译命令:jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.html文件,编译之后的代码如下:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf8">
5 <title>jade template engine</title>
6 </head>
7 <body>
8 <h1>jade template engine</h1>
9 <h1>jade template engine</h1>
10 <h1>jade template engine</h1>
11 <h1>jade template engine</h1>
12 <div id="box" class="box1 box2 box3"></div>
13 <div id="abc" class="box1 box2 box3"></div>
14 <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>
15 <input type="button" value="点我"><br>
16 <p>
17 1,this is
18 <strong>hello</strong>
19 2,test
20 3,string
21 </p>
22 <p> 1, this is<strong>hello</strong> 2, test
23 3, test string
24 </p>
25 </body>
26 </html>
1,div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法
2,#abc.box1.box2.box3,全面没有给元素标签名称,默认就是给div标签加上这些属性
3,多行文本的两种写法
1 doctype html
2 html
3 head
4 meta(charset='utf8')
5 title jade模板引擎学习-by ghostwu
6 body
7 h3 单行注释
8 // div.box.box2 这是一段div
9 h3 不会编译到html文件的注释
10 //- div#box.box2.box3
11 h3 块注释,也叫多行注释
12 //-
13 input(type='checkbox', name='meinv', value='仙女') 仙女
14 input(type='checkbox', name='meinv', value='御姐') 御姐
15 h3 这里不是注释
16 input(type='checkbox', name='meinv', value='仙女')
17 | 仙女
18 input(type='checkbox', name='meinv', value='御姐')
19 | 御姐
编译之后:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf8">
5 <title>jade模板引擎学习-by ghostwu</title>
6 </head>
7 <body>
8 <h3>单行注释</h3>
9 <!-- div.box.box2 这是一段div-->
10 <h3>不会编译到html文件的注释</h3>
11 <h3>块注释,也叫多行注释</h3>
12 <h3>这里不是注释</h3>
13 <input type="checkbox" name="meinv" value="仙女">仙女
14 <input type="checkbox" name="meinv" value="御姐">御姐
15 </body>
16 </html>
1,单行注释
// div.box.box2 这是一段div
2,只在jade中注释,不会被编译到html文件
//- div#box.box2.box3
3,块注释( 多行文本注释 ),被注释的内容要另起一行
4,checkbox后面的显示文字部分 要注意,不要挨着属性的后面,要另起一行,写在竖线的后面
四、jade模板实战菜单
doctype html
html
head
meta(charset='utf8')
title jade模板引擎学习-by ghostwu
style.
* { margin : 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; color: white; }
#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
#nav li { float:left; }
#nav li.active { background:red; }
#nav li:hover { background:#09f; }
#nav li a{ padding: 5px 10px; }
body
div#nav
ul
li.active
a(href='javascript:;') 首页
li
a(href='javascript:;') 玄幻小说
li
a(href='javascript:;') 修真小说
li
a(href='javascript:;') 都世小说
li
a(href='javascript:;') 科幻小说
li
a(href='javascript:;') 网游小说
编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改,保存之后立刻刷新结果,也就是现代前端开发中很流行的热加载技术
五、解释变量
1 doctype html
2 html
3 head
4 meta(charset='utf8')
5 - var title = 'jade模板引擎学习-by ghostwu';
6 title #{title.toUpperCase()}
7 style.
8 * { margin : 0; padding: 0; }
9 li { list-style-type: none; }
10 a { text-decoration: none; color: white; }
11 #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
12 #nav li { float:left; }
13 #nav li.active { background:red; }
14 #nav li:hover { background:#09f; }
15 #nav li a{ padding: 5px 10px; }
16 body
17 div#nav
18 ul
19 li.active
20 a(href='javascript:;') 首页
21 li
22 a(href='javascript:;') 玄幻小说
23 li
24 a(href='javascript:;') 修真小说
25 li
26 a(href='javascript:;') 都世小说
27 li
28 a(href='javascript:;') 科幻小说
29 li
30 a(href='javascript:;') 网游小说
#{}: 可以解释变量, toUpperCase():变量转大写
把json文件的数据在编译的时候传递到模板,
新建data.json文件数据
1 doctype html
2 html
3 head
4 meta(charset='utf8')
5 - var title = 'jade模板引擎学习-by ghostwu';
6 title #{title.toUpperCase()}
7 body
8 h3 #{content}
编译命令:jade index2.jade -P -O data.json -O 指定一个json文件,把json文件的数据传递到模板
编译后的结果:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf8">
5 <title>JADE模板引擎学习-BY GHOSTWU</title>
6 </head>
7 <body>
8 <h3>跟着ghostwu学习jade</h3>
9 </body>
10 </html>
[js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法相关推荐
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- node.js 学习笔记(二)模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染 文章目录 node.js 学习笔记(二)模板引擎和C/S渲染 一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
- 全栈工程师之路-Node.js
2019独角兽企业重金招聘Python工程师标准>>> 全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?__ ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他 ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
最新文章
- java中synchronized介绍和用法
- 增强包_机电工程学院开展“情暖冬日,爱在机电”冬至包饺子活动
- iOS故障排除指南:基本技巧
- 高端唯有定制,把 sublime 打造成专属的 IDE
- 【嵌入式】C语言高级编程-长度为0的数组(05)
- PolandBall and Forest(并查集)
- Java中的函数传递
- 1809企业战略管理
- C语言代码规范(四)命名规则
- Android 自定义Switch,仿微信开关键Switch
- C++ STL 容器的一些总结 --- set(multiset)和map(multimap)
- 事业编和公务员哪个好?
- mongodb服务安装及部署配置
- linux虚拟机安装samba服务,在虚拟机Redhat Linux下安装Samba服务器分享
- IO口模拟SPI总线问题
- python实现多线程输出123123
- mil和mm之间的换算
- 2014_hitcon_stkof学习
- android输入法剪切板历史记录,干货分享 讯飞输入法剪切板使用技巧知多少
- t分布f分布与样本均值抽样分布_常用概率分布
热门文章
- 已测试:网上大神写的快手极速版脚本,autojs版快手极速版自动脚本下载
- fh 幅频特性曲线怎么画fl_只要有上、下限截止频率fH、fL、中频电压增益和(),就可绘出基本共射放大电路的幅频特性曲线...
- usb禁止重定向_【外设那些事】6.USB重定向-如何使用(下)
- Horizon client 连接桌面后显示:USB已禁用/USB重定向功能已禁用
- 用户调研的操作步骤与过程模板
- Kaggle入门 - TMDB 5000 电影推荐数据分析
- Python数据分析-TMDb 5000 Movie Database电影数据分析
- android 平板键盘布局,7款Android平板输入法横向评测,安卓平板软件HD/THD下载
- JAVA字符串排序去重
- python执行源程序的方式是_python源程序执行的方式