pug模板入门

最新推荐文章于 2024-06-25 11:10:30 发布

宿炎

最新推荐文章于 2024-06-25 11:10:30 发布

阅读量4.7k

点赞数 3

分类专栏： IT

本文链接：https://blog.csdn.net/weixin_44167338/article/details/86423571

版权

IT 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍pug模板引擎

1.pug中文文档参考

https://pug.bootcss.com/api/getting-started.html
在这里插入图片描述

2.入门示例

1.在原始目录下建立一个views目录，来存放该 test.pug

html
    head
        script
        style
    body

2.把该代码输出成一个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("编译失败");
    else
        console.log("编译成功");
})

3.生成的html页面

<html>
  <head>
    <script></script>
    <style></style>
  </head>
  <body></body>
</html>

4.关于class/style的写法——属性放在（）里面，用逗号分隔

html
    head
        script
        style
    body
        div(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中如此添加数据

var pug = require('pug');
var fs = require('fs');

var str = pug.renderFile('./test.pug', {
pretty: true,
divsytle1: {
width: '200px',
height: '300px',
background: 'blue'
},
classarrays:[
'classname1',
'classname2'
]
});

fs.writeFile('./build/test.html', str, function (err) {
if (err)
console.log("编译失败"+err);
else
console.log("编译成功");
});

并在test.jade文件中修改如下：

html
    head
        script
        style
    body
        div(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中，我们需要这样来写这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可,
有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可

div 名称：DobTink
    div 年龄：15
    script(src='a.js')
    script. //注意在script后面加个点"."
        window.onload = function () {
            console.log('测试输出');}
a(href="http://www.dobtink.com") 首页

6、在pug中使用if else switch while 等语句

pug中的 if 使用
Pug 的条件判断的一般形式的括号是可选的，所以可以省略掉开头的 -，效果完全相同。类似一个常规的 JavaScript 语法形式

html
    head
    body
        -var a = 15;
        if a%2 == 0
            div(style={background:'red'})
        else
            div(style={background:'green'})

pug中的 switch 使用

html
    head
    body
        -var a = 3;
        case a
            when 0
                div aaa
            when 1
                div bbb
            when 2
                div ccc
            when 3
                div ddd
            default
                div default

7.循环

Pug 目前支持两种主要的迭代方式： each 和 while

ul
    each 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= item

9. 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

//- layout.pug
html
head
title 我的站点 - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p 一些页脚的内容

子模板 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');

宿炎

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录