关于HTML多页面公共内容复用的技术咨询

嘿，这个问题简直是前端开发者的“日常噩梦”——谁也不想对着50+页面重复复制header/footer，后续改个版权信息还要挨个页面找，效率低到爆炸！完全不用这么折腾，给你几个从简单到进阶的实用方案，按需选就行：

1. 纯前端快速方案：JavaScript动态加载 #

如果不想碰后端或者构建工具，这个方法最快上手。把公共的header、footer单独存成独立的HTML文件（比如header.html、footer.html），然后在每个页面里用JS把它们插入到指定位置：

<!-- 页面中预留公共内容的位置 -->
<div id="page-header"></div>

<!-- 页面差异化主体内容 -->
<main>
  <h1>首页内容</h1>
  <!-- 其他内容 -->
</main>

<div id="page-footer"></div>

<script>
  // 加载header
  async function loadHeader() {
    const response = await fetch('header.html');
    const headerContent = await response.text();
    document.getElementById('page-header').innerHTML = headerContent;
  }

  // 加载footer
  async function loadFooter() {
    const response = await fetch('footer.html');
    const footerContent = await response.text();
    document.getElementById('page-footer').innerHTML = footerContent;
  }

  // 执行加载
  loadHeader();
  loadFooter();
</script>

• 优点：零额外依赖，5分钟就能搞定；
• 缺点：页面加载时可能出现短暂的公共内容空白（可以加个加载动画优化），而且搜索引擎可能抓取不到动态加载的内容，对SEO不太友好。

2. 开发阶段优化：用模板引擎预编译 #

如果想保留静态HTML的优势，同时解决复用问题，可以用模板引擎（比如Pug、Nunjucks、EJS），把公共部分抽成“局部模板”，开发时引用，最后编译成完整的静态HTML。

比如用Nunjucks的例子：

1. 先写公共模板header.njk和footer.njk；
2. 在页面模板home.njk中引用：

{% include './components/header.njk' %}

<main>
  <h1>关于我们</h1>
  <!-- 页面专属内容 -->
</main>

{% include './components/footer.njk' %}

然后用Gulp、Webpack这类工具把所有模板编译成静态HTML文件。

• 优点：编译后是纯静态HTML，SEO友好，开发时只维护一套公共代码；
• 缺点：需要学习基础的模板语法，配置简单的构建流程（不过网上有很多现成的starter模板，直接拿来用就行）。

3. 后端支持方案：服务器端包含（SSI）或后端模板继承 #

如果你的网站部署在支持SSI的服务器（比如Apache、Nginx）上，可以直接用服务器端包含指令，让服务器在返回页面时自动插入公共内容：

比如Apache环境下的写法：

<!--#include virtual="/common/header.html" -->

<main>
  <h1>联系我们</h1>
  <!-- 页面内容 -->
</main>

<!--#include virtual="/common/footer.html" -->

要是用后端框架（比如Node.js Express、PHP、Python Flask），还可以用模板继承的方式，更灵活：

比如Express用EJS的例子：

1. 先写母版布局layout.ejs：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title><%= pageTitle %></title>
</head>
<body>
  <header>这里是公共头部</header>
  
  <!-- 预留页面主体内容的位置 -->
  <%- body %>

  <footer>这里是公共页脚</footer>
</body>
</html>

2. 然后每个页面只需要写差异化内容：

<% layout('layout') %>
<% pageTitle = '首页' %>

<main>
  <h1>欢迎来到首页</h1>
</main>

• 优点：完美解决SEO问题，服务器返回的是完整HTML，用户看不到加载空白；
• 缺点：需要后端服务器支持，不能直接部署纯静态文件（除非用静态站点生成器）。

4. 现代主流方案：静态站点生成器（SSG） #

如果页面数量多（比如50+），而且想兼顾静态页面的性能和维护效率，静态站点生成器（比如Eleventy、Hugo、Gatsby）是最优解。

这类工具允许你把公共部分做成“组件”或“布局”，每个页面只需要编写差异化内容，构建时会自动生成所有完整的静态HTML页面。比如用Eleventy，你可以用Nunjucks或者Liquid模板语法，轻松实现内容复用，最终产出的是纯静态文件，部署简单，性能拉满。

• 优点：SEO友好、性能优异、维护成本极低，适合中大型静态站点；
• 缺点：需要花点时间学习SSG的基础使用，但入门门槛不高，尤其是Eleventy对新手很友好。

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