本文介绍多种不重复编写 HTML 代码即可全局复用页眉页脚的实用方案，涵盖服务端包含（SSI）、构建工具、前端模板引擎及现代静态站点生成器，兼顾零 JavaScript 依赖与工程化可维护性。
本文介绍多种不重复编写 html 代码即可全局复用页眉页脚的实用方案，兼顾零 javascript 依赖与工程化可维护性。
在纯静态 HTML 网站开发中，直接将
✅ 推荐方案对比与实践
| 方案 | 是否需服务器支持 | 是否需构建步骤 | 是否依赖 JS | 适用场景 |
|---|---|---|---|---|
| 服务端包含（SSI） | ✅（需 Apache/Nginx 启用） | ❌ | ❌ | 小型托管环境（如共享主机），最轻量无构建 |
| 静态站点生成器（Hugo/Jekyll） | ❌（生成后纯静态） | ✅（hugo build） | ❌ | 中小型内容站，强推荐长期维护项目 |
| 构建工具（Vite + HTML 插件） | ❌ | ✅（npm run build） | ❌ | 已使用前端工具链的项目，灵活可控 |
| 客户端 JS 动态加载（fetch + insertAdjacentHTML） | ❌ | ❌ | ✅ | 快速原型或兼容性要求极低的场景（不推荐生产） |
? 方案一：服务端包含（SSI）——零构建、零 JS（推荐入门）
确保 Web 服务器启用 SSI（如 Apache 配置 Includes 模块），将页面扩展名改为 .shtml，并在需插入页眉处添加：
<!--#include file="header.html" -->
header.html 可为纯 HTML 片段（无需 标签），CSS 仍通过 外链。优点是服务端实时解析，用户看到的是完整 HTML；缺点是需服务器配置权限，且不适用于 GitHub Pages 等纯静态托管。
? 方案二：Hugo（静态站点生成器）——专业级首选
- 安装 Hugo，初始化项目：hugo new site my-site
- 创建布局模板 layouts/_default/baseof.html：
<title>{{ .Title }}</title> {{ partial "header.html" . }} <main>{{ .Content }}</main> {{ partial "footer.html" . }} - 将页眉存为 layouts/partials/header.html，所有页面自动继承。
✅ 优势：生成纯静态文件、支持变量/逻辑、社区主题丰富、完美适配 GitHub Pages。
? 方案三：Vite + vite-plugin-html（现代前端工作流）
安装插件后，在 vite.config.js 中配置：
import { defineConfig } from 'vite'
import html from 'vite-plugin-html'
export default defineConfig({
plugins: [
html({
inject: {
data: { header: await readFile('src/partials/header.html', 'utf8') }
}
})
]
})
在 index.html 中使用 占位符。适合已有 Vite 项目的渐进式升级。
⚠️ 注意事项
- 避免纯前端 JS 方案用于 SEO 敏感页面：fetch 加载的页眉无法被搜索引擎爬虫索引，且首屏存在 FOUC（闪白）风险；
- CSS 作用域隔离：复用的 header.html 中的样式应确保选择器不污染全局，建议使用 BEM 或 CSS Modules；
- 路径一致性：所有方案中，header.html 的相对路径需与引用位置对齐，推荐使用根相对路径（如 /partials/header.html）。
综上，若追求开箱即用与长期可维护性，Hugo 是静态网站页眉页脚复用的黄金标准；若受限于服务器环境，SSI 是最简洁的替代方案。放弃“纯 HTML 实现”的执念，拥抱合理的工具链，才是现代静态网页开发的务实之道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
