序章
前言
最近事情是真的多，目前情况是，还有三个项目，其中两个会在本月内某个时间结题，还有一个则是中期检测
之后考试、办算法比赛热身选拔赛活动、面试、团队队长换届这些一大堆事情都在这个月内接踵而至
所以我的上一篇关于JS的博文还没更完….
不过这里先写一个短篇吧
更新日志
2022/05/07
一次偶然的机会认识到了Jade，结果发现它现在叫做Pug
学了一会儿之后发现它还是有点东西的2022/05/08
基本更新完毕
概述
什么是Pug
简单而言就是——一个模板引擎
如果不知道什么是模板引擎，可以想想php、jsp、ejs….
大概就是那种感觉个人觉得，目前而言它相较于Jade来说更为常见
不过我们还是学一下jade吧——哦，它改名叫pug了
Pug的特点
我们长话短说：
容易读写，支持Emmet语法、部分JS语法，以及类似于继承、抽象、内联函数等书写形式
总之就是能帮你偷懒
基本使用
基本格式
首先来直接看看如何生成一个基本的结构
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content很棒吧？不需要写闭合标签，就跟高效的Python一样，通过空格缩进就实现嵌套关系了
接下来让我们细说一下其中的内容
变量
变量声明
-var title='pug is so cute'没错，可以直接在一堆类似于HTML的东西里面声明变量然后调用！
当然，更多时候是不会直接在模板里面声明变量的，而是写在后端的逻辑里面，根据不同的情况渲染不同的内容——这个大概也算是后端渲染了吧
等号表示
title=title等号的左边是标签，右边是变量，如果这个变量的值是 pug is so cute
那么这一段将被解析为
<title>pug is so cute</title>井号表示
如果标签包括的仅有常量，直接写成
div 123hhh但是如果出现变量和常量混杂的情况，我们就需要用到#
div wow!!!, #{pug}叹号表示
和等号基本一样，就看个人喜好决定使用哪个
div !=pug属性
单个属性
标签的属性用括号括起来就好了
link(rel='stylesheet', href='/stylesheets/style.css')多个属性
一个属性如果有多个值——比如style，对于这种情况，下面两种写法都是可取的：
p(style="color:#999999;font-size:18px")
h2(style={color:"#666666","font-size":"20px"})此外，之前也提到过，Pug是支持Emmet的，当然由于Pug对空格缩进比较敏感，加之其存在一些逻辑判断涉及到> 、<等符号，所以实现多级嵌套可能比较困难（当然我们可以用Pug的循环来达到减少代码量的目的）
不过我们依旧能够使用简单的Emmet为标签添加id、class等属性
div.class1.class2 没错,是EMMET语法
div#id1.class1(class="class2") 非常棒！<div class="class1 class2">
没错,是EMMET语法
</div>
<div id="id1" class="class1 class2">
非常棒!
</div>注释
行注释
// 我是一段行注释语法就和原来的一样，不过行注释会被解析到HTML中:
<!-- 我是一段行注释 -->块注释
不是闭合的，是通过缩进来判断注释的范围
//- 我是块注释
div 123
div 456
div END注释的范围是div 123和div 456
块注释不会被解析，在对应的HTML部分中消失得无影无踪
其实，
-可以看做是声明在仅在服务端执行的代码
分支
if系列
三目运算
unless
相当于if取反——这可能是因为Pug为了避免对于感叹号的处理出现二义性
unless false
div That is good!!! case
受到以前学的知识的影响，总是把这个叫做switch，但是实际上是case，并且不太一样的是，这里用的是when来表示每种情况
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends注意，要是不换行的话，需要写成这样:
- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends循环
for
- var array = [1,2,3]
ul
- for (var i = 0; i < array.length; ++i) {
li hello #{array[i]}
- }当然，老规矩，如果只有一条语句，那么可以省略括号
while
和while类似
ul
while num<5
li= num++ each
可以拿到下标，可以不写-
是最常用的形式
ul
each val, index in ['西瓜', '苹果', '梨子']
li= index + ': ' + val继承
抽象
通extends关键字进行模板继承
首先得有一个父级，而且这个父级一般是有抽象的内容需要实现:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content注意最后一行的block，这并不一个标签，而是抽象内容声明。
可以看做是一个插槽
实现
之后我们需要一个子级:
extends layout //- layout是父级文件的名字
block content
div 继承了layout,并实现了content部分包含
除了主动作为某个模板的子级（继承），也可以主动作为某个模板的父级（包含）
其实也就是将目标模板插入
基本使用
doctype html
html
head
include header //- 引入叫做header的模板文件
body
h1 pug模板
block content混合
概念
相当于函数，可以传参
当然，也有叫做混入的，这取决于对mixin的翻译
基本使用
mixin进行声明，+调用
mixin show(time)
h3= time
+show('2017-11-11')调用其他语言
令人难以置信！
真是太棒了！
:markdown
# Markdown 标题
这里使用的是 MarkDown 格式
script
:coffee
console.log '这里是 coffee script'
