在前端的开发中，模板引擎是非常重要的一环。Pug 是一个高度可组合、高度可扩展的模板引擎，它可以帮助我们更好地组织和渲染 HTML。而 Express.js 则是一个非常流行的 Node.js 框架，它可以用来搭建 Web 应用程序和 API。
本文将介绍如何在 Express.js 中使用 Pug 模板引擎。我们将讨论 Pug 的一些基本语法和用法，并提供示例代码以供参考。
安装和配置 Pug
首先，我们需要安装 Pug。你可以在你的项目目录下运行以下命令来安装：
npm install pug --save
安装完成之后，我们需要在 Express.js 应用程序中配置 Pug。我们可以在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- --- ------- - ------------------ --- --- - --------- ------------- -------- ------ ---------------- --------- - --------- ------------ -------- ----- ---- - -------------------- --- ---------------- -------- -- - -------------------- --- --------- -- ---- ------- --
由于我们设置了 Pug 为我们的视图引擎，Pug 在默认情况下会在 views 目录中查找视图文件。我们还可以通过调用 res.render() 来渲染视图。
Pug 基础语法
Pug 具有简洁和易于阅读的语法，它采用了缩进来定义层次结构。下面是一个示例：
html
head
title 我的网站
body
h1 欢迎来到我的网站！
p 我正在学习 Pug。上面的代码将生成以下 HTML：
-- -------------------- ---- -------
------
------
-------------------
-------
------
------------------
-------- --------
-------
-------我们可以看到，Pug 的语法非常简洁和易于阅读。在 Pug 中，我们可以使用以下元素：
- Text: 使用文本字符串来添加纯文本。
- Tags: 使用标记来添加 HTML 标签，并通过缩进和嵌套来定义层次结构。
- Interpolation: 使用
#{}语法来向 HTML 中嵌入 JavaScript 变量或表达式。 - Attributes: 使用
( )语法来定义元素的属性。 - Class and ID: 使用
.className和#idName语法来定义元素的类和 ID。
示例代码
让我们看一些示例代码来更好地理解如何在 Express.js 中使用 Pug：
在视图中使用变量
html
head
title= title
body
h1= message在上面的代码中，我们使用了 = 符号来表示变量。我们可以通过将变量传递给 res.render() 方法来渲染视图：
app.get('/', function (req, res) {
res.render('index', { title: '我的网站', message: '欢迎来到我的网站！'})
});循环和条件语句
-- -------------------- ---- -------
----
----
------ -----
----
--
---- ---- -- -----
-- -------------
--
------------- ------------ - ------------ - ---- -
----
-- ------------ - ------------- -我们可以使用 each 循环语句来遍历 items 数组，并使用 if 条件语句来判断 discount 属性是否为 true。
app.get('/', function (req, res) {
var items = [
{ name: '苹果', price: 5, discount: true },
{ name: '香蕉', price: 3, discount: false },
{ name: '橙子', price: 4, discount: true }
]
res.render('index', { title: '我的网站', items: items })
});使用布局文件
<!DOCTYPE html>
html
head
title= title
block extra_css
body
block content
block extra_js我们可以使用布局文件来包含样板代码和共享的标记。在我们的视图文件中，我们可以使用 extends 关键字来指定要使用的布局文件，并使用 block 关键字来定义要填充的内容。
layout.pug:
-- -------------------- ---- -------
----
----
---------------------
----- ----
---------------------- -----------------
----- ---------
----
----- -------
-----------------------
----- --------index.pug:
extends layout.pug block content h1 欢迎来到我的网站！ p 我正在学习 Pug。
以上就是在 Express.js 中使用 Pug 模板引擎的详细教程了。我们通过示例代码演示了如何渲染视图，使用 Pug 的基本语法和在视图中使用布局文件。Pug 非常强大，它可以轻松帮助我们构建高效和易于维护的代码。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782021f935627c900f34328
