关注我们

ExpressJS - 模板(Templating)

Pug是Express的模板引擎，Pug是一个非常强大的模板引擎，具有多种函数，包括filter，includes，inheritance，interpolation等。要将Pug与Express一起使用，无涯教程需要安装它。

npm install --save pug

现在已经安装了Pug，将其设置为您的应用程序的模板引擎。将以下代码添加到您的 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!的输出，上面的代码首先被转换为-

复制代码

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

Pug除了简化HTML标签外，还可以做更多的事情。

现在一起探索Pug的一些重要函数。

简单标签

标签根据其缩进进行嵌套。像上面的示例一样，<title>在<head>标签内缩进，因此位于其中。但是<body>标签在同一缩进上，因此它是<head>标签的同级。不需要关闭标签，只要Pug在相同或外部缩进级别遇到下一个标签，它就会为无涯教程关闭标签。

要将文本放在标签内有3种方法-

Space seperated

h1 Welcome to Pug

Piped text

div
   | To insert multiline text, 
   | You can use the pipe operator.

Block of text

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->)。例如，

//This is a Pug comment

注释被转换为以下内容。

<!--This is a Pug comment-->

属性

为了定义属性，在括号中使用逗号分隔的属性列表，类和ID属性具有特殊的表示形式，以下代码行涵盖了为给定html标签定义属性，class和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: "LearnFk", 
      url:"http://www.learnfk.com"
   });
});

app.listen(3000);

然后使用以下代码在views目录中创建一个名为 dynamic.pug 的新视图文件-

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

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

还可以在文本中使用这些传递的变量。为了在标签的文本之间插入传递的变量，使用#{variableName} 语法。如在上面的示例中，如果想放置LearnFk中的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 。

Include & Components

Pug提供了一种非常直观的方式来创建网页组件，可以使用include加载其他页面，以下示例显示了无涯教程如何使用此函数-

使用以下代码创建3个视图-

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。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

React实战进阶45讲 -〔王沛〕

Linux性能优化实战 -〔倪朋飞〕

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

好记忆不如烂笔头。留下您的足迹吧 :)