如何在多页面网站中无需复制粘贴生成相同的<head>标签内容？

Great question—copy-pasting content across pages is a huge pain, and Node.js gives you several clean ways to avoid it, just like how you handle shared navigation or headers. Let’s break down the most practical approaches based on your needs:

1. Use a Template Engine (Server-Side Rendering) #

Template engines like EJS, Nunjucks, or Pug let you split your HTML into reusable "partials" and render them dynamically with Node.js (usually paired with Express). EJS is a great starting point since it’s almost identical to plain HTML, so your existing code will feel familiar.

Step 1: Split Your into a Partial #

Create a views/partials/head.ejs file with your shared content, adding a placeholder for dynamic values like the page title:

<html lang="en-US">
<head>
<meta charset="UTF-8">
<!-- saved from url=(0014)about:internet -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<script src="_js/jquery-3.3.1.min.js"></script>
<script src="_js/includes.js"></script>
<!--[if lt IE 9]>
<script src="HMTL5Shiv\html5shiv.js"></script>
<![endif]-->
<title><%= pageTitle %></title>
</head>

Step 2: Include the Partial in Your Pages #

In your main page templates (like views/index.ejs), use EJS’s include syntax to pull in the head partial, passing in the page-specific title:

<%- include('partials/head', { pageTitle: 'Home' }) %>
<body>
<header class="topHeader">
<%- include('partials/header') %>
</header>
<div class="navigation">
<%- include('partials/navigation') %>
</div>
<!-- Rest of your home page content -->
</body>
</html>

Step 3: Set Up Express to Render EJS #

Install dependencies first:

npm install express ejs

Then configure your Express server to use EJS as the view engine:

const express = require('express');
const path = require('path');
const app = express();

// Set EJS as the view engine
app.set('view engine', 'ejs');
// Point to your views directory
app.set('views', path.join(__dirname, 'views'));

// Serve static files (CSS, JS, images)
app.use(express.static(path.join(__dirname, 'public')));

// Route for home page
app.get('/', (req, res) => {
  res.render('index', { pageTitle: 'Home' });
});

// Route for an About page
app.get('/about', (req, res) => {
  res.render('about', { pageTitle: 'About Us' });
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

2. Template Inheritance (More Flexible for Complex Sites) #

If you want a more structured approach, use a template engine like Nunjucks that supports template inheritance. This lets you create a base template with your shared , navigation, and layout, then extend it for each page.

Step 1: Create a Base Template #

Make views/base.html with your core layout:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<!-- saved from url=(0014)about:internet -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<script src="_js/jquery-3.3.1.min.js"></script>
<script src="_js/includes.js"></script>
<!--[if lt IE 9]>
<script src="HMTL5Shiv\html5shiv.js"></script>
<![endif]-->
<title>{% block title %}Default Title{% endblock %}</title>
{% block extraHead %}{% endblock %} <!-- For page-specific head content -->
</head>
<body>
<header class="topHeader">
{% include 'partials/header.html' %}
</header>
<div class="navigation">
{% include 'partials/navigation.html' %}
</div>
{% block content %}{% endblock %} <!-- Page-specific content goes here -->
</body>
</html>

Step 2: Extend the Base Template for Your Pages #

In views/index.html, extend the base and fill in the dynamic blocks:

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block extraHead %}
<!-- Add page-specific meta tags, styles, or scripts here -->
<meta name="description" content="Welcome to our home page!">
{% endblock %}

{% block content %}
<h1>Welcome to Our Site</h1>
<!-- Rest of your home page content -->
{% endblock %}

Step 3: Configure Express with Nunjucks #

Install dependencies:

npm install express nunjucks

Set up your server:

const express = require('express');
const nunjucks = require('nunjucks');
const path = require('path');
const app = express();

// Configure Nunjucks
nunjucks.configure('views', {
  autoescape: true,
  express: app
});

// Serve static files
app.use(express.static(path.join(__dirname, 'public')));

// Route for home page
app.get('/', (req, res) => {
  res.render('index.html');
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

3. Static Site Generation (For Pre-Built HTML) #

If you don’t need server-side rendering and want static HTML files, use a build tool like Gulp with gulp-file-include to merge partials during development.

Step 1: Set Up Gulp #

Install dependencies:

npm install gulp gulp-file-include --save-dev

Create a gulpfile.js:

const gulp = require('gulp');
const fileInclude = require('gulp-file-include');

// Task to process HTML partials
gulp.task('html', function() {
  return gulp.src(['src/*.html'])
    .pipe(fileInclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('dist'));
});

// Watch for changes to recompile
gulp.task('watch', function() {
  gulp.watch(['src/*.html', 'src/partials/*.html'], gulp.series('html'));
});

// Default task: build and watch
gulp.task('default', gulp.series('html', 'watch'));

Step 2: Create Partials and Pages #

Make src/partials/head.html:

<html lang="en-US">
<head>
<meta charset="UTF-8">
<!-- saved from url=(0014)about:internet -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<script src="_js/jquery-3.3.1.min.js"></script>
<script src="_js/includes.js"></script>
<!--[if lt IE 9]>
<script src="HMTL5Shiv\html5shiv.js"></script>
<![endif]-->
<title>@@title</title>
</head>

Then in src/index.html:

@@include('./partials/head.html', { "title": "Home" })
<body>
<header class="topHeader">
@@include('./partials/header.html')
</header>
<div class="navigation">
@@include('./partials/navigation.html')
</div>
<!-- Home page content -->
</body>
</html>

Step 3: Build Your Static Files #

Run gulp in your terminal, and it will compile all your partials into static HTML files in the dist directory.

All these approaches eliminate copy-pasted content, and they play nicely with Node.js. Choose the one that fits your workflow: server-side templates for dynamic sites, template inheritance for complex layouts, or static generation if you just need plain HTML files.

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