在 Express.js 中使用 Jade 模板引擎

Jade 是一种流行的模板引擎，它可以让你更容易地编写 HTML。它使用缩进和标签嵌套来表示 HTML 结构，这使得代码更加简洁易懂。在本文中，我们将介绍如何在 Express.js 中使用 Jade 模板引擎。

安装 Jade

在使用 Jade 之前，你需要安装它。你可以使用以下命令来安装：

npm install jade --save

这将在你的项目中安装 Jade 模板引擎。

在 Express.js 中使用 Jade

在 Express.js 中使用 Jade 很简单。首先，你需要设置 Express.js 应用程序来使用 Jade。你可以在 app.js 文件中添加以下代码：

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

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

这会告诉 Express.js 使用 Jade 作为你的应用程序的模板引擎。

接下来，你需要创建一个 Jade 模板。你可以在 views 文件夹中创建一个名为 index.jade 的文件，并添加以下代码：

html
  head
    title= title
  body
    h1= message

这是一个简单的模板，它将显示一个标题和一个消息。注意，缩进非常重要。

最后，你需要在路由程序中指定你的模板。你可以在 app.js 文件中添加以下代码：

app.get('/', function(req, res) {
  res.render('index', { title: 'Express', message: 'Welcome to Express.js' });
});

这将告诉 Express.js 当用户请求根路径时，渲染名为 index.jade 的模板，并传递一个包含标题和消息的对象。

Jade 模板的深入学习

Jade 模板引擎有很多功能，包括条件语句、循环语句、变量和混合等。在这里，我们将简要介绍一些常见的功能。

条件语句

你可以使用条件语句在 Jade 模板中添加条件逻辑。以下是一个示例：

if user
  p Welcome, #{user.name}!
else
  p Please log in.

这将根据用户是否存在来显示不同的消息。

循环语句

你可以使用循环语句在 Jade 模板中重复渲染元素。以下是一个示例：

ul
  each item in items
    li= item

这将渲染一个无序列表，其中包含 items 数组中的所有元素。

变量

你可以在 Jade 模板中使用变量来动态生成内容。以下是一个示例：

p Hello, #{name}!

这将显示一个包含变量 name 值的段落。

混合

你可以使用混合来重用 Jade 模板中的代码块。以下是一个示例：

mixin alert(type, message)
  .alert(class=type)
    p= message

+alert('success', 'Your changes have been saved.')

这将渲染一个包含成功消息的警告框。

结论

在 Express.js 中使用 Jade 模板引擎可以让你更轻松地编写 HTML。通过本文，你已经学会了如何安装和使用 Jade，以及一些常见的 Jade 功能。希望这篇文章对你有帮助。

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