基于Node.js模板引擎教程-jade速学与实战1

时间：2021-05-25

环境准备：

全局安装jade: npm install jade -g

初始化项目package.json: npm init --yes

安装完成之后，可以使用 jade --help 查看jade的命令行用法

一、在项目目录下新建index.jade文件

inde.jade代码：

doctype htmlhtml 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 htmlhtml 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://" 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 htmlhtml 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 htmlhtml 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 htmlhtml 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 htmlhtml 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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章