在多个html文件中包含相同的页眉和页脚 [英] Include same header and footer in multiple html files

问题描述

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

问题是我需要维护当前的URL结构网站和所有当前页面都有一个.html扩展名，这似乎禁止使用PHP而不更改服务器设置。

我找到了这个答案（使页眉和页脚文件包含在多个HTML页面中），其中建议使用jquery，但代码不适合我。

我是否坚持用每一个头文件/页脚更新手动编辑每个文件？

解决方案 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）; 
}）; 
 $ b $ .get（'footer.html'，{}，function（response）{
 $（'div＃footer'）。append（response）; 
}） ; 
  

它会将页脚和页眉加载到< div> s分别为：

 < div id =nav>< / div> 
 
< div id =footer>< / div> 
  

I am editing about 60 html files by hand and want to include an identical header and footer in each file. For maintenance purposes, I want to be able to update the header and footer on all pages simultaneously as needed. I think the old-fashioned way to do that was using frames, and the new one is PHP.

The problem is that I need to maintain the current URL structure of the site, and all current pages have a .html extension, which seems to bar using PHP without changing server settings.

I found this answer (Make header and footer files to be included in multiple html pages) which suggested using jquery, but the code is not working for me.

Am I stuck editing every file by hand with every header/footer update?

解决方案

jQuery's load() function can be used for including common headers and footers. The code should look like:

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

Check the following URL for more description:

http://phpsmashcode.com/tips-and-tricks/include-common-files-in-html

Or you can use AJAX to load common headers and footers:

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

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

It will load the footer and header into the following <div>s respectively:

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

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

这篇关于在多个html文件中包含相同的页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！