使用 pug 模板语法提高页面开发的效率

简介: pug由jade改名而来,通过缩进(表示标签间的嵌套关系)的方式来编写代码的过程,在编译的过程中,不需要考虑标签是否闭合的问题。可以加快写代码速度,也为代码复用提供了便捷。

pug由jade改名而来,通过缩进(表示标签间的嵌套关系)的方式来编写代码的过程,在编译的过程中,不需要考虑标签是否闭合的问题。可以加快写代码速度,也为代码复用提供了便捷。

编译pug模板需要安装npm包

$ npm install pug
复制代码

新建pug模板

div
 p #{name}今年#{age}岁了
复制代码

通过js解析pug模板,需要引入pug模块

const pug = require('pug');
const compiledFunction = pug.compileFile('template.pug');
console.log(compiledFunction({
  name: '张三',
  age: 14,
}));
console.log(compiledFunction({
  name: '李四',
  age: 25,
}));
复制代码

使用node运行js文件,结果如图

也可以将解析和渲染放在一起,但是这样会对性能造成影响,这个问题可以通过缓存解决

console.log(pug.renderFile('template.pug', {
  name: '王五',
  age: 30,
}));
复制代码


语法


注释

使用//可以转义生成html注释;使用//-表示pug内部的注释,不转义;条件注释直接写,<开头的会被当作文本

属性

用逗号作为属性分隔符,不加也可(可以使用JavaScript表达式);当属性有很多时可以分多行

div(class='pug-style' id='div-1')
 - var isTrue = true
 p(class=isTrue ? 'success' : 'faild') #{name}今年#{age}岁了
复制代码

当属姓名中含有一些可能会产生语法冲突的字符时,使用""、''将这些属性名包裹起来,或者使用逗号将前后属性分隔开

属性可以使用JavaScript语法嵌入,例如:

- var url = 'www.baidu.com'
a(href='http://' + url)
复制代码

如果运行环境支持ES6,可以使用模板字符串${}

使用!=可以不转义(不推荐,很危险,会遭到脚本攻击

true和false的使用

//- 默认为true
input(type='checkbox' checked)
input(type='checkbox' checked=true)
//- false不编译
input(type='checkbox' checked=false)
//- toString保留true的值
input(type='checkbox' checked=true.toString())
//- 编译结果如下
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox" checked="true"/>
复制代码

如果声明doctype html缩写样式checked就不会映射属性

行内样式使用{},类属性使用[]可以嵌入

a(style={color: 'red', 'background-color': '#409eff'})
- var classes = ['test', 'test2']
a(class=['blue-div', 'big-div'], class=classes)
复制代码

属性名有短横线连接的,属性名需要加引号,否则可能会出错

字面值

  • a.button = <a class="button"></a>
  • .content = <div class="content"></div>(div过于常见,可以省略)
  • a#main-link = <a id="main-link"></a>
  • #content = <div id="content"></div>

使用&attributes可以将一个对象追加到属性列表中(有一定的危险性,减少使用

分支条件

类C语言中都会有switch这个语法,pug中使用case表示

pug中在没有遇到非空语句之前会一直执行下去,当不想传递分支时使用- break来中断分支传递

循环

使用for控制循环

-for (var i = 0; i < 5; i++)
  li item
//- 输出
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
复制代码

通过each控制循环

- var arr = ['a', 'b', 'c', 'd']
each item in arr
  li= item
//- 输出  
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
复制代码

另外,可以用while控制循环

使用=可以转义代码,等号换行或者行内紧贴父标签;使用!=可以不转义输出,比如携带标点符号等

条件

使用if可以进行条件判断

- var user = {name: '张三'}
- var isTrue = false
div
  if isTrue
    h2.blue 描述
  else if user
    h2.green 描述
    p.des= user.name
  else 
    h2.red 描述
//- 输出
<div>
  <h2 class="green">描述</h2>
  <p class="des">张三</p>
</div>
复制代码

unless等价于!=

包含

使用include关键字引入外部文本,可以是pug文件,也可以是js文件等

被包含的文件的路径,如果是一个绝对路径(如 include /root.pug),那么前面会加上 options.basedir 选项属性来进行解析。否则,路径应该相对于正在被编译的当前文件

嵌入

  • #{}转义,可以添加正确的任意JavaScript表达式。
  • 如果需要#{}文本,可以使用\或者#{}来转义
  • 使用!{}不转义,具有一定的危险性
  • 使用#[]转义pug语句

*混入

这是pug很强大的一个功能,类似于函数编程,可以传参

mixin eat(food)
  li 中午吃#{food}
ul
  +eat('炸鸡')
  +eat('烤鸭')
//- 输出  
<ul>
  <li>中午吃炸鸡</li>
  <li>中午吃烤鸭</li>
</ul>
复制代码

也可以把代码块传入,类似于Vue的插槽,通过block接收传进来的代码块

mixin user(name)
  .user
    h2 #{name}
    if block
      block
    else
      p 没有详细资料
+user('张三')
+user('张三')
  p age: 14
  p address: china
//- 输出
<div class="user">
  <h2>张三</h2>
  <p>没有详细资料</p>
</div>
<div class="user">
  <h2>张三</h2>
  <p>age: 14</p>
  <p>address: china</p>
</div>
复制代码

可以传入属性,在引用混入的时候传入属性

mixin link(href, name)
  a(class!=attributes.class, href=href) name //- 使用!=防止二次转义
+link('www.baidu.com', '百度')(class="button")
//- 输出
<a class="button" href="www.baidu.com">name</a>
复制代码

支持ES6的展开运算符

mixin ulArr(className, ...items)
  ul(class=className)
    each item in items
      li= item
    else
      li 没有内容
+ulArr('ulArr', 1,2,3,4)
复制代码


结束,又一门新技能


最后推荐一个在线转换HTML和pug的网站


相关文章
|
计算机视觉 Python
OpenCV完成面部情绪识别
OpenCV完成面部情绪识别
333 0
|
缓存 API 区块链
ccxt中文教程
CCXT官方教程中文版由汇智网翻译整理,访问地址:http://cw.hubwiz.com/card/c/ccxt-dev-manual/。 CCXT是一个JavaScript / Python / PHP 开发库,用于数字货币的交易与电子商务,支持众多的比特币/以太币/山寨币交易市场和商户API。
9387 2
|
Web App开发 小程序 前端开发
微信小程序自动化测试最佳实践(附 Python 源码)
本文主要分享下微信小程序自动化测试的一些最佳实践心得,包括微信小程序的基本测试技术和操作方法,以及如何利用 Appium 的 WebView 测试技术 + adb proxy 完成微信小程序的自动化测试(可能是目前最实用的小程序自动化测试技术),并附上 Python 版源码。
微信小程序自动化测试最佳实践(附 Python 源码)
|
10月前
|
存储 前端开发 Go
Go 文件的读取操作
本文介绍了 Go 语言标准库中的 `os` 包和 `bufio` 包,重点讲解了 `os` 包中的 `Open` 和 `OpenFile` 函数及 `File` 结构体的 `Read` 方法,以及 `bufio` 包中的 `NewReader` 函数和 `Reader` 结构体的 `ReadString` 方法。通过示例代码展示了如何使用这些方法高效读取文件,减少磁盘操作。
155 2
|
6月前
|
数据采集 运维 监控
数据采集监控与告警:错误重试、日志分析与自动化运维
本文探讨了数据采集技术从“简单采集”到自动化运维的演进。传统方式因反爬策略和网络波动常导致数据丢失,而引入错误重试、日志分析与自动化告警机制可显著提升系统稳定性与时效性。正方强调健全监控体系的重要性,反方则担忧复杂化带来的成本与安全风险。未来,结合AI与大数据技术,数据采集将向智能化、全自动方向发展,实现动态调整与智能识别反爬策略,降低人工干预需求。附带的Python示例展示了如何通过代理IP、重试策略及日志记录实现高效的数据采集程序。
295 7
数据采集监控与告警:错误重试、日志分析与自动化运维
|
5月前
|
机器学习/深度学习 算法 数据安全/隐私保护
BOC调制信号matlab性能仿真分析,对比功率谱,自相关性以及抗干扰性
本内容介绍了一种基于BOC(Binary Offset Carrier)调制的算法,使用Matlab2022a实现。完整程序运行效果无水印,核心代码配有详细中文注释及操作步骤视频。理论部分阐述了BOC调制在卫星导航中的应用优势:相比BPSK调制,BOC信号功率谱主瓣更窄、自相关函数主峰更尖锐,可优化旁瓣特性以减少干扰,提高频谱利用率和同步精度,适合复杂信道环境下的信号接收与处理。
|
机器学习/深度学习 人工智能 自然语言处理
数据标注是AI认识世界的起点
数据标注是AI认识世界的起点
429 2
数据标注是AI认识世界的起点
|
资源调度
uniapp引入vant组件库
uniapp引入vant组件库
3061 11
|
小程序 JavaScript Android开发
uniapp开发时可能会遇到的问题及解决方法,uniapp避坑指南!
uniapp开发时可能会遇到的问题及解决方法,uniapp避坑指南!
|
JavaScript 前端开发 测试技术
深入调研了微前端,还是iframe最香(二)
深入调研了微前端,还是iframe最香
951 0
深入调研了微前端,还是iframe最香(二)

热门文章

最新文章