Koa.js - 模板引擎

Pug 是一种模板引擎。模板引擎用于去除服务器代码中 HTML 的杂乱，避免大量使用字符串拼接来构建现有的 HTML 模板。Pug 是一款非常强大的模板引擎，它具有多种功能，例如**过滤器、包含、继承、插值**等。这方面有很多内容需要学习。

要在 Koa 中使用 Pug，我们需要使用以下命令安装它。

$ 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> 标签在同一缩进级别，因此它是 <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 注释()。例如，

//This is a Pug comment

此注释转换为：

<!--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://tutorialspoint.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} 语法。例如，在上面的示例中，如果我们想要插入 Greetings from TutorialsPoint，那么我们必须使用以下代码。

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"}
});

它将显示一条消息“Hi, Ayush”。但是，如果我们不传递任何对象或传递没有 user 键的对象，那么我们将获得一个注册链接。

包含和组件

Pug 提供了一种非常直观的方式来创建网页组件。例如，如果您看到一个新闻网站，带有徽标和类别的页眉始终是固定的。与其将其复制到每个视图中，我们可以使用 include。以下示例显示了如何使用 include：

创建三个带有以下代码的视图：

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。

打印页面