模板（Templating）
帕格是一个模板引擎。 模板引擎用于通过HTML消除我们的服务器代码的混乱，将字符串与现有的HTML模板串联起来。 帕格是一个非常强大的模板引擎，它具有各种功能，如filters, includes, inheritance, interpolation等。有很多地面可以覆盖。
要使用Pug和Koa，我们需要使用以下命令安装它。
$ npm install --save pug koa-pug
安装pug后，将其设置为应用的模板引擎。 将以下代码添加到app.js文件中。
var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
var _ = router(); //Instantiate the router
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);
现在，创建一个名为views的新目录。 在目录中，创建名为first_view.pug的文件，并在其中输入以下数据。
doctype html
html
head
title = "Hello Pug"
body
p.greetings#people Hello Views!
要运行此页面，请将以下路由添加到您的应用程序。
_.get('/hello', getMessage); // Define routes
function *getMessage(){
this.render('first_view');
};
您将收到输出 -
Pug所做的是，它将这个非常简单的标记转换为html。 我们不需要跟踪关闭我们的标签，也不需要使用class和id关键字，而是使用'。' 和'＃'来定义它们。 上面的代码首先转换为
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p class = "greetings" id = "people">Hello Views!</p>
</body>
</html>
Pug能够做的不仅仅是简化HTML标记。 让我们来探讨一下帕格的一些特征。
简单标签
标签根据其缩进嵌套。 就像在上面的例子中一样， 《title》在《head》标签中缩进，因此它位于其中。 然而， 《body》标签在同一个缩进上，因此它是《head》标签的兄弟。
我们不需要关闭标签。 一旦Pug在相同或外部缩进级别遇到下一个标记，它就会为我们关闭标记。
将文本放入标记内有三种方法 -
- 空间分开 -
h1 Welcome to Pug
- 管道文本 -
div
| To insert multiline text,
| You can use the pipe operator.
- 文本块 -
div.
But that gets tedious if you have a lot of text.
You can use "." at the end of tag to denote block of text.
To put tags inside this block, simply enter tag in a new line and
indent it accordingly.
注释 (Comments)
Pug使用与JavaScript（//）相同的语法来创建注释。 这些注释转换为html注释（）。 例如，
//This is a Pug comment
此评论转换为 -
<!--This is a Pug comment-->
属性 (Attributes)
为了定义属性，我们在括号中使用逗号分隔的属性列表。 类和ID属性具有特殊表示。 以下代码行包含定义给定html标记的属性，类和ID。
div.container.column.main#division(width = "100",height = "100")
这行代码转换为 -
<div class = "container column main" id = "division" width = "100" height = "100"></div>
将值传递给模板
当我们渲染Pug模板时，我们实际上可以从路由处理程序中传递一个值，然后我们可以在模板中使用它。 使用以下代码创建新的路由处理程序。
var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app // equals to pug.use(app) and app.use(pug.middleware)
});
var _ = router(); //Instantiate the router
_.get('//dynamic_view', dynamicMessage); // Define routes
function *dynamicMessage(){
this.render('dynamic', {
name: "xnip",
url:"https://www.xnip.cn"
});
};
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);
然后，使用以下代码在views目录中创建一个名为dynamic.pug的新视图文件。
html
head
title = name
body
h1 = name
a(href = url) URL
在浏览器中打开localhost:3000/dynamic ，以下应该是输出。 -
我们也可以在文本中使用这些传递的变量。 要在标记文本之间插入传递的变量，我们使用＃{variableName}语法。 例如，在上面的示例中，如果我们要从xnip插入Greetings，那么我们必须使用以下代码。
html
head
title = name
body
h1 Greetings from #{name}
a(href = url) URL
这种使用值的方法称为插值。
条件(Conditionals)
我们也可以使用条件语句和循环结构。 考虑这个实际示例，如果用户登录，我们想要显示“嗨，用户”，如果没有，那么我们想要向他显示“登录/注册”链接。 为实现这一目标，我们可以定义一个简单的模板，例如 -
html
head
title Simple template
body
if(user)
h1 Hi, #{user.name}
else
a(href = "/sign_up") Sign Up
当我们使用我们的路线渲染时，如果我们传递一个像 -
this.render('/dynamic',{user:
{name: "Ayush", age: "20"}
});
它会显示Hi，Ayush的消息。 但是，如果我们没有传递任何对象或传递没有用户密钥的对象，那么我们将获得一个注册链接。
包含和组件
Pug提供了一种非常直观的方式来为网页创建组件。 例如，如果您看到新闻网站，则标识和类别的标题始终是固定的。 我们可以使用包含，而不是将其复制到每个视图。 以下示例显示了我们如何使用包含 -
使用以下代码创建三个视图 -
header.pug
div.header.
I'm the header for this website.
content.pug
html
head
title Simple template
body
include ./header.pug
h3 I'm the main content
include ./footer.pug
footer.pug
div.footer.
I'm the footer for this website.
为此创建一个路由，如下所示。
var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
var _ = router(); //Instantiate the router
_.get('/components', getComponents);
function *getComponents(){
this.render('content.pug');
}
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);
转到localhost:3000/components ，你应该得到以下输出。
include也可以用于包括明文，CSS和JavaScript。