Pug

序章

前言

最近事情是真的多，目前情况是，还有三个项目，其中两个会在本月内某个时间结题，还有一个则是中期检测

之后考试、办算法比赛热身选拔赛活动、面试、团队队长换届这些一大堆事情都在这个月内接踵而至

所以我的上一篇关于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'