Jade 是一款优美、高效的模板引擎，它可以让我们轻松地创建 HTML 页面。在 Express.js 中使用 Jade 模板引擎可以帮助我们更加高效地开发 Web 应用程序。在本文中，我们将介绍如何在 Express.js 中使用 Jade 模板引擎。
安装 Jade
在使用 Jade 模板引擎之前，我们需要先安装它。可以使用 npm 命令来安装 Jade：
npm install jade --save
Jade 模板语法
Jade 模板语法非常简洁，可以让我们快速编写 HTML 页面。以下是一些常用的 Jade 语法：
- 标签：使用标签名称来创建 HTML 标签。例如，
div标签可以使用div关键字来创建。 - 类：使用点号来指定类名。例如，
.container表示一个类名为container的 div 元素。 - ID：使用井号来指定 ID。例如，
#header表示一个 ID 为header的元素。 - 属性：使用括号来指定元素的属性。例如，
a(href='/') Home表示一个链接到根路径的超链接。 - 内容：使用文本来表示元素的内容。例如，
h1 Hello, World!表示一个 h1 标题，内容为 "Hello, World!"。
在 Express.js 中使用 Jade 模板引擎
在 Express.js 中使用 Jade 模板引擎非常简单。我们只需要在应用程序中设置模板引擎，并将模板文件的路径指定为视图目录即可。
以下是一个简单的 Express.js 应用程序，使用 Jade 模板引擎来渲染 HTML 页面：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- -- ---- ---- ------------- -------- -------- ---------------- --------- - ---------- -- ---- ------------ ----- ---- -- - ------------------- - ------ ----------- ---- ----- --- --- -- ------ ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
在上面的代码中，我们首先设置了 Jade 模板引擎，将视图目录设置为 views。然后，我们定义了一个路由，使用 res.render() 方法来渲染 index.jade 文件。最后，我们启动了应用程序并监听端口 3000。
在 views 目录下，我们可以创建一个名为 index.jade 的文件来定义 HTML 页面的布局和内容。以下是一个简单的 index.jade 文件示例：
doctype html
html
head
title= title
body
h1= title
p Welcome to Express.js with Jade在上面的代码中，我们使用 Jade 模板语法来创建 HTML 页面。title 变量是通过 res.render() 方法传递给模板引擎的。在渲染 HTML 页面时，Jade 模板引擎会将 title 变量的值替换为 HTML 标题的内容。
总结
在本文中，我们介绍了如何在 Express.js 中使用 Jade 模板引擎。我们了解了 Jade 模板语法的基础知识，并通过一个简单的示例代码演示了如何在 Express.js 应用程序中使用 Jade 模板引擎来渲染 HTML 页面。希望本文能够帮助读者更好地理解和使用 Jade 模板引擎。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6554806cd2f5e1655de42a59