Koa.js 模板化
Pug 是一个模板引擎。模板引擎用于使用 HTML 消除我们服务器代码的混乱，将字符串疯狂地连接到现有的 HTML 模板。 Pug 是一个非常强大的模板引擎，它具有多种功能，例如
过滤器、包含、继承、插值等。在这方面有很多地方可以涵盖。
要将 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 在相同或外部缩进级别遇到下一个标签，它就会为我们关闭该标签。
将文本放入标签的三种方法-
空格分隔-
管道文本-
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 注释(
)。例如，
此评论被转换为-
<!--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: "Lidihuo",
url:"https://www.tutorialspoint.com"
});
};
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);
然后，在views目录下新建一个view文件，命名为dynamic.pug，代码如下。
html
head
title = name
body
h1 = name
a(href = url) URL
在浏览器中打开
localhost:3000/dynamic，下面应该是输出。-
我们也可以在文本中使用这些传递的变量。要在标签文本之间插入传递的变量，我们使用 #{variableName} 语法。比如上面的例子中，如果我们想从Lidihuo插入Greetings，那么就必须使用下面的代码。
html
head
title = name
body
h1 Greetings from #{name}
a(href = url) URL
这种使用值的方法称为插值。
条件
我们也可以使用条件语句和循环结构。考虑这个实际示例，如果用户已登录，我们希望显示"您好，用户"，如果没有，则我们希望向他显示"登录/注册"链接。为此，我们可以定义一个简单的模板，例如-
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 提供了一种非常直观的方式来为网页创建组件。例如，如果您看到一个新闻网站，带有徽标和类别的标题始终是固定的。我们可以使用包含，而不是将其复制到每个视图。以下示例显示了我们如何使用包含-
使用以下代码创建三个视图-
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。
Pug 还有许多其他功能。但是，这些超出了本教程的范围。您可以在 Pug 上进一步探索 Pug。
