如何处理10页以上的静态页眉/页脚

How to deal with a static header/footer with 10+ pages?

本文关键字：静态 页脚 何处理 处理 10页      更新时间：2023-09-26

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

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

我想在.txt文件中添加页眉/页脚（HTML），并以JavaScript的方式调用该.txt文件。但我敢肯定，在.txt文件中包含html并通过js调用该.txt文件是一种糟糕的做法，也是一种安全风险。

您需要创建单独的页眉和页脚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

您可以使用角度指令。

var myApp = angular.module('myApp', []);
myApp.directive('mainNavigation', function(){
  return {
    restrict: 'E',
    templateUrl: 'partials/navigation.html'
  }
});

然后使用ng-app="myApp调用angular，然后将指令包含在需要它们的区域中。在这种情况下，你会有：

<main-navigation></main-navigation>

您可以使用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>

相关文章：