Question

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

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

我正在考虑在.txt文件中添加页眉/页脚（HTML）并以JavaScript方式调用.txt文件。但是，我非常确定在.txt文件中使用html并通过js调用.txt文件的不良做法和安全风险。

Answer 1

您需要创建单独的页眉和页脚html文件，而不是需要在所有页面上包含这些文件。通过这种方式，您可以控制它。

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

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

Include another HTML file in a HTML file html-file

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）

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: