ExpressJS 模板化

模板化

Pug是Express的模板引擎。模板引擎用于消除我们的服务器代码与HTML的混乱情况，将字符串疯狂地连接到现有的HTML模板。Pug是一个非常强大的模板引擎，具有多种功能，包括过滤器，包含，继承，插值等。在这方面有很多基础。要将Pug与Express一起使用，我们需要安装它，
```
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');
});
```
运行此代码后访问“/first_template”路径时，我们在浏览器收到以下HTML响应-
```
<!DOCTYPE html><html><head><title>Hello Pug</title></head><body><p class="greetings" id="people">Hello World!</p></body></html>
```
Pug将此外观非常简单的标记转换为html。我们不需要关闭标签，也不需要使用class和id关键字，而只需使用'.'和'＃'来定义它们。

Pug除了简化HTML标记外，还可以做更多的事情。
Pug的重要特征

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

简单标签

标签根据其缩进进行嵌套。像上面的示例一样，<title>在<head>标记内缩进，因此位于其中。但是<body>标记在同一缩进上，因此它是<head>标记的同级。我们不需要关闭标签，只要Pug在相同或外部缩进级别遇到下一个标签，它就会为我们关闭标签。要将文本放在标签内，我们有3种方法-
- 空格分隔
- 管道文字
- 文字块
注释

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 express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "jc2182", 
      url:"http://www.jc2182.com"
   });
});

app.listen(3000);
```
然后在views目录中创建一个新的视图文件，名为dynamic.pug，其代码如下：
```
html
   head
      title=name
   body
      h1=name
      a(href = url) URL
```
在浏览器中打开localhost:3000/dynamic_view；您应该获得以下输出-

我们还可以在文本中使用这些传递的变量。为了在标签的文本之间插入传递的变量，我们使用＃{variableName}语法。例如，在上面的示例中，如果我们想放置jc2182到greetings中，则可以执行以下操作。
```
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”。但是，如果我们不传递任何对象或传递没有用户密钥的对象，那么我们将获得一个注册链接。

包含和组件

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

页眉
```
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 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进一步探索。

ExpressJS 模板化

模板化

Pug的重要特征