写在最前

本文是关于pug的技术/语法汇总，内容偏向全面，含有语法介绍/实例分析等部分。
如果想要完全阅读本文，建议您具有HTML/CSS/Javascript知识，了解vue等前端框架的基本形式更佳。

pug是什么，你为什么需要pug

PUG（前称Jade）是一种高性能的模板引擎，它使用简洁的语法来描述HTML结构。PUG模板引擎以其速度快和语法简洁而受到开发者的喜爱。

pug基于Node JS，它使用一种简洁的语法来编写HTML。PUG的设计理念是减少模板代码的冗余，提高代码的可读性和编写效率。PUG模板最终被编译成HTML，因此它们可以直接用于Web页面的渲染。

换言之，pug是一种HTML的替代体，vue中有与之占据相同位置的存在，其与HTML的关系在于，pug是一种通过引入变量与js语法的前端技术，通过“渲染”（编译），生成最终表现在浏览器上的HTML。在纯静态的HTML上进行了一层动态封装，为HTML代码提供了可复用的能力。体现一种动态/模板的能力，提高HTML编写效率，减少编码量。

巧妙地说，可以pug看作py in HTML，可以看出很多思想接近的地方。

JS相关

作为最突出的特点，了解了pug引入了什么动态内容，才能更好的了解静态部分。

变量

基本的赋值语句：

- var variablename = value

与js语法保持一致，不指定类型。

分支

pug提供了两种分支：case和if，与一般的编程语言的switch/if对应。

- var friends = 10
case friends
  when 0
    p 您没有朋友
  when 1
    p 您有一个朋友
  default
    p 您有 #{friends} 个朋友
// 第二种写法
- var friends = 1
case friends
  when 0: p 您没有朋友
  when 1: p 您有一个朋友
  default: p 您有 #{friends} 个朋友

与常见编程语言不同的是，这里的分支的停止条件是遇到第一个非空代码块，倘若想要什么都不输出，才需要使用-break

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green 描述
    p.description= user.description
  else if authorised
    h2.blue 描述
    p.description.
      用户没有添加描述。
      不写点什么吗……
  else
    h2.red 描述
    p.description 用户没有描述

if作为常用的语句，在pug里设置了语法糖，前方加不加-，有没有括号都可以。非常自由
pug提供了if的相反语句==unless== 等价于if not

循环

-的含义

本质上，-是一个不输出语句的标记，使用-标记的代码/代码块都不会输出，而是作为动态部分处理。
对应的，=是一个有输出语句的标志，同样对代码块生效。！=是不转义输出，后者在后文有详细说明。

迭代的两种方式

pug的两种循环为each/while，对标for/while

ul
  each val in [1, 2, 3, 4, 5]
    li= val
- var values = [];
ul
  each val in values
    li= val
  else
    li 没有内容
ul
  each val, index in ['〇', '一', '二']
    li= index + ': ' + val
- var n = 0;
ul
  while n < 4
    li= n++

与js基本保持一致。值得说的是else，语句在循环没有对象的时候运行。

嵌入

在pug中的嵌入语法是#{}，{}内部可以是任何js表达式，换言之可以说{}内外的信息是隔离的，有js域和html域，需要通过特别的语法才能访问js域的值，方法就是嵌入或者逻辑代码，赋值记号等。
当然，嵌入的内容都是通过js转义的，如果不想要转义，可以使用！{}记号，{}内的内容就不会被转义了。
嵌入也可以实现段内插入其他标签，如em，strong

p.
  这是一个很长很长而且还很无聊的段落，还没有结束，是的，非常非常地长。
  突然出现了一个 #[strong 充满力量感的单词]，这确实让人难以 #[em 忽视]。
p.
  使用带属性的嵌入标签的例子：
  #[q(lang="es") ¡Hola Mundo!]

基本语法

标签

pug中有所有的HTML标签支持，使用缩进表示嵌套关系，可以自动识别自闭合标签，适应多种格式。

div 
	p 这是一个内层元素
	a(href="www.baidu.com") 这是一个网页链接

上边的代码可以渲染成为

<div>
	<p>这是一个内层元素</p>
	<a href="www.baidu.com">这是一个网页链接</a>
</div>

当然，如果元素内部属性过多，也可以使用多行元素，pug会自动匹配括号。同时属性还可以传入一个json对象（模板字符串），括号内同时支持所有的合法js表达式。

input(  
type='checkbox'  
name='agreement'  
checked  
)
//模板字符串
input(data-json=`  
{  
"非常": "长的",  
"数据": true  
}  
`)
//js表达式
body(class=authenticated ? 'authed' : 'anon')

由于括号内支持所有合法js表达式，因此同样要避开关键字，可以使用双引号，单引号括起来，表明其不需要被js解析。
括号内同样支持模板字符串,与正常的js无差别。
当内容需要多行时，可以在标签后加一个.，表示内容为直接紧邻的代码块，代码块被视为纯文本，在写css和script时常用。

p.
  这是一个很长很长而且还很无聊的段落，还没有结束，是的，非常非常地长。
  saadadaasfa

值得说的是，.标识符单独出现时，所属直接的上一级，而包含下方的整个代码块。

属性转义

等号运算符”=”如果用在标签上,表示将等号右边的内容用左边的标签包裹起来,无论在属性里还是在元素中,使用等号则意味着接受内容的转义,比如大于号变为& g t等。而使用”！=“不等号，则表示对内容不作转义处理，使用时需要小心，这样的写法可能会导致安全问题。

布尔值处理

pug中对布尔值做了映射，符合常用的编程规范，默认为true

注释

pug有两种注释类型，一种保留一种不保留
输出注释是保留的注释类型，代表在进行html渲染之后，作为html注释保留。即参与渲染变为\