网页模板pug基本语法
pug原名jade，因版权问题更名为pug，即哈巴狗。与hexo默认模块ejs一样，pug也是一个模板引擎，可用于快速的网站开发，当然也可以用于静态博客网站的设计。
如何使用
1
| yarn add pug pug-plain-loader
|
1
2
3
| <template lang='pug'>
</template>
|
基础语法知识
HTML
1
2
3
4
5
| <label>
<input type='checkbox' />
<span>记住密码</span>
<div class='show-box'></div>
</label>
|
PUG
1
2
3
4
| label
input(type="checkbox")
span 记住密码
.show-box
|
差别有了，惊不惊喜？再来！
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div class="login-animate">
<div class="left-ear"></div>
<div class="right-ear"></div>
<div class="head">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="face">
<div class="nose"></div>
<div class="mouth"></div>
</div>
</div>
<div class="body"></div>
<div class="left-arm"></div>
<div class="right-arm"></div>
</div>
<div class="login-form">
<div class="username">
<input type="text" name="username">
</div>
<div class="password">
<input type="password" name="password">
<div class="pwd-eye" style="background-image: url('img/password-show.png');" data-flag="hide"></div>
</div>
</div>
|
PUG
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .login-animate
.left-ear
.right-ear
.head
.left-eye
.right-eye
.face
.nose
.mouth
.body
.left-arm
.right-arm
.login-form
.username
input(type="text" name="username")
.password
input(type="password" name="password")
.pwd-eye
|
可以看出代码量明显减少很多。pug不同于html，前者不需要标签的开和闭，如html的<p>Demo</p>，在pug使用p Demo即可。
pug对空格敏感，有点类似python对制表符tab敏感。pug使用空格作为缩进符，当然用soft tab也可行。同一级标签需保证左对齐。
注释
pug使用 //- 或 // 对代码进行注释，前者注释内容不出现在渲染后的html文件中，后者反之。
1
2
| //- html中不包含此行
// html中会包含此行
|
属性
pug将标签属性存放于括号()内，多个属性之间以逗号或空格分隔。此外，对于标签的 id 和 class，pug使用 # 紧跟标签 id ,使用 . 紧跟标签 class，可以同时设置多个 class。
1
2
| h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")
|
👇
1
2
| <h1 id="title">Test title</h1>
<img id="name" class="class1 class2" src="/test.png" alt="test">
|
包含
为了方便代码复用，pug提供了include包含功能，以下代码会将_partial目录下的head.pug文件内容包含到当前调用的位置。有点C/C++中内联函数的意思。
1
2
3
| doctype html
html(lang='en')
include _partial/head.pug
|
继承
下面是一个简单的base模板，通过block定义了页面头部head和内容body。块block有点类似C/C++的抽象函数，需要在继承者中完成定义，填充具体内容。
1
2
3
4
5
6
7
| //- base.pug
html
head
block title
body
block content
|
以下文件使用extends继承以上模板，通过block覆盖或替换原有块block。当然，继承者也可以在原有基础上继续扩展。
1
2
3
4
5
6
7
8
9
10
|
//- index.pug
extends base.pug
block title
title "Test title"
block content
h1 Hello world!
block article
|
变量
pug中通过 - var name = value 的形式定义变量
1
2
3
4
5
6
| - var intData = 100
- var boolData = false
- var stringData = 'Test'
p.int = intData
p.bool = boolData
p.stringData = stringData
|
需注意的是，在引用变量时需要在引用位置加上=号，否则会默认将变量名当成普通字符串使用。
如果想要将变量与其它字符串常量或是变量连接在一起，就不能用等号了，而是应该用#{}，该符号会对大括号内的变量进行求值和转义，最终得到渲染输出的内容。
1
2
3
4
| - var girl = 'Lily'
- var boy = 'Jack'
p #{girl} is so beautiful!
p And #{boy} is handsome.
|
条件结构
pug的条件语句与其它语言类似，均是如下这般：
1
2
3
4
5
| - var array = [1, 2]
if array.length > 2
p true
else
p false
|
unless 为false，才执行，用法与if类似
1
2
3
| - var array = [1, 2]
unless !istrue
p hello
|
1
2
3
4
5
6
7
| -var name = 'java'
case name
when 'java': p Hi, java
case name
when 'pug': p Hi, pug
default
p Hi
|