Pug 学习笔记

这篇博客是学习Pug的笔记。

# 1 文档类型(Doctype)

通过doctype html可以声明一个文档是html,此外html还可以被替换为xmltransitionalstrictframeset1.1basicmobileplist。也可以自定义doctype

注意:doctype会进一步影响到文档的渲染。

# 2 标签(Tags)

以文字开头的一行表示一个标签,缩进表示嵌套。

也可以通过tag1: tag2,在一行内创建嵌套的标签。

对于诸如imgmetalink等的自闭合标签,Pug会自动处理。也可通过后缀(属性之后)/强制闭合。

# 3 属性(Attributes)

紧跟在标签后形如(name=value, ...),其中value可以是任意JavaScript。分隔的,可省略。value会被转义,如果需要避免转义,用!=替代=

对于布尔属性,value也可以是布尔类型,属性真值同该布尔值。若完全省略=value则属性为真。对于html,Pug会采用简短形式(即不是value="value"而是value)。

对于单个较长的属性可以采用模板字符串。属性也可以跨越多行:

tag (
    name1=value1
    name2=value2
    ...
)

如果属性名包含了如[]()的奇怪字符,需要用""或者''括注属性名。

对于style属性,value也可以是一个对象。

对于class属性,value也可以是一个包含类名的数组,或一个从类名映射到布尔值的对象。

对于class属性可以采用tag.classname的简便形式;对于id属性可以采用tag#id的简便形式。如果tagdiv,则可以省略tag。其余的属性跟在上述简便形式之后。

在普通的属性之后添加&attributes(object),可以把object的属性名和值作为标签的属性名和值。注意:通过这种方式添加的属性不会被转义。

# 4 纯文本(Plain Text)

|开头的行即为单行的纯文本。文本中可嵌入html

在属性后添加空格而后紧跟文本,可以在行内嵌入该文本;在标签后紧跟.和换行,而后所有缩进层次内的都将被作为内嵌的文本。

# 5 注释(Comments)

//开头的行即为单行的注释,该注释会被转换成对应的html的注释。

//-开头的行为单行的不会出现在html中的注释。

//紧跟换行,而后所有缩进层次内的都将被作为注释。

Pug对于html条件注释没有特殊的支持。但是由于所有以<开头的行都会被作为纯文本,因而可直接嵌入html条件注释。

# 6 代码(Code)

-开头的行即为单行的JavaScript代码,代码执行的结果不会出现在html中。

-紧跟换行,而后所有缩进层次内的都将被作为代码。

=开头的行也为单行代码,但代码执行的结果会转义后出现在html中。其位置也可以紧跟在属性后。

!=开头的行也为单行代码,但代码执行的结果会直接出现在html中。其位置也可以紧跟在属性后。

# 7 插值(Interpolation)

纯文本中的#{expression}会被替换成expression转义后的值。如果纯文本中需要#{,可转义为\#{

纯文本中的!{expression}会被替换成expression的值(不转义)。

标签插值的语法为#[tag text]。由于Pug会去除标签前后的空白字符,因而标签插值的语法对于需要控制空白字符的内联标签非常有用。

# 8 条件语句(Conditionals)

# 8.1 if-else语句

if-else语句形如:

if condition1
    ...
else if condition2
    ...
else
    ...

也可以采用unless语句:

unless condition
    ...

条件部分的括号,及ifelseunless前的-可省略。

# 8.2 case语句

case语句形如:

case variable
    when value
        ...
    ...
    default
        ...

只有当一个when语句块为空时,该语句块的执行才会移交到下一个when语句块。可以通过- break跳出case语句。

也可在when valuedefault后,紧跟:后跟上标签,在行内完成语句块。

# 9 循环语句(Iteration)

each语句形如:

each value, key in arrayOrObject:
    ...
else
    ...

对于数组会遍历数组元素,对于对象会遍历其属性。, key可以省略。else语句块也可以省略,该语句块会在迭代空数组或空对象时被执行。也可以用for替代each

while语句形如:

while condition
    ...

# 10 过滤器(Filters)

过滤器,将纯文本作为输入,其输出的内容再被嵌入到Pug模板的输出中,所有的JSTransformer模块都可以作为过滤器,常见的过滤器有:babel:uglify-js:scss:markdown-it

过滤器语法如下:

:filter(key=value ...)
    ...

也可以采用单行的形式:

:filter(key=value ...) ...

其中(key=value ...)为选项可以省略,如果key为布尔类型,值为真,=value也可以省略。过滤器也可嵌套,语法类似:filter1:filter2

注意:过滤器的渲染发生在编译阶段。

也可以自定义过滤器:

options.filters = {
    'my-own-filter': function (text, options) {
        ...
    }
};

# 11 包含文件(Includes)

包含文件的语法如下:

include:filter file

其中:filter可选。如果file是Pug模板文件,会被Pug处理。如果file是其他文本文件,则文本被原处保留。file的路径如果是绝对路径,由options.basedir制定更目录,否则则为想对于当前编译文件的路径。

# 12 复用块(Mixins)

复用块的定义语法如下:

mixin name(parameters, ...restArguments)
    ...

使用的语法如下:

+name(arguments)(attributes)
   ...

其中,, ...restArguments可选,所有的实参列表和形参列表连同()也可选。使用语法下面的块可选。通过block,可以在定义处引用使用处的块。attributes=连接,空格分割的键值对(值已经被转义),连同()也是可选的。通过attributes对象,可以引用使用处的attributes

# 13 模板继承(Template Inheritance)

声明一个可被派生模板修改的块的语法如下:

block name
    ...

其中,包含的子块为派生后默认的块,是可选的。通过在模板开始处声明extends file,可以从file派生出新的模板,然后通过block name可以重新定义块,通过block prepend nameprepend name可以在默认块前添加新的内容,通过block append nameappend name可以在默认块后添加新的内容。

2016-2020 Ziping Sun
京ICP备 17062397号