如何處理超過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>