pug模板语法

Posted on Edited on

pug 是 HTML 的模板引擎，原名 jade ，大大简化了 HTML 代码的书写，并且增加了许多功能，代码之间的嵌套关系是统一通过** 空格 或者 tab 来实现的， 不能两者混合用 ，并且 1个tab不等于4个空格 **，请务必先记住这一点。

基础

pug 长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
doctype html  
head  
 meta(charset='utf-8')  
 title my resume  
 style.
  body{background-color:#ABFDBA}
 script.
  var name = 'scoot' 
body 
 - var jade = {source:'jade',level:'high'}
 h2 a frondend enginner #{jade.level} 
 p   
  | Alice  
  | Tom 
  | Hairen 
  a(href='www.baidu.com') baidu 
 .skills  haha
 div.program  lalla
 ul#fruit.fruit
  li aaa
  li bbb
 div: a hahhah

以上代码等价与：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html  >
<head> 
  <meta charset="utf-8"/>
  <title>my resume  </title>
  <style>body{background-color:#ABFDBA}</style>
  <script>var name = 'scoot' </script>
</head>
<body>
  <h2>a frondend enginner high</h2>
  <p>  
    Alice  
    Tom 
    Hairen <a href="www.baidu.com">baidu </a>
  </p>
  <div class="skills"> haha</div>
  <div class="program"> lalla</div>
  <ul class="friuts" id="fruit">
    <li>aaa</li>
    <li>bbb</li>
  </ul>
  <div><a>hahhah </a></div>
</body>

符号

符号 含义
. 表示之后的内容翻译为纯文本
: 表示嵌套关系，不需要换行
| 表示之后的内容翻译为纯文本，不识别HTML标签
// 注释，在编译出来的html中显示
//- 注释，在编译出来的html中不显示
  • | 后接 js 代码
    #{变量} | 转义插值
    !{变量} | 非转义插值

逻辑操作

1
2
3
4
5
6
7
8
9
10
11
12
- var list = ['one', 'two','three'] 
- for (k in list)
 p= list[k] 
if list 
 if (list.length > 2)
  p lists more than two	
 else if (list.length >= 1)
  p two lists or one list
 else 
  p no list   
else 
 p no list

输出

1
2
3
4
<p>one</p>
<p>two</p>
<p>three</p>
<p>lists more than two	</p>

Mixin

minix可以理解为就是在定义一个函数，然后用+来调用函数，函数可以进行嵌套。

1
2
3
4
5
6
7
mixin student(name,course)
 p #{name} studing #{course}
mixin group(obj)
 h2 my name is #{obj.name}
 +student(obj.name,obj.course)
h1 
 +group({name:'tom',course:'jade'})

输出：

1
2
3
4
<h1> 
    <h2>my name is tom</h2>
      <p>tom studing jade</p>
</h1>

模板继承

关键词 描述
block 占位符，通过其实现子模板的追加和替换
extends 继承，子模板继承父模板中的代码
append 在子模板中向后追加内容
prepend 在子模板中向前追加内容
include 引入文件，并将其中的代码放到模板中

实例

例如，父模板如下：

1
2
3
4
5
6
7
8
9
10
// layout.jade
doctype html
html
  head
    block scripts
      script(src='jquery.js')
    block styles
  body
    block content
      p there's no content here

现在有一个子模板继承了上述父模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// page1.jade（假设和layout.jade相同路径）

extends layout // .jade扩展名可以省略

block scripts  
  script(src='react.js')

append scripts
  script(src='underscore.js')

prepend scripts
  script(src='vue.js')  	

block content //内容被替换为空

输出如下，留意脚本顺序：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <script src="vue.js"></script>
    <script src="react.js"></script>
    <script src="underscore.js"></script>
</head>
<body>
</body>
</html>

include

include一般用来引入模板间可以复用的代码（比如头部和尾部），实现代码的去冗余。

1
2
3
4
5
6
7
doctype html
html
  head
    style(type='text/css')
      include style.css
  body
    include content.html