环境准备:
全局安装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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持。 官网 http://jade-lang.com/ 习惯jade的最好办法:找一个已写好的html代码,用jade重写一遍 但是如果你是新手,而且直接拿jade写没有写过的页面,那么你会死的很难看 规则说明 标签简写 比如`<p>`写成`p` jade里的 p 等于
本文向大家介绍详解Node.js模板引擎Jade入门,包括了详解Node.js模板引擎Jade入门的使用技巧和注意事项,需要的朋友参考一下 Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近。并且,Jade也支持空格。 1、标签 在Jade里,一行开头的任何文本都被默认解释成HTML标签。并且你只需要你写开始标签——注意:不需要加“<>”。因为Jade
本文向大家介绍基于模板引擎Jade的应用(详解),包括了基于模板引擎Jade的应用(详解)的使用技巧和注意事项,需要的朋友参考一下 有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别。(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!)
问题内容: 好的,我从节点服务器获取一个关联数组,并尝试在Jade中进行渲染。我显然需要一个foreach循环,但是似乎没有任何作用!我尝试了这两个代码: 和 我传递的数组称为“行”。知道为什么这不起作用吗?我收到此错误: 并且,使用第二个代码: 问题答案: 尝试
Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 javascript 实现的,并且可以供 node 使用。
本文向大家介绍node前端模板引擎Jade之标签的基本写法,包括了node前端模板引擎Jade之标签的基本写法的使用技巧和注意事项,需要的朋友参考一下 1、文档声明 我们在开始写一个 html 页面的时候,首先要写上 DOCTYPE 文档声明的,现在通常情况下我们都是采用 HTML5 的文档声明方式,那么在 jade 里面我们应该怎么写呢? 在 jade 里面编写文档声明有2种方式: 我们可以直接