pug模板引擎(上)

安装

1
sudo npm install pug

但命令行提示pug命令未找到,接下来安装pug-cli,注意一定要全局安装,否则无法正常编译。

1
sudo npm install pug-cli -g

查看版本

1
2
3
>>> $ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

生成HTML

新建文件命名为index.pug

1
2
3
4
html
head
title dp2px
body

在命令行输入

1
2
>>> $ pug index.pug 
rendered index.html

你会发现在同目录生成了一个index.html文件,内容如下

1
<html><head><title>dp2px</title></head><body></body></html>

接下来我们使用pug -w实现自动编译。

1
>>> $ pug index.pug -w

我使用的VS Code,你可以让你的编辑器左右两边显示,方便实时查看。

pug

但是我们发现上面生成的html不是标准格式,如果要显示标准格式而不是压缩版就要使用另一个参数了。

1
>>> $ pug index.html -P

你可以自动编译的同时使用标准格式

1
>>> $ pug index.pug -w -P

如果不希望在当前目录下生成html可以自定义输出路径。

1
>>> $ pug index.pug -o newpath/newpath

如果希望修改生成的文件名可以使用下面方式生成

1
>>> $ pug path/index.pug newpath/newindex.html

批量编译,例如批量编译dir目录下的pug文件

1
>>> $ pug dir

结构语法

标签

树状

在默认情况下,在每行文本的开头(或者紧跟白字符的部分)书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系,这样可以构建一个 HTML 代码的树状结构。

注意:后面默认上面是pug文件内容,下面紧跟着是对应生成的html文件内容。

1
2
3
4
ul				
li
li
li
1
2
3
4
5
<ul>
<li></li>
<li></li>
<li></li>
</ul>

内联

为了节省空间,pug嵌套标签提供了一种内联语法。

1
a: img
1
<a><img/></a>

自闭合

pug知道哪些元素是自闭合的,也可以通过在标签后加上 / 来明确声明此标签是自闭合的。

1
2
3
4
img
input
img/
input/
1
2
3
<img/>
<input/><img/>
<input/>

DOCTYPE

HTML5的DOCTYPE书写如下

1
doctype html
1
<!DOCTYPE html>

内容

pug 提供了三种常用的方式来放置内容。

管道文本

这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个 | 字符,这个字符在类 Unix 系统下常用作“管道”功能,因此得名。

1
p: span|dfdfdfdfd
1
<p><span>dfdfdfdfd</span></p>

标签内文本

这实际上是最常见的情况,文本只需要和标签名隔开一个空格即可。

1
p: span dfdfdfdfd
1
<p><span>dfdfdfdfd</span></p>

嵌入大段文本

有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可。

1
2
3
4
5
6
script.
if(usingPug){
console.log("使用了pug")
}else{
console.log("请使用pug")
}
1
2
3
4
5
6
7
<script>
if(usingPug){
console.log("使用了pug")
}else{
console.log("请使用pug")
}
</script>

属性

标签属性和 HTML 语法非常相似,它们的值就是普通的 JavaScript 表达式。可以用逗号或空格作为属性分隔符。

1
2
3
a(href='baidu.com') 百度
= '\n'
a(class='button', href="baidu.com") baidu
1
2
<a href="baidu.com">百度</a>
<a class="button" href="baidu.com">baidu</a>

多行属性

如果有很多属性,可以把它们分几行写。

1
2
3
4
5
input(
type='checkbox'
name='agreement'
checked
)
1
<input type="checkbox" name="agreement" checked="checked"/>

长属性

如果有一个很长的属性,并且JavaScript运行时引擎支持ES2015模板字符串,可以使用它来写属性值。

1
2
3
4
5
6
input(data-json='
{
"非常": "长的",
"数据": true
}
')
1
2
3
4
5
6
7

<input data-json="
{
&quot;非常&quot;: &quot;长的&quot;,
&quot;数据&quot;: true
}
"/>

特殊字符

如果属性名称中含有某些奇怪的字符,可能会与 JavaScript 语法产生冲突的话,可以将它们使用 “” 或者 ‘’ 括起来。还可以使用逗号来分割不同的属性。

1
2
div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')
1
2
<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>

转义属性

默认情况下,所有的属性都经过转义(即把特殊字符转换成转义序列)来防止诸如跨站脚本攻击之类的攻击方式。如果要使用特殊符号,需要使用 != 而不是 =.

[注意]未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击。

1
2
div(escaped="<code>")
div(unescaped!="<code>")
1
2
<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

布尔值

在pug中,布尔值属性是经过映射的,这样布尔值(true和false)就能接受了。没有指定值时,默认是true。

1
2
3
4
5
6
7
input(type='checkbox' checked)
= '\n'
input(type='checkbox' checked=true)
= '\n'
input(type='checkbox' checked=false)
= '\n'
input(type='checkbox' checked=true.toString())
1
2
3
4
5
6
7
<input type="checkbox" checked="checked"/>

<input type="checkbox" checked="checked"/>

<input type="checkbox"/>

<input type="checkbox" checked="true"/>

行内样式

style(样式)属性可以是一个字符串(就像其他普通的属性一样)还可以是一个对象。

1
a(style={color: 'red', background: 'green'})
1
<a style="color:red;background:green;"></a>

类和ID

类可以使用 .classname 语法来定义,ID 可以使用 #idname 语法来定义。

考虑到使用 div 作为标签名这种行为实在是太常见了,所以如果省略掉标签名称的话,它就是默认值。

1
2
3
4
5
a.button
.content
="\n"
a#main-link
#content
1
2
3
4
<a class="button"></a>
<div class="content"></div>
<a id="main-link"></a>
<div id="content"></div>

标签嵌入

标签支持一种标签嵌入的写法,形式如下。

1
#[标签名(标签属性)  标签内容]

对于内联标签来说,这种写法比较简单,例如。

1
2
3
p.
这是一个很长很长而且还很无聊的段落,还没有结束,是的,非常非常地长。
突然出现了一个 #[strong 充满力量感的单词],这确实让人难以 #[em 忽视]。

1
2
3
4
<p>
这是一个很长很长而且还很无聊的段落,还没有结束,是的,非常非常地长。
突然出现了一个 <strong>充满力量感的单词</strong>,这确实让人难以 <em>忽视</em>
</p>

空格调整

pug 默认会去除一个标签前后的所有空格,而标签嵌入功能可以在需要嵌入的位置上处理前后空格。

1
2
3
4
5
6
7
8
p
| 如果我不用嵌入功能来书写,一些标签比如
strong strong
| 和
em em
| 可能会产生意外的结果。
p.
如果用了嵌入,在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。
1
2
<p>如果我不用嵌入功能来书写,一些标签比如<strong>strong</strong><em>em</em>可能会产生意外的结果。</p>
<p>如果用了嵌入,在 <strong>strong</strong><em>em</em> 旁的空格就会让我舒服多了。</p>

注释

单行注释

单行注释和 JavaScript 类似,但是必须独立一行。

1
2
3
// 一些内容
p foo
p bar
1
2
3
<!-- 一些内容-->
<p>foo</p>
<p>bar</p>

不输出注释

只需要加上一个横杠,就可以使用不输出注释。

1
2
3
//- 这行不会出现在结果里
p foo
p bar

块注释

1
2
3
4
body
//
随便写多少字
都没关系。
1
2
3
4
5
6
<body>
<!--
随便写多少字
都没关系。
-->
</body>

条件注释

pug 没有特殊的语法来表示条件注释(conditional comments)。不过因为所有以 < 开头的行都会被当作纯文本,因此直接写一个 HTML 风格的条件注释也是没问题的。

1
2
3
4
5
6
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×