GitHub Pages托管静态HTML站点如何通过模板批量更新全站页眉页脚？

你设想的“单独维护独立header.html、footer.html公共模板，各页面复用内容”的模式完全可以实现，所有方案都是纯静态环境可跑、不需要额外后端服务，完全适配GitHub Pages的托管规则，没有额外构建成本。

方案1：原生JS加载公共模板（零依赖、完全匹配你最初的文件组织习惯） #

这个方案不需要任何静态站点生成工具，纯手写html就能跑，和你预想的文件结构1:1对应：

• 第一步把公共页眉、页脚的DOM片段单独存成独立文件：header.html、footer.html，注意这两个文件里不要写完整的<html>/<body>结构，只需要放页眉、页脚本身的标签内容就行——比如header.html里就只写<header class="site-nav">导航栏内容</header>，footer.html就只写<footer class="site-info">版权信息</footer>。
• 第二步在所有业务页面的对应位置留好内容占位：
  页面里要放页眉的位置加占位元素：<div id="header-slot"></div>
  页面里要放页脚的位置加占位元素：<div id="footer-slot"></div>
• 第三步在每个业务页面的</body>标签前加一段极简的加载脚本，不需要任何第三方库：

async function injectTemplate(slotId, templatePath) {
  const slot = document.getElementById(slotId);
  if (!slot) return;
  const resp = await fetch(templatePath);
  slot.innerHTML = await resp.text();
}
// 执行加载
injectTemplate('header-slot', './header.html');
injectTemplate('footer-slot', './footer.html');

这个方案的特点是：以后你要改页眉页脚的内容，只需要改header.html和footer.html两个文件，所有页面的内容会自动同步，不需要挨个打开每个页面改。

注意：本地测试的时候不要直接双击打开html文件，浏览器的安全策略会拦截本地文件的fetch请求，本地跑个简单的静态服务（比如python自带的python -m http.server）测试就行，推到GitHub Pages之后同域请求不会有跨域问题，完全正常加载。

方案2：利用GitHub Pages原生Jekyll能力（无客户端JS开销，加载性能更好） #

GitHub Pages默认自带Jekyll静态站点构建能力，不需要你本地安装任何工具，直接推代码就能自动构建，比JS加载的方案体验更好：

• 在站点根目录新建_includes文件夹，把抽离的页眉、页脚DOM片段分别存成_includes/header.html、_includes/footer.html，同样只需要放页眉页脚本身的标签片段就行。
• 所有业务页面不需要加占位元素、也不需要写JS，只需要在对应要放页眉的位置写Jekyll引入代码：{% include header.html %}，要放页脚的位置写：{% include footer.html %}
• 代码推到GitHub之后，平台在构建站点的时候，会自动把公共模板的内容替换到对应位置，用户访问的时候拿到的就是已经填好页眉页脚的完整静态html，不需要等客户端JS加载渲染，不会出现内容闪烁，加载速度更快。

注意：如果你的站点根目录没有_config.yml文件，新建一个空的_config.yml就能确保Jekyll的构建逻辑正常启用，不需要写任何配置内容。

选型参考 #

• 如果你想完全保留纯手写静态html的流程，不想接触任何静态生成工具，选方案1，上手零学习成本。
• 如果你更在意页面加载速度，不想让用户端执行JS才能看到公共内容，选方案2，用GitHub Pages自带的能力就能实现，没有额外维护成本。

常见踩坑提示 #

• 抽离的公共模板文件里不要重复引入公共CSS、JS资源，避免代码冗余，站点公共样式和脚本统一在业务页面的head标签里引入一次即可。
• 模板文件的路径要和实际目录结构对应，如果header.html存在templates子目录下，加载路径就要写对，不然会出现404加载失败的问题。

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