Pug学习笔记

最新推荐文章于 2024-04-29 11:29:26 发布

徐玥

最新推荐文章于 2024-04-29 11:29:26 发布

阅读量9.6k

点赞数 6

分类专栏： pug nodejs 文章标签： node.js pug

本文链接：https://blog.csdn.net/helianthusxuyue/article/details/78159476

版权

pug 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

nodejs

1 篇文章 0 订阅

订阅专栏

跟完了Scott老师几年之前关于node.js、MongoDB建站以及带你学习Jade模板引擎的视频，害怕自己忘性太大，写一个总结记录一下关于pug的使用方法。

当时老师用的还是jade，现在已经改名为Pug了，内容基本没有变化，在node中引用模板引擎的时候要记得使用app.set('view engine', 'pug');然后把所有视图文件的后缀改成.pug。

Pug环境配置

打开项目所在文件夹，shift+右键打开命令行，输入npm install pug -g就可以在全局安装pug。

但此时如果想在命令行中使用pug命令还是会报错，提示pug不是内部或者外部命令。

解决方案：使用npm工具安装pug-cli，npm install pug-cli,就可以在命令行中使用pug命令了。
遇到的问题

接下来，为了便于看到pug生成的HTML文档，可以使用pug -P -w xxx.pug,会自动在xxx.pug文件夹下生成一个xxx.html的文件，-P参数可以让html文档变得有可读性，-w可以实时监控.pug文件的修改，如果有变化就自动更新相应的html文件。常用的还有-o用来指定输出的html的目录。

Pug语法

属性

属性的语法和CSS是一样的，紧跟着标签写在括号里，用,隔开，class和id比较特殊可以直接拿出来写在元素后面，例如div#pug.pug对于div来说直接写#pug.pug表示的就是一个div标签
属性语法

内容

有三种常用的格式

一、直接在标签后面加文本，注意文本和标签之间要有空格
div(class='pug',id='pug') imooc

二、在标签的下一行，对每一行内容前面加 |

p
    | 1.aa
    | 2.bb
    | 3.cc
    | 4.dd

三、在标签的后面加 . 表示之后的的内容全属于这个标签，可以用来添加文字、脚本和样式，但是.和标签之前一定不可以有空格

style.
    body{ color: red}
    .pug{ width: 200px; height: 200px; border: 1px solid #000}

注：也可以在pug中直接使用尖括号的标签

p
    | 1.aa
    strong 我是尖括号
    | 2.bb
    | 3.cc&lt;strong>我是尖括号&lt;/strong>
    | 4.dd
p.
    1.aa
    2.bb
    &lt;strong>我是尖括号&lt;/strong>
    3.cc
    4.dd

内容语法
这里写图片描述

注释

一、单行注释 //：会输入到html文档中去
// 我是单行注释

二、非缓冲注释 //-：在html文档中是完全隐藏的
//- 我是非缓冲注释

三、块注释 //-：注释掉上层元素，就会默认把父元素包含的内容都注释掉

//-p.
    1.aa
    2.bb
    3.cc
    4.dd

四、条件注释：为了兼容IE 比较低的版本，需要加上下面的条件注释，但要注意如果用了条件注释，html标签在节结尾处是需要闭合的。

&lt;!--[if IE 8]>&lt;html class='ie8'>&lt;![endif]>-->
&lt;!--[if IE 9]>&lt;html class='ie9'>&lt;![endif]>-->
&lt;!--[if !IE]>&lt;!-->&lt;html>&lt;!--&lt;![endif]>-->
...
&lt;html>

注释语法

变量

变量赋值

在pug里面定义变量特别简单，比如- var text = pug
[内容变量]
在其他地方调用这个变量的时候有两种方法，可以直接用等号赋值div=text,也可以使用#{ 变量名}的方法，比如div #{text}，如果#{}内部有函数的话，会先执行{}的操作，再将结果输出，比如div #{text.toUpperCase()}

[属性赋值]
只能使用“=变量名”的方式进行赋值

变量获取

正常开发的时候，我们一般是在后台拿到数据，然后传递到这个模板，有两种方式

第一种是命令行直接赋值pug ./views/index.pug -P -w --obj "{'text':'pug'}"
注意：Windows环境下要求比较苛刻，”“和”的位置一定不要写反了

第二种是通过JSON文件的方式，我们可以在新建一个JSON文件，写入{"text":"study pug"}，然后通过命令行pug ./views/index.pug -P -w -O ./views/text.json就可以拿到JSON文件中的数据
JSON

注：这里有一点，当外部传入的参数和.pug文件内部定义的参数同名时，会优先选择内部参数。

变量转义

假如变量里面带有一些特殊符号，在赋值的时候就会被转义掉，例如定义一个变量：

-var cont = '<strong>Pug 很简洁</strong><script>alert(pug);</script>'

直接赋值输出的话，会在页面上打印出来变量内的内容，如果不想做任何转义，可以使用，但这样是非常不安全的

div!=cont
div !{cont}

如果我们想在变量里输出#{，那我们可以在#{之前加一个 \，比如div \#{cont}
！！但是这里有一个问题！！div \#{cont}以及div \！{cont}的输出内容是一样的？

变量转义
这里写图片描述

循环

for循环：for前面必须加 -标识，如下就可以取出变量的属性值

- var test={lcation: 'beijing', content: 'jade'}
- for (var k in test)
    p= test[k]

each循环：-标识可以省略，也可以以此定义两个参数，取出变量的key value值，这里面比较神奇的是，each value,key in test中的value和key不能换位置，否则会出现就去不到正确对应的值

- var test={lcation: 'beijing', content: 'jade'}
each item in test
    p= item
each value,key in test
    p #{key}: #{value}

注意 each之后的标签要注意缩进，否则会报错

while循环：

- var n=0
ul
    while (n<5)
        li=n++

条件

if else判断：
if-else的语法和JS原生代码基本一致，if和else前面的 -可以省略，判断主体上的括号也可以省略，写起来非常的方便，也支持unless，不过我觉得那个用起来没有if-else顺手

case判断：

case 变量名
    when a
        代码块
    when b: 代码块
    default： 代码块

mixin重用

mixin定义和调用：

//mixin 定义
mixin test
    p study pug
//mixin 调用
+test
+test

mixin定义调用

mixin传递参数：

传递参数

mixin嵌套：

mixin嵌套

mixin内联代码块：
下面block中代码块就指+test下面的内容，如果有内容，就将代码块直接放在block的位置，如果没有代码块就执行…所表示的代码

mixin test
    if block 
        block
    else
        ...
+test
    p= 'aaa'
+test

mixin内联

mixin传递属性：有两种方法，第一种可以通过p(class=attributes.class)取到特定的属性，第二种可以通过p&attributes(attributes)取到全部的属性。使用的时候需要注意+test(参数)(属性)

mixin传递不确定数量的参数：在声明mixin的时候加入参数数量不确定，可以用…items来表示，调用的时候正常带入参数就可以了

包含和继承

include包含：解决的是文件和文件之间，文件和区块之间代码复用的问题，可以引入.pug和原生的.html文件。当引入的是.html文件时，一定要记得带上后缀。
这里写图片描述

这里写图片描述

block继承：解决的是子文件和父文件之间的代码复用问题，子文件的代码可以覆盖和扩展父文件的代码

//父文件.pug
block test
    代码块1
//子文件.pug
extends 父文件.pug
block test
    代码块2
//那在最后输出的时候应该输出代码块2的内容

block继承

在上面图片里面，定义了三个block：scripts、content和footer。
对于footer，没有在index.pug中进行引用，但是生成的index.html中却能看到，也就是说如果子文件没有对父文件的block进行修改，那就是默认引用
对于content，index.html中输出的是在index.pug中修改的内容，所有说如果子文件引用了父文件的block，那么就会用自己的覆盖掉继承过来的内容
对于scripts，如果你只想在父文件中内容的基础上添加一点内容，那就可以考虑使用prepend和append，分别是向block的顶部和底部插入内容，使用它们时可以省略关键字block。