Tailwind UI静态HTML站点如何复用header/footer避免重复复制代码？

以下方案均兼容Tailwind UI样式，不需要调整你现有写好的组件代码：

方案1：客户端动态加载（零配置，无需构建） #

把header、footer的HTML单独存为/components/header.html、/components/footer.html独立文件，在每个页面对应位置加一小段原生JS加载即可：

<!-- 页面中需要插入header的位置 -->
<div id="header-wrap"></div>
<script>
// 公共组件加载逻辑可以单独抽成一个JS文件，每个页面只需要引一次
fetch('/components/header.html')
  .then(res => res.text())
  .then(html => document.getElementById('header-wrap').innerHTML = html)
</script>

• 优点：完全不需要修改开发流程，零配置，修改公共组件只需要改一次独立文件
• 缺点：首屏会有极短的闪动，对SEO要求极高的场景不适用，部分爬虫不会执行JS获取动态插入的内容

方案2：轻量静态构建工具（构建时注入，纯静态输出） #

不需要用复杂的前端框架，选用面向静态站点的轻量生成工具即可：

• 首选Eleventy(11ty)：仅需要做极简配置，把公共头尾放到_includes目录下的布局模板中，所有内容页套用该模板，运行构建命令即可自动生成注入了头尾的完整静态HTML文件，完全适配Tailwind构建流程
• 也可以用Vite配合vite-plugin-html插件，支持直接在原生HTML中用注释语法引入公共片段，构建时自动替换为真实HTML内容
• 优点：输出纯静态HTML，无客户端性能损耗，对SEO完全友好，学习成本极低
• 缺点：需要新增简单的构建步骤，部署时多一步构建操作

方案3：服务端包含（SSI，无需本地构建） #

如果你的托管平台支持SSI（Nginx、Apache、多数静态托管平台都支持手动开启），可以直接用SSI语法引入公共片段：

<!-- 页面中插入header的位置 -->
<!--#include file="/components/header.html" -->

服务器收到请求时会自动把对应文件的内容注入到页面中再返回给访客

• 优点：不需要本地构建，修改公共组件仅需要上传一次文件，返回的是完整HTML对SEO友好
• 缺点：依赖托管平台的SSI功能支持，需要提前确认平台配置

方案4：HTML预处理器 #

使用支持include语法的模板引擎，比如Nunjucks、Pug，把公共头尾存为片段文件，每个页面用include语法引入，编译后生成原生HTML

• 优点：语法简单，和原生HTML写法差异极小
• 缺点：需要学习基础的模板引擎语法，增加构建步骤

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