如何实现多页面网站头部代码复用？[HTML/CSS/JavaScript]

首先明确：仅靠HTML和CSS无法实现将空<div class="header"></div>替换为完整头部代码并同步更新——CSS负责样式渲染，没有插入HTML结构的能力。以下是几种能实现「一处修改、全页同步」的实用方案：

一、前端JavaScript方案（纯静态页面适用） #

把头部代码单独存成一个独立的HTML文件，然后在每个页面的目标位置用JavaScript加载并插入内容。

1. 新建header.html，写入你的头部代码：

<img src="logo.png">
<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

2. 在每个页面的底部（或在<head>中添加defer属性）插入这段JS：

const headerContainer = document.querySelector('.header');
fetch('header.html')
  .then(response => response.text())
  .then(html => {
    headerContainer.innerHTML = html;
  });

之后只需修改header.html，所有页面的头部会自动同步更新。

二、后端模板复用（有后端语言支持时推荐） #

如果你的网站基于后端语言（如PHP、Python、Node.js）开发，直接用语言自带的文件引入功能，是效率最高的方案。

示例：PHP环境 #

1. 把头部代码存为header.php：

<header>
    <img src="logo.png">
    <nav>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
</header>

2. 在每个页面需要头部的位置引入：

<?php include 'header.php'; ?>

后端渲染页面时会自动插入header.php的内容，修改该文件即可实现全页同步。

示例：Node.js + EJS模板 #

1. 头部存为partials/header.ejs：

<header>
    <img src="logo.png">
    <nav>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
</header>

2. 在页面模板中引入：

<%- include('partials/header') %>

三、静态站点生成器（适合纯静态但需批量构建的场景） #

如果是纯静态网站但需要更优雅的复用逻辑，可以用静态站点生成器（如Hugo、Jekyll、Hexo），它们原生支持组件复用：

示例：Hugo #

1. 把头部代码存为layouts/partials/header.html
2. 在页面模板中引入：

{{ partial "header.html" . }}

生成站点时，所有页面会自动插入头部内容，修改partial文件后重新生成即可同步所有页面。

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