如何将我的网站页眉和页脚存储在一个位置?

时间:2010-06-29 23:17:38

标签: javascript jquery html header footer

我总是重写我的页眉和页脚,每次编辑时我都必须手动将所有代码复制并粘贴到网页中。显然这是错误的方法,但我不确定正确的方法。我目前的想法是有一个“标题”和“页脚”div然后用jquery的$(文档).ready用代码加载div。我担心它会慢,因为它在执行页眉/页脚代码之前等待整个页面渲染。处理这个问题的常用方法是什么?

5 个答案:

答案 0 :(得分:10)

听起来你需要一些服务器端技术。您选择哪一个(众多选项中)取决于您和您的托管。最有可能的是,您的托管服务器将支持PHP和SSI(服务器端包含)。

在最简单的设置中,基本上将公共代码放入单个文件中,假设为header.incfooter.inc。这些文件的名称或扩展名无关紧要。

对于PHP,您的网页现在应该是*.php而不是*.html,您需要编写此代码:

<?php include('header.inc'); ?>
<p>
    Here is your regular document.
</p>
<?php include('footer.inc'); ?>

对于SSI,您不必更改文件的名称,您的代码将如下所示:

<!--#include virtual="header.inc" -->
<p>
    Here is your regular document.
</p>
<!--#include virtual="footer.inc" -->

答案 1 :(得分:4)

您绝对不希望使用Javascript执行此操作。首先,在Javascript执行之前,页眉和页脚不会加载,但更重要的是,没有启用Javascript的任何人都不会看到它们(并且要求Javascript查看静态页面没有意义)。

有两种简单的方法可以做到这一点:

1)使用像php这样的服务器端语言来包含页脚:

<?php
  include('header.html');
?>
The rest of the page goes here
<?php
  include('footer.html');
?>

2)使用生成静态页面的构建/部署过程。这与1)类似,但每次构建只会进行一次,而不是每次有人点击页面。

答案 2 :(得分:1)

通常,正在使用一些服务器端模板技术,例如PHP,JSP或XSL。使用这些方法之一创建可以链接的可重用代码段非常简单。

对于纯HTML + JS方法,您可以使用IFRAME链接到独立的页眉和页脚HTML文件。这样您就可以将所有页眉和页脚信息保存在一个位置,只需要更新一次。

答案 3 :(得分:0)

常用方法是使用PHP之类的服务器端语言。或者,如果您只需要页脚和标题,则可以使用SSI

答案 4 :(得分:0)

使用HTML或PHP包含。