多页面网站<header>与<footer>批量修改方案及PHP扩展名困惑咨询

方案1：保留HTML后缀，让服务器解析PHP #

如果不想修改所有文件的后缀，可以通过服务器配置实现HTML文件解析PHP代码：

• 若用Apache服务器：在网站根目录创建.htaccess文件，添加以下规则：

  AddType application/x-httpd-php .html .htm
  

  这样HTML文件中的<?php include('header.php'); ?>代码会被正常执行，无需批量改后缀，工作量极小。而且你的站点以静态内容为主，PHP的include操作几乎不会影响加载速度，完全不用担心性能问题。

方案2：使用静态站点生成器（SSG） #

如果不想依赖服务器端语言，静态站点生成器是更适配的选择，比如上手简单的Eleventy、Jekyll：

• 将header、footer做成独立的模板片段（比如_includes/header.njk），然后在页面模板中引用这些片段。
• 写完内容后，工具会自动生成完整的静态HTML文件，直接上传到服务器即可。
• 优点是最终输出纯HTML，性能最优，后续更新只需要修改模板或内容，重新生成一次站点就行，非常适合内容更新频率不高的个人作品站。

方案3：纯前端JS加载公共片段 #

完全不需要服务器支持，用原生JS就能解决：

• 创建header.html和footer.html，只存放对应部分的HTML代码。
• 在每个页面的<body>开头和结尾预留<header>、<footer>标签，然后添加这段JS代码：

  // 加载header
  fetch('header.html')
    .then(response => response.text())
    .then(data => document.querySelector('header').innerHTML = data);
  
  // 加载footer
  fetch('footer.html')
    .then(response => response.text())
    .then(data => document.querySelector('footer').innerHTML = data);
  

• 工作量仅为添加这段代码，无需修改文件后缀。唯一小瑕疵是页面加载时可能会有短暂的片段空白，但对小型站来说几乎可以忽略。

总结 #

如果已经了解基础PHP，方案1最省事儿，改个服务器配置就能搞定；如果想彻底脱离服务器端依赖，方案3上手最快；如果打算长期维护站点、后续可能扩展功能，方案2的扩展性更好，新增博客分类、归档等功能也更方便。

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