PUG

安装

1
npm install pug

概要

可以把PUG也看成是语法糖，就和.vue文件类似，当使用如template.pug时，调用pug的compile函数就会把pug代码编译成一个js函数，类似于vue的new Vue()（？）。编译成js代码之后就会以js代码形式渲染成html,并展现到网页上。

通用语法糖

Attribute属性

1
2
3
4
5
6
7
8
a(href='baidu.com') 百度
|
|
a(class='button' href='baidu.com') 百度
|

|
a(class='button', href='baidu.com') 百度

条件分支

1
2
3
4
5
6
7
8
- var friends = 10
case friends
  when 0
    p 您没有朋友
  when 1
    p 您有一个朋友
  default
    p 您有 #{friends} 个朋友

代码 Code

1
2
3
4
5
-
  var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

此处应该是转成javascript

注释

这个注释就和普通注释一样//，两个斜杠就相当于注释，不会在html里面显示了，

1
2
3
//- 这行不会出现在结果里
p foo
p bar

条件

这个应该类似于if、switch类似的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green 描述
    p.description= user.description
  else if authorised
    h2.blue 描述
    p.description.
      用户没有添加描述。
      不写点什么吗……
  else
    h2.red 描述
    p.description 用户没有描述

PUG语法糖

标签

本来是在最后的，现在提到最前面，按照官方文档，有很多比如p、ul、a之类的放在最前面，如果没看到这个的话，会理解有问题，因此特意放到最前面讲。这标签就是直接使用html的标签，比如p、img、div、meta等等，而后面但凡没有特殊格式的都是标签。

1
2
3
4
ul
  li Item A
  li Item B
  li Item C

doctype

1
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

相当于html里的

1
<!DOCTYPE html>

过滤器

过滤器可以让您在 Pug 中使用其他的语言，如：

1
2
3
4
5
6
7
p
  :markdown-it(inline) **加粗文字**

p.
  在漫无边际的无聊纯文本构成的垃圾文字的海洋上，
  突然一只野生的 #[:markdown-it(inline) *Markdown*]
  出现在了我的视野。

以上内容那个使用了markdown语言

包含

包含（include）功能允许您把另外的文件内容插入进来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
\\\\\\\\\\ index.pug
//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    include includes/foot.pug
\\\\\\\\\\ includes/head.pug
//- includes/head.pug
head
  title 我的网站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')
\\\\\\\\\\ includes/foot.pug
//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

类似于php的插入语法，只要使用include插入就可以了

模板继承

Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。类似于使用block定义一个父类，然后extends表示子类继承该父类，如果子类有重新写的话，会重新定义父类中的东西。如layout.pug:

1
2
3
4
5
6
7
8
9
10
11
//- layout.pug
html
  head
    title 我的站点 - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些页脚的内容

定义了scripts、content、foot三个基类，然后page-a.pug：

1
2
3
4
5
6
7
8
9
10
11
12
//- page-a.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['猫', '狗']
  each petName in pets
    include pet.pug

使用extends函数表示继承原来的父类，然后使用block对父类函数进行重写，如果没有使用block的地方，比如foot，就不会进行重写。

append模式

如果不希望重写，而只是添加一些东西，可以使用append

1
2
3
4
5
6
//- page.pug
extends layout

append head
  script(src='/vendor/three.js')
  script(src='/game.js')

如上，只需要写成append head就可以是添加模式，而不是重写了。

嵌入

1
2
3
4
5
6
7
- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>转义!</span>";

h1= title
p #{author} 笔下源于真情的创作。
p 这是安全的：#{theGreat}

这里的#{}相当于使用该变量的值

迭代

基本循环语句使用方式，就和vue的v-for效果应该差不多。Pug 目前支持两种主要的迭代方式： each 和 while。

each

1
2
3
ul
  each val, index in {1:'一',2:'二',3:'三'}
    li= index + ': ' + val

ul表明进入迭代，而后便是迭代的正是语句，所以这里的ul相当于一个声明一样？

while

1
2
3
4
- var n = 0;
ul
  while n < 4
    li= n++

while的使用方法和each类似

Mixin

相当于函数，可传参

1
2
3
4
5
6
7
8
9
//- 定义
mixin list
  ul
    li foo
    li bar
    li baz
//- 使用
+list
+list

使用mixin定义一个list，然后使用+使用list

传参时：

1
2
3
4
5
6
mixin pet(name)
  li.pet= name
ul
  +pet('猫')
  +pet('狗')
  +pet('猪')

还可以传递区块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p 没有提供任何内容。

+article('Hello world')

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

还可以混入attribute

1
2
3
4
5
mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class href=href)= name

+link('/foo', 'foo')(class="btn")

纯文本

pug直接转成html文本

1
2
3
4
5
6
7
<html>

body
  p 缩进 body 标签没有意义，
  p 因为 HTML 本身对空格不敏感。

</html>

管道文本

1
2
3
p
  | 管道符号总是在最开头，
  | 不算前面的缩进。

另外一种向模板添加纯文本的方法就是在一行前面加一个管道符号（|），这个字符在类 Unix 系统下常用作“管道”功能，因此得名。该方法在混合纯文本和行内标签时会很有用，

API

pug.compile(source,?options)

把一个 Pug 模板编译成一个可多次使用、可传入不同局部变量渲染的函数

1
2
3
4
5
6
source
~ string
~ 需要编译的 Pug 代码
options
~ ?options
~ 存放选项的对象
1
2
3
returns
~ function
~ 一个可以从包含局部变量的对象渲染生成出 HTML 的函数
1
2
3
4
5
6
7
8
var pug = require('pug');

// Compile a function
var fn = pug.compile('string of pug', options);

// Render the function
var html = fn(locals);
// => '<string>of pug</string>'

pug.compileFileClient(path, ?options)

pug.renderFile(path, ?options, ?callback)

上面三个是最主要的函数，官网的所有API共分三种，一个是pug编译成js函数，一个是pug编译成js字符串，另一个是编译成html字符串。