如何用Node.js、ExpressJS及hbs/EJS实现多页面网站通用页眉页脚

Got it, let's break down how to implement reusable headers and footers in your Express.js app using either EJS or Handlebars (HBS) — no PHP or w3-include required, just clean Node.js template engine magic.

Option 1: Using EJS #

EJS is a simple, embedded JavaScript template engine that lets you reuse chunks of HTML easily. Here's how to set it up:

1. Install EJS
   First, add EJS to your project dependencies:

   npm install ejs
   

2. Configure Express to use EJS
   In your main app.js file, set EJS as the view engine and define your views directory (explicit setup avoids confusion):

   const express = require('express');
   const app = express();
   
   // Set EJS as the view engine
   app.set('view engine', 'ejs');
   // Define where your view files live
   app.set('views', __dirname + '/views');
   

3. Create Partial Templates
   Make a partials folder inside your views directory, then create header.ejs and footer.ejs with your reusable navigation/footer code:

   • views/partials/header.ejs:

     <div id="header">
       <!-- Navbar content here: logo, links, etc. -->
       <nav>
         <a href="/">Home</a>
         <a href="/about">About</a>
         <a href="/contact">Contact</a>
       </nav>
     </div>
     

   • views/partials/footer.ejs:

     <div id="footer">
       <p>© 2024 My Website | All Rights Reserved</p>
     </div>
     

4. Include Partials in Your Main Pages
   In any EJS file (e.g., views/home.ejs), use the <%- %> tag to insert your header and footer — this ensures the HTML is rendered without escaping:

   <html>
   <head>
     <title>Home Page</title>
   </head>
   <body>
     <%- include('partials/header') %>
     <!-- Page-specific content goes here -->
     <h1>Welcome to My Website!</h1>
     <p>This is the home page content.</p>
     <%- include('partials/footer') %>
   </body>
   </html>
   

5. Set Up a Route to Render the Page
   In app.js, add a route to serve your page:

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

Option 2: Using Handlebars (HBS) #

Handlebars is another popular template engine with built-in support for partials. Here's the setup:

1. Install HBS
   Add the Handlebars package to your project:

   npm install hbs
   

2. Configure Express to use HBS
   In app.js, set HBS as the view engine and register the partials directory so Handlebars can locate your reusable chunks:

   const express = require('express');
   const hbs = require('hbs');
   const app = express();
   
   // Set HBS as the view engine
   app.set('view engine', 'hbs');
   // Register the partials folder location
   hbs.registerPartials(__dirname + '/views/partials');
   

3. Create Partial Templates
   Just like with EJS, make a partials folder in views and create header.hbs and footer.hbs:

   • views/partials/header.hbs:

     <div id="header">
       <nav>
         <a href="/">Home</a>
         <a href="/about">About</a>
         <a href="/contact">Contact</a>
       </nav>
     </div>
     

   • views/partials/footer.hbs:

     <div id="footer">
       <p>© 2024 My Website | All Rights Reserved</p>
     </div>
     

4. Include Partials in Your Main Pages
   In your HBS files (e.g., views/home.hbs), use the {{> partialName}} syntax to insert the header and footer:

   <html>
   <head>
     <title>Home Page</title>
   </head>
   <body>
     {{> header}}
     <!-- Page-specific content goes here -->
     <h1>Welcome to My Website!</h1>
     <p>This is the home page content.</p>
     {{> footer}}
   </body>
   </html>
   

5. Set Up a Route to Render the Page
   Add a route in app.js to serve your page:

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

Key Notes #

• Both approaches rely on partials (reusable template chunks) to keep your code DRY (Don't Repeat Yourself). Update a partial once, and every page using it will reflect the change — no more editing headers/footers across multiple files!
• Double-check your project structure matches the setup above (e.g., views/partials exists) so the template engine can find your files.

内容的提问来源于stack exchange，提问作者Sid