在 Express.js 中使用 Pug 模板引擎-JavaScript中文网-JavaScript教程资源分享门户

在开发 Web 应用程序时，模板引擎是一个非常重要的工具。它可以帮助我们管理和组织 HTML、CSS 和 JavaScript 代码，使得我们可以更加专注于业务逻辑的实现。在这篇文章中，我们将讨论如何在 Express.js 中使用 Pug 模板引擎。

Pug 是什么？

Pug（之前称为 Jade）是一种高效、优雅的模板引擎，它使用基于缩进的语法来帮助我们生成 HTML。Pug 的语法非常简洁，易于理解和维护，它以可读性和可维护性为中心。Pug 不仅支持基本的 HTML 标记，还可以支持几乎所有的 HTML 元素和属性。因此，它是一种非常灵活和强大的模板引擎。

首先，我们需要通过 NPM 安装 Pug。可以使用以下命令进行安装：

$ npm install pug --save

安装完成后，我们需要在 Express.js 中配置 Pug 模板引擎。可以使用以下代码进行配置：

const express = require('express');
const app = express();

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

在这里，我们使用 app.set() 方法来设置模板引擎。第一个参数是 view engine，表示我们要设置的是视图引擎。第二个参数是 pug，表示我们要使用 Pug 模板引擎。

接下来，我们可以创建一个 Pug 模板。在 Express.js 中，我们可以将模板文件存放在 views 目录中，并以 .pug 文件扩展名结尾。以下是一个简单的示例 Pug 模板：

html
  head
    title My Page
  body
    h1 Welcome to my website!
    p This is my first Pug template.

然后，我们可以使用以下代码在 Express.js 中渲染该模板：

app.get('/', (req, res) => {
  res.render('index');
});

在这里，我们使用 res.render() 方法来渲染 Pug 模板。该方法需要一个视图名称作为参数，该名称应该是我们的 Pug 模板文件名（不需要扩展名）。

当用户访问根路径时，就会渲染 index.pug 模板，并将结果返回给客户端。

在我们的网站中通常需要向模板传递数据，例如动态生成的内容或用户信息。在 Express.js 中，可以使用以下代码将数据传递给模板：

app.get('/', (req, res) => {
  res.render('index', { title: 'My Page', message: 'Welcome to my website!' });
});

在这里，我们向模板传递了一个包含 title 和 message 属性的对象。我们可以在模板中使用这些属性来动态生成内容，例如：

html
  head
    title #{title}
  body
    h1 #{message}
    p This is my first Pug template.

当 Express.js 渲染该模板时，Pug 将替换 #{title} 和 #{message} 为我们传递的值。最终，生成的 HTML 将包含我们的数据。

在 Express.js 中使用 Pug 模板引擎非常简单，而且非常有用。它可以使我们轻松组织和维护我们的代码，并动态生成内容。在这篇文章中，我们已经介绍了如何安装和使用 Pug 模板引擎，并向模板传递数据。如果你还没有使用过 Pug 模板引擎，那么现在就是开始的好时机。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66efb93a6fbf960197309ff8