pug 模板引擎语法学习和记录

最新推荐文章于 2026-06-16 09:34:02 发布

原创最新推荐文章于 2026-06-16 09:34:02 发布 · 2.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

nodejs

本文介绍了pug模板引擎的基础知识，包括注释、缩进语法、style和script的编写、div的简写、转义符号、变量定义、循环遍历、case when语句以及混入和include语法。强调了保持一致的缩进风格对于避免问题的重要性，并提供了多种pug语法的示例。

文章目录

pug模板引擎简单学习
总结

pug模板引擎简单学习

pug 模板引擎, 之前也叫 jade模板引擎. 用来做服务端渲染常用的一种模板引擎.

pug模板引擎的默认文件头信息.

🚩 注意: 编写pug模板的时候, 一定要注意, 如果你使用空格来缩进, 那么你整篇文件最好都要用空格 来缩进, 如果你使用tab键 来缩进, 那么最好你整篇都要用tab键 来缩进, 要保证整篇文件的缩进风格一致, 否则很容易导致不易察觉的问题.

pug模板中注释写法

pug模板引擎中的注释的写法 .

pug 模板文件中, 有两种形式的注释.

一种是 html的注释, 可以最后编译成 html 的注释.
一种是 pug 的注释, 仅仅用来我们编写代码的时候来看的注释, 不会再编译成 html中的注释内容.
#1. pug 的注释
	//- 我是pug的注释,单行的

	//- 
		我是第一行注释
     我是第二行注释
     .....多行注释

# --------------------------------------------------
#2. html 的注释
	// 我是html的注释  单行的注释

	//
		我是第一行html的注释
     我是第二行html的注释
     .......多行html注释

pug模板引擎常用语法

缩进语法

一个缩进表示一层html 嵌套, 不缩进, 则表示html 结构时同级的, 如下:

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body
    	h1 我是一级标题
        div 我是和h1同级的div

style 样式的写法

用小括号的形式给html 标签添加类名或属性.

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        // style.  style后面加一个 点 号,表示开始编写style样式
        style.
            .mydiv{
                width:200px;
                height:200px;
                background: red;
            }
    body
        h1 我是标题
        div 我是和h1同级的div
        // 给thml添加类名或属性
        div(class="mydiv") 我是类名为mydiv

行内样式的编写形式

行间样式可以通过小括号给属性的方式写行内样式, 然后style 给一个对象, 对象内通过key value 的形式编写样式.
// 一种 类 js的对象的写法.
.mydiv2(style={width:"100px", height:"200px",background:"cyan"})

script写js的写法

script 的写法跟 style 的写法也一样, 需要在 script 后面加上一个 . 点号, 来表示script 内容开始了.
script(type="text/javascript").
            console.log("我是script标签里是js内容哦");
            alert("我是pug中script 的写法哦!")

div的简写形式

可以通过类名或者id名的形式简写div 标签.
.mydiv2 我是div2
#myid 我是id为myid的 div

转义符号

pug 模板文件中的转义符号: | , 用来保证某些内容原样输出.

div
	hello
    
// 如上情况, 在pug模板中, 另起一行写内容的时候, 会把 hello 编译成 <hello></hello> html标签, 如果我们想要原样输出该内容则需要用到转义符号
    
    
div
	| hello  // 这里的 hello 就会原样输出, 就不会转换为html标签了

pug中定义变量

在pug模板引擎中, 可以像类似于 js 的写法那样,定义变量, 循环之类的语法.

在pug中定义变量, 用 - 中划线来定义, 演示如下
- let str = "你好哇,pug变量"
div #{str}  // 在这里引用呈现一下对应的变量.

pug中的循环遍历

each in 循环遍历

语法: each item, index in usersArr 循环遍历.
ul
	each item in usersArr
	li 姓名是: #{item.name} --> 年龄是: #{item.age}

for循环遍历

**语法: ** - for(let i=0;i<4;i++) 循环体不再加大括号

🚩 注意: for 循环前必须加一个 - 中划线, 并且中划线和 for 关键字之间必须有一个空格, 不然程序会报错.
# 演示代码
 ul
     - for(let i=0;i<5;i++)
		li #{i}

pug 中的 case when

类似于js 中的 switch case 语法, pug中存在的是 case when语法和 js 中的 switch case 用法类似.

  - let num = 1
            case num
                when 1
                    p num 是一
                when 2
                    p num 是二
                default
                    p num 是其他值

混入模式,宏模式

定义一个静态内容

混入模式/宏模式, 即可以定义完重复使用某个定义的内容.

#1. 定义一个自己的标签内容, 只定义的时候不呈现.
mixin myDiv
            div 我是非常常用的 div
            
#2. 调用自己定义的标签, 可以多次调用.
	+ myDiv
    + myDiv
    + myDiv

定义一个函数语法

定义函数:

#1. 定义一个函数
mixin pet(name,sex)
	p 这是一只 #{name};--> 它的性别是: #{sex}

#2. 调用该函数
+pet("dog","female")
+pet("cat","male")

include语法

include 语法可以用来包含公共的一些模板来引用指定模板
include public.pug // 当前文件夹下, 同目录下的 pug模板

# 查找 assets目录下的 assets.pug 模板
include assets/assets.pug

总结

语法总结代码:

doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        title Title
    body
        h1 #{users[0].name}
        - let str = "hello,你好pug变量"
        .str #{str}
        ul
        each item in usersArr
            li 姓名是: #{item.name} --> 年龄是:#{item.age}

        ul
            - for(let i=0;i<5;i++)
                li #{i}
        - let num = 1
            case num
                when 1
                    p num 是一
                when 2
                    p num 是二
                default
                    p num 是其他值
        mixin myDiv
            div 我是非常常用的 div

        + myDiv
        + myDiv
        + myDiv

        mixin animal(name,sex)
            p   这是一只: #{name}-->性别是: #{sex}

        +animal("dog","female")
        +animal("cat","male")
        include public.pug
        include assets/assets.pug
        script(type="text/javascript").
            console.log("我是script标签里是js内容哦");
            alert("我是pug中script 的写法哦!")

标签

#pug模板引擎 #node.js #模板引擎 #pug