在多个HTML文件中包含相同的页眉和页脚

Question

我正在手动编辑约60个HTML文件，并希望在每个文件中包含相同的页眉和页脚。出于维护目的，我希望能够根据需要同时在所有页面上更新页眉和页脚。我认为旧式方法是使用框架，而新式方法是使用PHP。

问题是我需要保持站点当前的URL结构，而所有当前页面都有.html扩展名，这似乎阻止了使用PHP而不更改服务器设置。

我找到了这个答案(Make header and footer files to be included in multiple html pages)，它建议使用jQuery，但代码对我不起作用。

我是否被困在每次更新页眉/页脚时都要手动编辑每个文件？

- Knocks X

---

“但是这段代码对我不起作用。”不会帮助我们。你能简要说明一下吗？ - Shankar Narayana Damodaran

什么也没有发生。它似乎没有调用header.html。如果你看一下那个问题的评论，其他用户也无法正常工作。 - Knocks X

你在页面中加入了JQuery引用吗？并且修改了HTML代码以放置具有标题和页脚ID的div标签吗？ - Jorge Campos

为什么这样做不是一个好的实践方法呢？从多种不同的服务器语言输出.html扩展名很常见，而且配置服务器以允许在html扩展名中运行php编译器也并不困难。 - charlietfl

如果你需要维护60多个页面，我建议你使用主页系统，你需要将index.html更改为index.php，但其他页面可以保持.html扩展名。如果你对此感兴趣，你可以查看我对类似问题的回答这里。 - Milan and Friends

Answer 1

jQuery的load()函数可用于包含常见的页头和页脚。代码应如下所示：

<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>

请查看以下网址以获取更多说明：http://phpsmashcode.com/tips-and-tricks/include-common-files-in-html 或者您可以使用AJAX来加载通用头部和尾部。

  $.get('header-menu.html', {}, function(response) { 
    $('div#nav').append(response);
  });

  $.get('footer.html', {}, function(response) { 
    $('div#footer').append(response);
  });

它会将页脚和页眉分别加载到以下<div>中：

<div id="nav"></div>

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

- phpsmashcode

---

这样做似乎会重复加载相同的内容。为什么不使用Ajax有选择地加载需要更改的内容，同时保留页眉和页脚？这样不是可以节省一些带宽吗？ - Sudip Bhandari

Answer 2

你还可以使用非技术性的技巧。例如，使用 VSCode 中的高级搜索替换工具（Ctrl + Shift + H，或编辑 → 在文件中替换），在项目文件夹中查找您需要更改的代码片段（例如页脚）。找到后，用"全部替换"小按钮替换它。

如果要替换项目结尾的代码部分，可以在代码中添加瞄准标记。例如"

ChangeMeLater

"，然后在项目结尾处使用搜索替换工具查找该标记，并使用已完成的页脚进行更改。您甚至可以更改包括空格和换行符在内的代码，只要注意如何定位代码/单词即可。

我知道这不是 PHP，但你可能会觉得很方便。

- carloswm85