这篇文章主要为大家展示了“基于Node.js模板引擎jade的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“基于Node.js模板引擎jade的示例分析”这篇文章吧。
成都创新互联主营青川网站建设的网络公司,主营网站建设方案,app软件开发公司,青川h5小程序制作搭建,青川网站营销推广欢迎青川等地区企业咨询环境准备:
全局安装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 h4 欢迎学习jade
1,标签按照html的缩进格式写
2,标签的属性可以采用圆括号
3,如果标签有内容,可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)
编译之后的index.html代码:
欢迎学习jade
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下:
doctype html html head meta(charset='utf8') title jade template engine body h2 jade template engine h2 jade template engine h2 jade template engine h2 jade template engine div#box.box1.box2(class='box3') #abc.box1.box2.box3 h4.box1.box2(class='abc def') a(href='http://www.taobao.com', target = 'blank') 淘宝 input(type='button', value='点我') br p. 1,this is hello 2,test 3,string p | 1, this is strong hello | 2, test | 3, test string
执行编译命令:jade -P
jade template engine jade template engine
jade template engine
jade template engine
jade template engine
淘宝
1,this is hello 2,test 3,string
1, this ishello 2, test 3, test string
1,div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法
2,#abc.box1.box2.box3,全面没有给元素标签名称,默认就是给div标签加上这些属性
3,多行文本的两种写法
p.
1,this is
hello
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 h4 单行注释 // div.box.box2 这是一段div h4 不会编译到html文件的注释 //- div#box.box2.box3 h4 块注释,也叫多行注释 //- input(type='checkbox', name='meinv', value='仙女') 仙女 input(type='checkbox', name='meinv', value='御姐') 御姐 h4 这里不是注释 input(type='checkbox', name='meinv', value='仙女') | 仙女 input(type='checkbox', name='meinv', value='御姐') | 御姐
编译之后:
jade模板引擎学习-by ghostwu 单行注释
不会编译到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 h4 #{content}
编译命令:jade index2.jade -P -O data.json -O 指定一个json文件,把json文件的数据传递到模板
编译后的结果:
JADE模板引擎学习-BY GHOSTWU 跟着ghostwu学习jade
以上是“基于Node.js模板引擎jade的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。