ExpressJS - 模板
Pug 是 Express 的模板引擎。模板引擎用于消除服务器代码与 HTML 的混乱,将字符串与现有 HTML 模板进行疯狂连接。Pug 是一个非常强大的模板引擎,具有多种功能,包括过滤器、包含、继承、插值等。这方面有很多内容需要介绍。
要将 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! 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> 标签内缩进,因此它位于其中。但是 <body> 标签位于相同的缩进中,因此它是 <head> 标签的兄弟。
我们不需要关闭标签,只要 Pug 在相同或外部缩进级别遇到下一个标签,它就会为我们关闭标签。
要将文本放在标签内,我们有 3 种方法 −
空格分隔
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 注释 (<!--comment-->)。例如,
//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 express = require('express'); var app = express(); app.get('/dynamic_view', function(req, res){ res.render('dynamic', { name: "TutorialsPoint", url:"http://www.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
这种使用值的方法称为插值。上面的代码将显示以下输出。−

条件
我们也可以使用条件语句和循环结构。
考虑以下−
如果用户已登录,则页面应显示"嗨,用户",如果没有,则显示"登录/注册"链接。为了实现这一点,我们可以定义一个简单的模板,例如−
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"} });
您将收到一条消息 − 嗨,Ayush。但如果我们不传递任何对象或传递没有用户密钥的对象,那么我们将获得一个注册链接。
包含和组件
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。
Pug 还有许多其他功能。但这些超出了本教程的范围。您可以在 Pug 上进一步探索 Pug。