如何处理超过10页的静态页眉/页脚？

Question

我该如何处理10多个页面中不变的静态页眉/页脚。 请记住，所有这些页面共享相同的页眉/页脚。 因此，当前，如果我更改页眉/页脚中的一个内容，则需要转到所有其他页面以进行相同的更改。

我希望实现的基本上是一次更改，并将更改反映在所有页面上。

我正在考虑在.txt文件中添加页眉/页脚（HTML），并以JavaScript方式调用该.txt文件。 但我很确定，将html包含在.txt文件中并且也通过js调用该.txt文件是一种不好的做法，并且存在安全风险。

Answer 1

您需要创建单独的页眉和页脚html文件，然后需要在所有页面上包含这些文件。 这样您就可以控制它。

检查下面如何在另一个HTML文件中包含一个HTML文件

http://www.w3schools.com/howto/howto_html_include.asp

在HTML文件 html 文件中包含另一个HTML文件

http://www.hongkiat.com/blog/html-import/

您可以使用另一种方式来创建php文件而不是html，并在另一种轻松包含通用php文件的方法

http://www.w3schools.com/php/php_includes.asp

Answer 2

您可以使用角度指令。

var myApp = angular.module('myApp', []);

myApp.directive('mainNavigation', function(){
  return {
    restrict: 'E',
    templateUrl: 'partials/navigation.html'
  }
});

然后，您可以使用ng-app="myApp调用angular，然后将指令包含在所需的区域中。在这种情况下，您将拥有：

<main-navigation></main-navigation>

Answer 3

您可以使用jQuery的.load()函数。

请记住，这将在每个页面请求上向服务器添加两个额外的调用。 （ api.jquery.com/load ）

 // add this snippet somewhere in your page (inside <script> tags) $(function() { $("header").load("header-url"); $("footer").load("footer-url"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> Header </header> <hr/> <div id="content"> static page content goes here </div> <hr/> <footer>copyright</footer>