ExpressJS - 模板引擎

Pug 是 Express 的一个模板引擎。模板引擎用于避免服务器代码中充斥 HTML 代码，以及大量拼接字符串到现有 HTML 模板的情况。Pug 是一个非常强大的模板引擎，具有多种功能，包括过滤器、包含、继承、插值等。这方面有很多内容需要学习。

要在 Express 中使用 Pug，我们需要安装它：

npm install --save pug

现在 Pug 已经安装好了，将其设置为应用程序的模板引擎。您无需“require”它。将以下代码添加到您的index.js文件中。

app.set('view engine', 'pug');
app.set('views','./views');

现在创建一个名为 views 的新目录。在其中创建一个名为first_view.pug的文件，并在其中输入以下数据。

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

要运行此页面，请将以下路由添加到您的应用程序：

app.get('/first_template', function(req, res){
   res.render('first_view');
});

您将得到以下输出：Hello World! Pug 将这个非常简单的标记转换为 HTML。我们不需要跟踪标签的闭合，也不需要使用 class 和 id 关键字，而是使用“.”和“#”来定义它们。上述代码首先转换为：

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pug 的功能远不止简化 HTML 标记。

Pug 的重要功能

现在让我们探索 Pug 的一些重要功能。

简单的标签

标签根据缩进嵌套。例如，在上面的示例中，<title> 缩进在<head>标签内，因此它在<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-->

属性

要定义属性，我们使用用括号括起来的逗号分隔的属性列表。Class 和 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 express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"https://tutorialspoint.com"
   });
});

app.listen(3000);

并在 views 目录中创建一个新的视图文件，名为dynamic.pug，其中包含以下代码：

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

在浏览器中打开 localhost:3000/dynamic_view；您应该得到以下输出：

我们也可以在文本中使用这些传递的变量。要在标签文本之间插入传递的变量，我们使用#{variableName}语法。例如，在上面的示例中，如果我们想放置来自 TutorialsPoint 的问候语，我们可以这样做。

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

这种使用方法称为插值。上面的代码将显示以下输出：

条件语句

我们也可以使用条件语句和循环结构。

考虑以下情况：

如果用户已登录，页面应显示“Hi, User”，否则应显示“Login/Sign Up”链接。为此，我们可以定义一个简单的模板，例如：

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

当我们使用路由渲染它时，我们可以像以下程序一样传递一个对象：

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

您将收到一条消息：Hi, Ayush。但是，如果我们不传递任何对象或传递没有 user 密钥的对象，那么我们将获得一个注册链接。

包含和组件

Pug 提供了一种非常直观的方式来创建网页组件。例如，如果您看到一个新闻网站，带有徽标和类别的页眉始终是固定的。与其将它复制到我们创建的每个视图中，不如使用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 express = require('express');
var app = express();

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

转到 localhost:3000/components，您将收到以下输出：

include也可用于包含纯文本、CSS 和 JavaScript。

Pug 还有许多其他功能。但这些超出了本教程的范围。您可以在Pug中进一步探索 Pug。

打印页面