pug是一款HTML模板引擎，用于快速生成对应的html语句

Pug教程-从入门到入坟_.pug-CSDN博客

入门指南 | Pug 模板引擎中文文档 | Pug中文网

使用插件(格式化pug)

image-20241103100735126

基本用法

安装

1
2
npm install pug -g
npm install pug-cli -g

使用

1
pug -P -w xxx.pug

基本语法

结构语法

a) 标签名(属性名=”属性值”) 标签内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//- 此行定义了文档类型为HTML5，这对浏览器渲染网页至关重要。
doctype html
html(lang='en')
    head
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1')
    body 
        //- 单行属性标签
        a(href='https://www.google.com') 谷歌
        //- 多行属性标签
        input(type='text'
            placeholder='请输入内容'
            )

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body> <a href="https://www.google.com">谷歌</a>
  <input type="text" placeholder="请输入内容">
</body>

</html>

b) 分支条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
  body
    //- 声明变量   
    - var friends = 10
    //- 使用case语句
    case friends 
      when 0
        p You have no friends!
      when 1
        p You have 1 friend!
      default
        //- 使用变量的语法#{变量名}
        p You have #{friends} friends!
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <p>You have 10 friends!</p>
  </body>
</html>

c) 循环&&条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//- for循环定义无序列表
- for (var i = 0; i < 3; i++)
    li item
hr
//- for循环变量列表
- var list = ['apple', 'banana', 'orange']
    each item in list 
        //- li的文本内容为item变量的值
        li=item
hr
//- 条件语句(如果不加-，将会把变量声明在代码中打印出来)
- var a = 5
//- 下面的a=10将不会被执行
var a = 10
- if (a == 10)
    p true
- else if (a == 5)
    p false
- else
    p undefined

hr
ul
    //- each循环遍历
    each val in [1, 2, 3, 4, 5]
        li= val
hr
- var n = 0;
ul
    //- while循环
    while n < 4
        li= n++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<li>item</li>
<li>item</li>
<li>item</li>
<hr/>
<li>apple</li>
<li>banana</li>
<li>orange</li>
<hr/>
<var>a = 10</var>
<p>false</p>
<hr/>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<hr/>
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

d) 转义输出

如果代码前面加-表示这部分代码不进行输出

1
2
3
4
5
6
7
8
//- `=`表示转义输出
p= '这个代码被 <转义> 了！'

//- `!=`表示不进行转义输出
p!= '这个代码被 <转义> 了！'

//- 默认是不进行转义输出的
p 这个代码被 <转义> 了！
1
2
3
<p>这个代码被 &lt;转义&gt; 了！</p>
<p>这个代码被 <转义> 了！</p>
<p>这个代码被 <转义> 了！</p>

e) id,class

# 表示id名

. 表示class名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//- 生成一个id为user的div标签(默认是div)
#user
hr
div
    //- 生成一个id为user的a标签
    a#user

    //- 生成一个id为content，class为user的span元素
    span#content.user

    span.user#content

    //- 有.的情况下再.后面的内容被识别为文本
    p.description.
      用户没有添加描述。
      不写点什么吗……

1
2
3
4
5
6
7
8
9
10
11
<div id="user"></div>
<hr />
<div>
    <a id="user"></a>
    <span class="user" id="content"></span>
    <span class="user" id="content"></span>
    <p class="description">
        用户没有添加描述。
        不写点什么吗……
    </p>
</div>

f) mixin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//- 定义
mixin list
  ul
    li foo
    li bar
    li baz
//- 使用
+list
+list

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p 没有提供任何内容。

+article('Hello world')

+article('Hello world')
  p 这是我
  p 随便写的文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>没有提供任何内容。</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>这是我</p>
    <p>随便写的文章</p>
  </div>
</div>

END

1
2
3
4
5
6
7
8
{% tabs tutorial %}
<!-- tab pug语句-->

<!-- endtab -->
<!-- tab html语句-->

<!-- endtab -->
{% endtabs %}