JavaScript

超轻量级php框架startmvc

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

更新时间:2020-06-06 01:00:02 作者:startmvc
环境准备:全局安装jade:npminstalljade-g初始化项目package.json:npminit--yes安装完成之后,可以使

环境准备:

全局安装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模板引擎