如何用Node.js实现类似PHP的HTML内容导入功能？

Absolutely! You can replicate that PHP-style HTML component reuse in Node.js—there are several practical approaches depending on your project setup, and many of them let you integrate Node.js logic with HTML just as seamlessly as PHP does. Let’s break down the most common methods:

1. Use a Template Engine (Closest to PHP's Workflow) #

This is the most popular and straightforward way to get that "seamless HTML + backend logic" experience you’re used to with PHP. Template engines like EJS, Handlebars, or Pug let you embed Node.js logic directly in your HTML files and reuse components easily.

Example with EJS (Most Similar to PHP): #

• First, install EJS and set up your Node.js server (we’ll use Express here, since it’s the most common framework):

  npm install express ejs
  

• Configure your Express app to use EJS as the view engine:

  const express = require('express');
  const app = express();
  
  // Set EJS as the template engine
  app.set('view engine', 'ejs');
  // Optional: Set the directory for your views (default is /views)
  app.set('views', './views');
  

• Create a partials folder inside your views directory, and add your reusable component (e.g., navbar.ejs):

  <!-- views/partials/navbar.ejs -->
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  

• Now, include this partial in any of your main view files (e.g., index.ejs):

  <!-- views/index.ejs -->
  <!DOCTYPE html>
  <html>
  <head>
    <title>Home Page</title>
  </head>
  <body>
    <!-- Include the navbar partial (the "-" ensures HTML is rendered without escaping) -->
    <%- include('partials/navbar') %>
    
    <h1>Welcome to the Home Page!</h1>
    <!-- Rest of your content -->
  </body>
  </html>
  

• Finally, render the view in your route:

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

This works almost exactly like PHP’s include—the partial is rendered server-side before sending the HTML to the client.

2. Pure Node.js (No Framework/Template Engine) #

If you don’t want to use a framework or template engine, you can use Node’s built-in fs (file system) module to read and inject HTML components manually. This is more manual but works for small projects:

const http = require('http');
const fs = require('fs').promises;

const server = http.createServer(async (req, res) => {
  // Read the navbar component
  const navbar = await fs.readFile('./partials/navbar.html', 'utf8');
  // Read the main page content
  const mainContent = await fs.readFile('./views/index.html', 'utf8');
  
  // Replace a placeholder in the main content with the navbar
  const finalHtml = mainContent.replace('{{NAVBAR}}', navbar);
  
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(finalHtml);
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

In your index.html, just add the placeholder where you want the navbar to go:

<!-- views/index.html -->
<!DOCTYPE html>
<html>
<body>
  {{NAVBAR}}
  <h1>Home Page</h1>
</body>
</html>

3. Client-Side JavaScript (Dynamic Loading) #

If you want to load components on the client side (after the page has loaded), you can use vanilla JavaScript or a frontend framework like React/Vue. Here’s a vanilla JS example:

<!-- In your main HTML file -->
<div id="navbar"></div>

<script>
  async function loadNavbar() {
    const response = await fetch('/partials/navbar.html');
    const navbarHtml = await response.text();
    document.getElementById('navbar').innerHTML = navbarHtml;
  }
  
  loadNavbar();
</script>

Note that this loads the component after the initial page render, so there might be a slight delay. It’s better for dynamic content rather than core UI elements like navbars.

A Quick Note on Integration #

You mentioned worrying about Node.js’s integration with HTML being lower than PHP’s—template engines eliminate this gap entirely. Tools like EJS let you write HTML with embedded Node.js variables and logic, just like PHP’s <?php ?> tags. It’s a very similar workflow once you set it up.

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