[js高手之路]Node.js模板引擎教程-jade速学与实战1
环境准备：
全局安装jade: npm install jade -g
初始化项目package.json: npm init --yes
安装完成之后，可以使用 jade --help 查看jade的命令行用法
一、在项目目录下新建index.jade文件
inde.jade代码：
doctype html
html
head
meta(charset='utf-8')
title
body
h3 欢迎学习jade
语法规则：
1， 标签按照html的缩进格式写
2，标签的属性可以采用圆括号
3，如果标签有内容，可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)
编译之后的index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>欢迎学习jade</h3>
</body>
</html>
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下：
doctype html
html
head
meta(charset='utf8')
title jade template engine
body
h1 jade template engine
h1 jade template engine
h1 jade template engine
h1 jade template engine
div#box.box1.box2(class='box3')
#abc.box1.box2.box3
h3.box1.box2(class='abc def')
a(href='http://www.taobao.com',
target = 'blank') 淘宝
input(type='button', value='点我')
br
p.
1,this is
<strong>hello</strong>
2,test
3,string
p
| 1, this is
strong hello
| 2, test
| 3, test string
执行编译命令：jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.html文件，编译之后的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>jade template engine</title>
</head>
<body>
<h1>jade template engine</h1>
<h1>jade template engine</h1>
<h1>jade template engine</h1>
<h1>jade template engine</h1>
<div id="box" class="box1 box2 box3"></div>
<div id="abc" class="box1 box2 box3"></div>
<h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>
<input type="button" value="点我"><br>
<p>
1,this is
<strong>hello</strong>
2,test
3,string
</p>
<p> 1, this is<strong>hello</strong> 2, test
3, test string
</p>
</body>
</html>
1，div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法
2，#abc.box1.box2.box3，全面没有给元素标签名称，默认就是给div标签加上这些属性
3，多行文本的两种写法
doctype html
html
head
meta(charset='utf8')
title jade模板引擎学习-by ghostwu
body
h3 单行注释
// div.box.box2 这是一段div
h3 不会编译到html文件的注释
//- div#box.box2.box3
h3 块注释,也叫多行注释
//-
input(type='checkbox', name='meinv', value='仙女') 仙女
input(type='checkbox', name='meinv', value='御姐') 御姐
h3 这里不是注释
input(type='checkbox', name='meinv', value='仙女')
| 仙女
input(type='checkbox', name='meinv', value='御姐')
| 御姐
编译之后:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>jade模板引擎学习-by ghostwu</title>
</head>
<body>
<h3>单行注释</h3>
<!-- div.box.box2 这是一段div-->
<h3>不会编译到html文件的注释</h3>
<h3>块注释,也叫多行注释</h3>
<h3>这里不是注释</h3>
<input type="checkbox" name="meinv" value="仙女">仙女
<input type="checkbox" name="meinv" value="御姐">御姐
</body>
</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: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术
五、解释变量
doctype html
html
head
meta(charset='utf8')
- var title = 'jade模板引擎学习-by ghostwu';
title #{title.toUpperCase()}
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:;') 网游小说
#{}： 可以解释变量, toUpperCase():变量转大写
把json文件的数据在编译的时候传递到模板,
新建data.json文件数据
doctype html
html
head
meta(charset='utf8')
- var title = 'jade模板引擎学习-by ghostwu';
title #{title.toUpperCase()}
body
h3 #{content}
编译命令：jade index2.jade -P -O data.json -O 指定一个json文件，把json文件的数据传递到模板
编译后的结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>JADE模板引擎学习-BY GHOSTWU</title>
</head>
<body>
<h3>跟着ghostwu学习jade</h3>
</body>
</html>
[js高手之路]Node.js模板引擎教程-jade速学与实战1的更多相关文章
- [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义
一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...
- [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库 ...
随机推荐
- 华为服务器Linux在线做RAID方法
背景概述 最近维护大数据的一些主机,大概有3k+的数目,有很大一部分是华为的服务器,大部分是12块数据盘,单盘做RAID0来存放数据,但是通常硬件是不可靠的,磁盘损坏是常态, 然而磁盘损坏进行定位更换 ...
- 蓝桥杯算法训练_2的次幂表示+前缀表达式+Anagrams问题+出现次数最多的整数
今天做了4个简单的题,题目虽然是简单,但是对于我这样的小白,还是有很多东西需要学习的. 2的次幂表示 上面就是题目,题目说的也很清晰了,接下来就是递归的实现: #include<iostream ...
- oracle中decode的一些巧妙用法
1.符号函数sign在decode中的用法--比较大小 select decode(sign(变量1-变量2),-1,变量1,变量2) from dual; --取较小值sign()函数根据某个值是0 ...
- Linux - 简明Shell编程03 - 字符串（String）
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash str="Shell ...
- Linux - 简明Shell编程08 - 函数（Function）
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash function Check( ...
- 设计模式(3)--FactoryMethod( [2] 工厂方法模式)--创建型
1.模式定义: 工厂方法是针对每一种产品提供一个工厂类.通过不同的工厂实例来创建不同的产品实例. 2.模式特点: (1)工厂方法模式去掉了简单工厂模式中工厂方法的静态属性,使得它可以被子类继承. (2 ...
- python中类的属性(class attribute)的解释
python中的类叫 class object,类的实例叫instance object. 类 Class Objects 类拥有两种操作,1.类属性 attribute references 2.实 ...
- 字符串拼接data-id时注意事项
今天测试下一个ajax请求,结果后台接收不到data-id的数据,导致后台无法进行正确的数据库查询. 我的评论页面是使用字符串拼接后,再放到页面里的,其中有关data-id的部分是这样的: '< ...
- ubuntu下动态链接库小计
只记录下具体操作代码,以后再做补充 1,gcc -Wall -fPIC -c test4.c 2,gcc -g -shared -Wl,-soname,libtests.so -o libtests. ...
- 深入分析动态管理Fragment
一.Fragment与Activity的关系 要理解动态管理Fragment首先要理解一下Fragment与Activity的关系 Fragment可以理解为将Activity划分为若干个片段,Fra ...