帕格是一个模板引擎.模板引擎用于通过HTML消除我们的服务器代码的混乱，将字符串与现有的HTML模板串联起来.帕格是一个非常强大的模板引擎，它具有各种功能，如过滤器，包含，继承，插值等.有很多理由可以覆盖.
要使用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标记.让我们来探索Pug的一些功能.
标签根据它们的缩进嵌套.与上面的示例一样，< 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.
Pug使用与JavaScript(//)相同的语法来创建评论.这些注释将转换为html注释(<！ - comment - >).例如，
//这是一个Pug评论
这个评论转换为 :
<!--This is a Pug comment-->
要定义属性，我们在括号中使用逗号分隔的属性列表.类和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: "TutorialsPoint",
url:"https://www.it1352.com"
});
};
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}语法.例如，在上面的示例中，如果我们要从TutorialsPoint插入Greetings，那么我们必须使用以下代码.
html
head
title = name
body
h1 Greetings from #{name}
a(href = url) URL这种使用值的方法称为插值.
我们也可以使用条件语句和循环结构.考虑这个实际示例，如果用户已登录，我们希望显示"Hi，User"，如果没有，那么我们希望向他显示"登录/注册"链接.为实现这一目标，我们可以定义一个简单的模板，例如 :
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"}
});它会显示一条消息，显示嗨，Ayush.但是，如果我们没有传递任何对象或传递没有用户密钥的对象，那么我们将获得一个注册链接.
Pug提供了一种非常直观的方式来为网页创建组件.例如，如果您看到新闻网站，则标题和类别的标题始终是固定的.我们可以使用包含，而不是将其复制到每个视图.以下示例显示了我们如何使用包含和减号;
使用以下代码创建三个视图 :
div.header. I'm the header for this website.
html head title Simple template body include ./header.pug h3 I'm the main content include ./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.
Pug还有许多其他功能.但是，这些不在本教程的范围内.您可以通过 Pug 进一步探索帕格.
