Node.js 如何将Handlebars HTML拆分为多个文件/部分

在本文中，我们将学习如何使用Node.js将Handlebars HTML拆分为多个文件/部分，并在任何想要的页面上使用它。这有助于减少代码的重复。例如，您可以将整个导航栏添加到每个页面上，而只需制作一个导航栏的模板，并将其导入到任何想要的页面上。我们可以使用EJS模块创建模板和分离Handlebars。EJS代表嵌入式Javascript，它是Node.js使用的模板引擎。这有助于使用最少的代码创建HTML模板。

安装EJS： 将您的项目根目录定位到终端，然后输入命令

npm install ejs

将EJS设置为视图引擎： 在你的服务器文件（app.js或server.js）中，写入以下代码将 EJS 设置为默认的视图引擎

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

重新整理您的目录： 需要将您的文件从 ‘.html’ 重命名为 ‘.ejs’ 以便在其中使用EJS。然后，您需要将每个单独的 ‘.ejs’ 文件移动到您根目录下的视图目录中。EJS默认会在视图文件夹中查找 ‘.ejs’ 文件。

创建Handlebars： 在视图文件夹中创建一个文件夹，我们称之为handlebars，这个文件夹中创建两个handlebars文件，第一个是 ‘navbar.ejs’ ，我们在其中编写导航栏代码，第二个是 ‘footer.ejs’ ，我们在其中编写底部代码。

导入Handlebars： 在您更新的 .ejs 文件中，您可以使用handlebars在任何地方使用以下代码

<%- include('handlebars/navbar') %>

示例： 让我们实现上述步骤来创建一个使用handlebars的简单项目。

步骤1： 创建一个文件夹，我们称之为handlebars，并在代码编辑器中打开它并打开终端。

步骤2： 将此文件夹定位到终端中并输入命令。

npm init -y

它初始化我们的应用程序，并生成一个package.json文件。

步骤3 : 使用以下命令在项目中安装Express和EJS模块。

node install express ejs

步骤4： 在 ‘app.js’ 文件中，引入 express 模块，并创建一个常量 ‘app’ 用来创建 express 模块的实例，然后将 EJS 设置为默认的视图引擎。

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

步骤5: 创建一个 views 文件夹，在该文件夹下创建一个 ‘home.ejs’ 文件，以及一个 handlebars 文件夹，并在该 handlebars 文件夹下创建两个文件， ‘navbar.ejs’ 和 ‘footer.ejs’ ，并在这些文件中编写一些基本的 HTML 代码。

navbar.ejs

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content=
           "width=device-width, initial-scale=1.0">
       <title>Home</title>
</head>
<body>

<h1>Navbar</h1>

footer.ejs

    <h1>Footer</h1>
</body>
</html>

步骤6： 在 ‘home.ejs’ 文件中编写一些HTML代码，并导入handlebars。

<%- include('handlebars/navbar') %>

<h1>Home</h1>

<%- include('handlebars/footer') %>

步骤7： 在 ‘app.js’ 中，创建 get 方法来渲染 ‘home.ejs’ 文件，并使用 listen 方法在端口 3000 上监听此项目。

const express = require('express');

const app = express();

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

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

app.listen(3000);

文件夹结构：

Node.js 如何将Handlebars HTML拆分为多个文件/部分

完整代码：

app.js

const express = require('express'); 
  
const app = express(); 
  
app.set('view engine', 'ejs'); 
  
app.get('/', (req, res) =>{ 
    res.render('home.ejs'); 
}); 
  
app.listen(3000);

Home.ejs

<%- include('handlebars/navbar') %> 
  
<h1>Home</h1> 
  
<%- include('handlebars/footer') %>

navber.ejs

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
              "width=device-width, initial-scale=1.0"> 
    <title>Home</title> 
</head> 
<body> 
      
<h1>Navbar</h1>

Footer.ejs