pug模板入门
Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍pug模板引擎
1.pug中文文档参考
https://pug.bootcss.com/api/getting-started.html
2.入门示例
1.在原始目录下建立一个views目录，来存放该 test.pug
htmlheadscriptstylebody2.把该代码输出成一个html文件,我们可以在源目录下新建一个build目录来存放生成的文件，那就将刚才的app.js写成
Var jade = require('pug');//加载jade引擎 var fs = require('fs')var str = jade.renderFile('./views/test.pug' ,{pretty : true }); //pretty : ture 相当于beauty格式化一下输出的代码 fs.writeFile('./build/test.html' ,str , function(err){if (err)console.log("编译失败");elseconsole.log("编译成功"); })3.生成的html页面
<html><head><script></script><style></style></head><body></body> </html>4.关于class/style的写法——属性放在（）里面，用逗号分隔
htmlheadscriptstylebodydiv(class=['aaa','bbb','ccc'])//class也可以写成div(style="aaa bbb ccc")div(style={width:'200px' ,height:'300px' ,background:'red'})//style也可以写成div(style="width:200px;xxxx")运行一下node.js，则输出结果为
<html><head><script></script><style></style></head><body><div class="aaa bbb ccc"></div><!--class也可以写成div(style="aaa bbb ccc")--><div style="width:200px;height:300px;background:red;"></div><!--style也可以写成div(style="width:200px;xxxx")--></body> </html>关于上方输出格式，可以发现，style是可以用json传输的，class是可以采用数组传输进去的。
因此可以在node.js中直接插入相关属性数据，然后在jade文件调用，这样就可以很方便的生成不同框架的模板文件
如果你想插入相关属性数据，并调用的话，应当在node.js中的 jade.renderFile中如此添加数据
并在test.jade文件中修改如下：
htmlheadscriptstylebodydiv(class=arr)div(style=cls)运行一下，结果是跟刚才的相同
5、在pug标签中输入数据时，记得在相应标签后，加一个空格
我们通常前端编程的时候，一般都会写到
<div>名称：DobTink<div>年龄：15</div><script src="a.js"></script><script>window.onload = function () {console.log('测试输出');}</script> </div><a href="http://www.dobtink.com">首页</a而在jade中，我们需要这样来写这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可,
有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可
6、在pug中使用if else switch while 等语句
pug中的 if 使用
Pug 的条件判断的一般形式的括号是可选的，所以可以省略掉开头的 -，效果完全相同。类似一个常规的 JavaScript 语法形式
pug中的 switch 使用
htmlheadbody-var a = 3;case awhen 0div aaawhen 1div bbbwhen 2div cccwhen 3div ddddefaultdiv default7.循环
Pug 目前支持两种主要的迭代方式： each 和 while
uleach val in [1, 2, 3, 4, 5]li= val <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ul>8. 代码1
html head title pug学习 meta(charset='utf-8') script. var message = 'hello pug'; window.function(){ // alert(message); } body div(id='contaner' class='style1') p(id='p1' style={color:'red',fontsize:'20px'}) 用户名: input(name='username' type='text' placeholder='请输入用户名' value=username) br p 密码: input(name='password' type="password" placeholder='请输入密码' value=password)-var k = 10; if(k % 2 === 0) p 登录成功 else p 用户名密码出错 div ul each item in week li= item9. Pug使用css样式
//-引入内部样式表 style. #container{ background-color: gray; } //-引入外部样式表 link(rel="stylesheet", href="css/my.css")3.Html代码转pug代码
https://html2jade.org/
4.继承
Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换
示例: 定义父模板 layout.pug
子模板 page-a.pug
//- page-a.pug extends layout.pug block scripts script(src='/jquery.js') script(src='/my.js') block content div 正文内容 p 子内容5. 包含 include
//- includes/head.pug head title 我的网站 meta(charset='utf-8') script. var message = 'hello pug'; window.function(){ // alert(message); } html //- head //- title pug学习 //- meta(charset='utf-8') //- script. //- var message = 'hello pug'; //- window.function(){ //- // alert(message); //- } include head.pug body div(id='contaner' class='style1')6. 注释
//单行注释，会显示在编译后的html代码中 <!--单行注释，会显示在编译后的html代码中 --> div 单行注释 <div>单行注释</div>//- 单行注释，不会显示在编译后的html代码中 div 单行注释 <div>单行注释</div> //- 多单注释 不显示在html代码中7. Express框架集成pug模板
//设置默认模板引擎是pug app.engine('.pug', pug.__express); app.set('view engine', 'pug');总结
- 上一篇： 解决序列号不正确无法安装Win2003
- 下一篇： Gnome3桌面美化