基于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" rel="external nofollow" 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，多行文本的两种写法
p.
1,this is
<strong>hello</strong>
2,test
3,string
多行文本第1种写法：p标签后面要跟一个. 里面用原始的html标签写法
p
| 1, this is
strong hello
| 2, test
| 3, test string
多行文本第2种写法： 文本前面用竖线 ( | )，标签后面跟内容
三、注释
jade模板代码：
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文件数据
{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
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>
以上这篇基于Node.js模板引擎教程-jade速学与实战1就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了webpack打包nodejs项目,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
Nodejs开发grpc包含静态和动态两种代码生成方式,静态代码生成需要提前通过.proto文件编译生成JS源码,而动态代码生成则是在运行时指定IDL文件位置,实时生成源码,两者各有优缺点,本文给大家介绍Nodejs开发grpc的实例代码,感兴趣的朋友一起看看吧2024-10-10
使用NodeJS编写前端工具时,操作得最多的是文本文件,但遗憾的是,GBK编码不在NodeJS自身支持范围内,UTF8文件还可能带有BOM,在读取不同编码的文本文件时,需要将文件内容转换为JS使用的UTF8编码字符串后才能正常处理2023-11-11
这篇文章主要介绍了Node.js Webpack常见的模式,Webpack的另一个核心是Plugin ，Plugin是可以用于执行更加广泛的任务如打包优化资源管理 环境变量注入等，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了学习node.js 断言的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
fs.stat和fs.fstat他们都是用来获取文件的状态信息，下面这篇文章主要给大家介绍了关于node.js中fs.stat与fs.fstat区别的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
本文主要详细介绍了node包管理工具，主要介绍了npm，cnpm及yarn，文中有详细的代码示例，对学习具有一定参考价值，需要的朋友可以参考一下2023-04-04
NodeJS中用来创建服务的模块是http核心模块，本篇就来介绍关于使用http模块搭建HTTP服务器和客户端的方法，以及模块的基本 API，非常具有实用价值，需要的朋友可以参考下2018-10-10
在微信开发中有有付款就会有退款，这样的功能非常常见，这篇文章主要介绍了node.js实现微信支付退款功能,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Nodejs处理异常操作,结合实例形式分析了nodejs针对异常的捕获与处理相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论