`pug` 模板语法的学习

官方文档
pug 原名 jade ，因版权问题更名为 pug ，即哈巴狗。 ejs 一样，pug 也是一个模板引擎，可用于快速的网站开发，当然也可以用于静态博客网站的设计。

安装

npm install pug

语法

pug 不同于 html ，前者不需要标签的开和闭，如 html 的 <p>Demo</p> ，在 pug 使用 p Demo 即可。

缩进

pug 对空格敏感，有点类似 python 对制表符tab敏感。pug 使用空格作为缩进符，当然用 soft tab 也可行。同一级标签需保证左对齐。

div
    p Hello, world!
    p Hello, pug.

渲染结果如下:

<div>
    <p>Hellow, world!</p>
    <p>Hello, pug.</p>
</div>

注释

pug 使用 //- 或 // 对代码进行注释，前者注释内容不出现在渲染后的 html 文件中，后者反之。

//- html中不包含此行
// html中会包含此行

属性

pug 将标签属性存放于括号 () 内，多个属性之间以 逗号 或 空格 分隔。此外，对于标签的 id 和 class ，pug 使用 # 紧跟标签 id ,使用 . 紧跟标签 class ，可以同时设置多个 class 。

h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")

渲染结果如下:

<h1 id="title">Test title</h1>
<img id="name" class="class1 class2" src="/test.png" alt="test">

包含

为了方便代码复用，pug 提供了 include 包含功能，以下代码会将 _partial 目录下的 head.pug 文件内容包含到当前调用的位置。有点 C/C++ 中内联函数的意思。

doctype html
html(lang='en')
    include _partial/head.pug

继承

下面是一个简单的 base 模板，通过 block 定义了页面头部 head 和内容 body 。块 block 有点类似 C/C++ 的抽象函数，需要在继承者中完成定义，填充具体内容。

//- base.pug
html
    head
        block title
    body
        block content

以下文件使用 extends 继承以上模板，通过 block 覆盖或替换原有块 block 。当然，继承者也可以在原有基础上继续扩展。

//- index.pug
extends base.pug

block title
    title "Test title"

block content
    h1 Hello world!
    block article

定义变量

pug中通过 - var name = value 的形式定义变量

- var intData = 100
- var boolData = false
- var stringData = 'Test'
p.int= intData
p.bool= boolData
p.stringData= stringData

需注意的是，在引用变量时，需要在引用位置加上=号，否则会默认将变量名当成普通字符串使用。
如果想要将变量与其它字符串常量或是变量连接在一起，就不能用等号了，而是应该用 #{} ，该符号会对大括号内的变量进行求值和转义，最终得到渲染输出的内容。

- var girl = 'Lily'
- var boy = 'Jack'
p #{girl} is so beautiful!
p And #{boy} is handsome.

条件结构

pug 的条件语句与其它语言类似，均是如下这般：

- var A = {value: 'Test'}
- var B = true
if A.value
    p= A.value
else if B
    p= B
else
    p nothing

迭代

pug 中使用 each 和 while 实现循环迭代，each 可以返回当前所在项的索引值，默认从 0 开始计数。

//- each
ol
    each item in ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
        li= item

//- get index of each
- var week = ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
ol
    each item, index in week
        li= index + ':' + item

渲染成 html 后：

<ol>
  <li>Sun</li>
  <li>Mon</li>
  <li>Tus</li>
  <li>Wen</li>
  <li>Thu</li>
  <li>Fri</li>
  <li>Sat</li>
</ol>
<ol>
  <li>0:Sun</li>
  <li>1:Mon</li>
  <li>2:Tus</li>
  <li>3:Wen</li>
  <li>4:Thu</li>
  <li>5:Fri</li>
  <li>6:Sat</li>
</ol>

while 调用方式如下：

//- while
- var day = 1
ul
    while day < 7
        li= day++

Minix

mixin 名曰混入，类似其它编程语言中的函数，也是为了代码复用，可带参数或不带参数，定义方式如下：

mixin menu-item(href, name)
    li
        span.dot ●
        a(href=href)= name

其中，menu-item 为调用时所用名称，可认为是函数名，href 及 name 是参数。同上定义变量所说，a(href=href)= name 中第二个 = 是为了将后面的 name 当作参数来处理，而不是当作字符串 "name" 来处理。
调用 mixin 定义的代码块，需通过 + 号紧跟 mixin 名称及参数:

+menu-item('/Archives','Archives')
+menu-item('/About','About')

mixin之所以称为混入，是因为其语法不局限于函数调用，在mixin可以使用块block

mixin print(post)
    if block
        block
    else
        p= post

+print("no block")
+print("")
    div.box
        p this is the content of block

对应 html 代码：

<p>no block</p>
<div class="box"><p>this is the content of block</p></div>

JavaScript

注意以下 pug 语句中第一行的 . 号。

script(type='text/javascript').
    var data = "Test"
    var enable = true
    if enable
        console.log(data)
    else
        console.log('nothing')

对应的 JS 代码如下：

<script type='text/javascript'>
    var data = "Test"
    var enable = true
    if enable
        console.log(data)
    else
        console.log('nothing')
</script>

对于简单脚本，使用 pug 尚可，复杂的还是单独写到 .js 文件中，然后通过 pug 引用方便一些，引用方式如下

script(type='text/javascript', src='/path/to/js')

//- with hexo function url_for
script(type='text/javascript', src=url_for(theme.js) + '/ready.js')

include语法

include 语法可以用来包含公共的一些模板来引用指定模板

include public.pug // 当前文件夹下, 同目录下的 pug模板

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

这篇博客引用了作者为”义含遗憾“的文章
原文链接为:腾讯云

pug 模板语法的学习

安装

语法

缩进

注释

属性

包含

继承

定义变量

条件结构

迭代

Minix

JavaScript

include语法

`pug` 模板语法的学习