HTML技术问题：如何无需重复添加代码为网站所有页面添加头部

下面是几个简单有效的方法，适配不同技术栈：

1. 服务器端包含（SSI） #

这是最轻量化的方案，只要你的服务器支持就能用：

• 在每个页面需要插入头部的位置，写入指令：<!--#include virtual="/path/to/your/header.html" -->
• 配置服务器：比如Apache要开启mod_include模块，要么把页面后缀改成.shtml，要么在.htaccess里加规则让.html文件能解析SSI
• CSS文件直接在header.html里通过<link>引入即可，无需在每个页面重复编写

2. 纯前端JS动态插入 #

不想碰服务器配置的话，用JS就能搞定：

• 给每个页面添加一段JS，放在<body>最前面或者<head>末尾：

// 加载头部HTML并插入到页面顶部
fetch('/path/to/header.html')
  .then(res => res.text())
  .then(html => {
    document.body.insertAdjacentHTML('afterbegin', html);
  });

• 小提示：怕加载时出现闪烁，可以先给头部留个固定高度的占位容器，或者把代码放在DOMContentLoaded事件里执行

3. 静态站生成工具批量处理 #

如果是静态站点，用生成工具一次性处理更省心：

• 比如Jekyll里把头部存为_includes/header.html，然后在页面模板里写{% include header.html %}；Hugo里则用{{ partial "header.html" . }}
• 构建站点时，工具会自动把头部内容注入到所有页面，生成最终的静态文件，无需手动修改每个页面

4. PHP 包含（PHP项目适用） #

如果网站用PHP开发，直接用内置的包含函数：

• 在每个页面的头部位置写入：<?php include '/path/to/header.html'; ?>
• 记得把页面后缀改成.php，确保服务器能解析PHP代码

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