在 Express.js 应用程序中使用 Handlebars 实现页面布局的教程

Handlebars 是一个流行的 JavaScript 模板引擎,它非常适合用于 Express.js 应用程序中实现页面布局。在本教程中,我们将详细讲解如何使用 Handlebars 来创建可复用模板和布局,从而加快 web 应用程序的开发。

第一步:安装 Handlebars

在使用 Handlebars 之前,我们需要安装它。可以使用 npm 在项目中安装 Handlebars。

--- ------- ---------- ------

第二步:设置 Express.js 应用程序

在 Express.js 应用程序中使用 Handlebars 非常简单。我们可以使用 express-handlebars 软件包来配置 Express.js 应用程序以使用 Handlebars 模板引擎。

首先,让我们安装 express-handlebars

--- ------- ------------------ ------

接下来,我们需要在 app.js 文件中设置 Express.js 应用程序。

----- ------- - -------------------
----- ------  - ------------------------------

----- --- - ----------

-- -- ---------- ------
------------------------ ----------
------------- -------- --------------

-- --------
----------------------------------

-- -----
---------------- -------- -- -
  -------------------- --- --------- -- ---- --------
---

在这里,我们首先引入并配置 express-handlebars 模板引擎。然后,我们设置静态文件目录和监听端口号。

第三步:创建 Handlebars 模板

现在,我们可以编写 Handlebars 模板来渲染我们的页面。在本教程中,我们将为主页、文章、菜单和页脚创建模板。

主页模板

以下是 home.handlebars 主页模板的示例代码。

--------- -----
------
  ------
    ------------------------
  -------
  ------
    --- --------

    ----------- -- --- -------------

    --- --------
  -------
-------

在这里,我们使用 Handlebars 语法来定义页面标题、页面头部和页脚。其中,{{> header}}{{> footer}} 表示引用另一个 Handlebars 模板,分别为 header.handlebarsfooter.handlebars

文章模板

以下是 article.handlebars 文章模板的示例代码。

--------- -----
------
  ------
    ------------------------
  -------
  ------
    --- --------

    ---------
      ------------------
      ---------------
    ----------

    --- --------
  -------
-------

在这里,我们使用 Handlebars 语法来渲染文章标题和正文。

菜单模板

以下是 menu.handlebars 菜单模板的示例代码。

----
  ------ ----------------------
  ------ ----------------------------
  ------ --------------------------------
-----

在这里,我们使用 HTML 语法来创建链接列表,这些链接将导航到网站的其他页面。

页脚模板

以下是 footer.handlebars 页脚模板的示例代码。

--------
  ------ ---- --- -------
---------

在这里,我们使用 HTML 语法来创建网站的版权信息。

第四步:创建 Handlebars 布局

现在,我们已经创建了多个 Handlebars 模板。我们将使用 Handlebars 布局来定义这些模板的共同元素,如页眉和页脚。

在本教程中,我们将创建一个名为 main.handlebars 的布局。以下是示例代码。

--------- -----
------
  ------
    ------------------------
  -------
  ------
    --- --------

    --- ---- ---

    --- --------
  -------
-------

在这里,我们使用 {{{ body }}} 语法来渲染模板内容。这允许模板内容插入在布局的主内容区域中。

第五步:渲染模板和布局

现在,我们已经创建了多个 Handlebars 模板和布局。我们将使用 Express.js 应用程序来渲染这些模板,并将它们与布局结合使用。

以下是在 Express.js 应用程序中渲染 home.handlebars 模板和 main.handlebars 布局的示例代码。

------------ -------- ----- ---- -
  ------------------ - 
    ------- -------
    ------ ------ 
  ---
---

在这里,我们使用 res.render 方法来渲染 Handlebars 模板并将其与布局结合使用。我们还通过第二个参数传递数据上下文,例如页面标题、菜单和内容。

结论

在本教程中,我们介绍了如何在 Express.js 应用程序中使用 Handlebars 来实现页面布局。我们创建了多个可复用的 Handlebars 模板,并用一个名为 main.handlebars 的布局来组合它们。如果使用得当,这些技术将使 web 应用程序的开发速度更快,并提高可维护性和可重复使用性。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672203e32e7021665e09ebf6