引言
在网页开发中，模板引擎是非常常用的技术之一，它用于在网站中生成 HTML 页面。在 Node.js 中，开发者可以使用 EJS（Embedded JavaScript templates）作为模板引擎来渲染 HTML 页面。EJS 允许您创建可复用的代码片段，并将其作为部分视图嵌入到您的 EJS 文件中。
本文旨在介绍如何在 Express.js/ Node.js 的 EJS 中包含部分视图，并提供示例代码和学习指导。
为什么需要部分视图？
在一个网站中，许多页面可能具有相似的结构和视觉元素。在这些情况下，每次创建一个新页面都会导致大量的重复代码和维护开销。解决这个问题的一种方法是使用部分视图来创建可重用的代码片段。
部分视图是一种嵌入到引用它们的页面中的“片段” HTML。通过在多个页面中重复使用部分视图，您可以减少代码的复制和粘贴，并使网站更易于维护。
如何在 EJS 中包含部分视图
首先，您需要创建一个模板文件来编写您的 EJS 代码。该文件的文件扩展名应该是 ".ejs"。在这个模板文件中，您可以使用标准的 EJS 语法来编写您的页面。
例如，以下是一个简单的模板文件，它将在页面的头部和脚部中包含两个部分视图：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- --------- ---------- -- ------- ------------- -- ------- ------ -- ------- --------------- -- ------- --------- ------- ---------- -- -- ------------ -- ------- --------------- -- ------- -------
在上面的代码中，我们使用 <% include %> 语法来引用我们的部分视图。该语法用于将一个指定的文件中的内容包含进来，并在渲染页面时将其嵌入到相应的位置。在本例中，我们使用了三个 <% include %>。这将包含 partials/head.ejs 中的内容作为页面的头部，partials/footer.ejs 中的内容作为页面的脚部，并使用了 partials/header.ejs 中的内容作为页面的主体部分。
现在让我们看看如何将实际部分视图创建为 EJS 文件。
创建部分视图
创建一个 EJS 部分视图很简单。只需编写您要在多个页面中重复使用的 HTML 代码，并将其保存为 .ejs 文件，即可完成部分视图的创建。本文中的示例代码中，我们将使用一个包含店铺名称、地址、电话号码和商标的 footer 部分视图，作为我们的示例部分视图。
创建 partials/footer.ejs 文件，并添加以下代码：
-- -------------------- ---- -------
--------
---- --------------------
---- ---------------------- -------- -------- ----
------
---- ---------------------
------- -------- -------
------ ----------- ------
------ --------- ------
------
---------在上面的示例中，我们使用标准的 EJS 语法来插入变量并渲染 HTML 输出。该部分视图使用变量 shopName、shopAddress 和 shopPhone 进行传递，以便在嵌入部分视图的页面中进行自定义。
在 app.js 文件中，我们可以定义并渲染模板页面：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
----- ---- - ---------------
----- ---- - ----
---------------- -- -- ------------------- ------- -- ---- ----------
---------------- -------------------- ---------
------------- -------- ------
------------ ----- ---- -- -
------------------- -
---------- ----- ------
--------- --- ------
------------ ---- ---- --- ------- -----
---------- ----------------
--
--在上面的代码中，我们使用 res.render() 函数来渲染我们的 EJS 模板文件 index.ejs。我们在模板上设置了 pageTitle 变量和该应用程序名称变量的其他属性，然后将其传递到模板中以进行处理和显示。
在 <% include %> 中，我们要指向之前定义的 .ejs 文件。由于在 partials 文件夹中实现了我们的部分视图，因此我们需要相对于 views 文件夹指定该视图的路径。为了简化路径，我们在 app.js 中设置了 views 选项来设置视图文件夹的默认路径。
现在，您已经学会了如何在 EJS 中包含部分视图。您可以通过以下两种方式对部分视图进行扩展，使其更具通用性：
使用变量来自定义部分视图的内容。
使用数据库中的数据来动态生成部分视图。这将允许您在安全的条件下自定义部分视图，并从数据中心维护您的网站。
总结
在本文中，我们详细讨论了如何在 Express.js/ Node.js 中使用 EJS 来创建可重用的部分视图，并给出了实现步骤。本文介绍了如何创建 EJS 模板文件、在模板文件中包含部分视图、如何创建自定义 EJS 部分视图、以及如何使用数据来动态生成部分视图。我们希望本文可以帮助您更好地理解 Node.js 中的 EJS 并在网站设计中提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503ce9095b1f8cacd098682