Pug简介
什么是Pug？它是一个用于服务器端Node.js应用程序的模板引擎。
Express能够处理服务器端的模板引擎。模板引擎允许我们向视图添加数据并动态生成HTML。
Pug是一个老东西的新名字。它是Jade 2.0。
由于商标问题，该项目在2016年发布第二版时，名字从Jade改为Pug。你仍然可以使用Jade（又名Pug 1.0），但往后最好使用Pug 2.0。
Express使用Jade作为默认版本。如上所述，Jade是Pug的旧版本--特别是Pug 1.0。
虽然Jade的最后一个版本已经3年了（在撰写本文时，即2018年夏天），但出于向后兼容的原因，它仍然是Express中的默认版本。
Pug的官方网站是pugjs.org/。
帕格看起来怎么样？
p Hello from Flavio
这个模板将创建一个p 标签，内容为Hello from Flavio 。
正如你所看到的，Pug是相当特别的。它把标签的名字作为一行的第一件事，其余的就是里面的内容了。
如果你习惯于使用HTML和插值变量的模板引擎；比如Handlebars（接下来介绍），你可能会遇到一些问题，特别是当你需要将现有的HTML转换成Pug时。这个从HTML到Jade的在线转换器（与Pug非常相似，但有一点不同）将是一个很大的帮助：https://jsonformatter.org/html-to-jade
安装Pug
安装Pug就像运行npm install 一样简单。
设置Pug为Express中的模板引擎
并在初始化Express应用程序时，我们需要对其进行设置。
const path = require('path')
const express = require('express')
const app = express()
app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'))
你的第一个Pug模板
创建一个关于视图。
app.get('/about', (req, res) => {
res.render('about')
})
和views/about.pug 中的模板。
p Hello from Flavio
这个模板将创建一个p 标签，内容为Hello from Flavio 。
在Pug中对变量进行插值
你可以用插值法来插值一个变量。
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
p Hello from #{name}
插值一个函数的返回值
你可以用以下方法插值一个函数的返回值。
app.get('/about', (req, res) => {
res.render('about', { getName: () => 'Flavio' })
})
p Hello from #{getName()}
为元素添加id和class属性
p#title
p.title
设置doctype
doctype html
html
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='description', content='Some description')
meta(name='viewport', content='width=device-width, initial-scale=1')
添加脚本和样式
html
head
script(src="script.js")
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
link(rel='stylesheet', href='css/main.css')
内联脚本
script alert('test')
script.
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
循环
ul
each color in ['Red', 'Yellow', 'Blue']
li= color
ul
each color, index in ['Red', 'Yellow', 'Blue']
li= 'Color number ' + index + ': ' + color
条件语句
if name
h2 Hello from #{name}
else
h2 Hello
else-if也可以。
if name
h2 Hello from #{name}
else if anotherName
h2 Hello from #{anotherName}
else
h2 Hello
另一个例子。
if users.length > 2
each user in users
...
设置变量
你可以在Pug模板中设置变量。
- var name = 'Flavio'
- var age = 35
- var roger = { name: 'Roger' }
- var dogs = ['Roger', 'Syd']
递增变量
你可以使用++ 来增加一个数字变量。
age++
将变量分配给元素值
p= name
span.age= age
遍历变量
你可以使用for 或each ，它们是可以互换的，没有区别。
for dog in dogs
li= dog
ul
each dog in dogs
li= dog
你可以使用.length 来获得项目的数量。
p There are #{values.length}
while 是另一种形式的循环。
- var n = 0;
ul
while n <= 5
li= n++
包括其他Pug文件
在一个Pug文件中，你可以包括其他Pug文件。
include otherfile.pug
定义块
一个组织良好的模板系统会定义一个基本的模板，然后所有其他的模板都从它延伸出来。
模板的一部分可以通过使用块来扩展。
html
head
script(src="script.js")
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
link(rel='stylesheet', href='css/main.css')
block head
body
block body
h1 Home page
p welcome
在这个例子中，有一个块，body ，有一些内容，而head 没有。head 是用来给标题添加额外的内容，而body 的内容是用来被其他页面覆盖的。
扩展一个基础模板
一个模板可以通过使用extends 关键字来扩展一个基础模板。
extends home.pug
一旦这样做了，你需要重新定义块。模板的所有内容都必须进入块中，否则引擎不知道该把它们放在哪里。
例子。
extends home.pug
block body
h1 Another page
p Hey!
ul
li Something
li Something else
你可以重新定义一个或多个块。没有被重新定义的将与原来的模板内容一起保留。
Pug中的注释可以有两种类型：在生成的HTML中可见或不可见。
可见的
内联。
// some comment
块。
//
some
comment
不可见
内联。
//- some comment
块状。
//-
some
comment
