带有静态 HTML 的公共页眉/页脚

Common Header / Footer with static HTML

提问by Adam Haile

Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?

是否有使用静态 HTML/XHTML 的体面方法来创建要在站点的每个页面上显示的通用页眉/页脚文件？我知道您显然可以使用 PHP 或服务器端指令来做到这一点，但是有什么方法可以做到这一点而完全不依赖服务器为您将所有内容拼接在一起？

Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.

编辑：所有非常好的答案都是我所期望的。HTML 是静态的，句号。如果没有运行服务器端或客户端的东西，就没有真正的方法来改变它。我发现 Server Side Includes 似乎是我最好的选择，因为它们非常简单并且不需要编写脚本。

采纳答案by Adam Haile

There are three ways to do what you want

有三种方法可以做你想做的事

Server Script

服务器脚本

This includes something like php, asp, jsp.... But you said no to that

这包括诸如 php、asp、jsp 之类的东西......但是你拒绝了

Server Side Includes

服务器端包括

Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.

您的服务器正在提供页面，那么为什么不利用内置的服务器端包含呢？每个服务器都有自己的方式来做到这一点，利用它。

Client Side Include

客户端包含

This solutions has you calling back to the server after page has already been loaded on the client.

此解决方案让您在页面已加载到客户端后回调服务器。

回答by phpsmashcode

JQuery load() function can use for including common header and footer. Code should be like

JQuery load() 函数可用于包含常见的页眉和页脚。代码应该像

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

You can find demo here

你可以在这里找到演示

回答by Vilx-

Since HTML does not have an "include" directive, I can think only of three workarounds

由于 HTML 没有“包含”指令，我只能想到三种解决方法

1. Frames
2. Javascript
3. CSS

1. 框架
2. Javascript
3. CSS

A little comment on each of the methods.

对每种方法的一点评论。

Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.

框架可以是标准框架或 iFrame。无论哪种方式，您都必须为它们指定一个固定的高度，因此这可能不是您正在寻找的解决方案。

Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:

Javascript 是一个相当广泛的主题，可能有很多方法可以使用它来实现预期的效果。然而，我可以想到两种方法：

1. Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
2. <script type="text/javascript" src="header.js">which has something like this in it: document.write('My header goes here');

1. 成熟的 AJAX 请求，它请求页眉/页脚，然后将它们放置在页面的正确位置；
2. <script type="text/javascript" src="header.js">里面有这样的东西： document.write('My header goes here');

Doing it via CSS would be really an abuse. CSS has the contentproperty which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.

通过 CSS 来做这真的是一种滥用。CSS 具有content允许您插入一些 HTML 内容的属性，尽管它并不真正打算像这样使用。此外，我不确定浏览器是否支持此构造。

回答by DanSingerman

You can do it with javascript, and I don't think it needs to be that fancy.

你可以用javascript来做，我认为不需要那么花哨。

If you have a header.js file and a footer.js.

如果你有一个 header.js 文件和一个 footer.js。

Then the contents of header.js could be something like

然后 header.js 的内容可能是这样的

document.write("<div class='header'>header content</div> etc...")

Remember to escape any nested quote charactersin the string you are writing. You could then call that from your static templates with

请记住对您正在编写的字符串中的任何嵌套引号字符进行转义。然后你可以从你的静态模板中调用它

<script type="text/javascript" src="header.js"></script>

and similarly for the footer.js.

和footer.js 类似。

Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.

注意：我不推荐这个解决方案——它是一个黑客，有很多缺点（搜索引擎优化和可用性差，仅适用于初学者）——但它确实满足提问者的要求。

回答by juanpazos

The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.

最好的解决方案是使用具有模板/包含支持的静态站点生成器。我在 Mac 上使用 Hammer，它很棒。还有 Guard，它是一个 ruby​​ gem，可以监视文件更改、编译 sass、连接任何文件并且可能包含包含。

回答by Shubham Badal

you can do this easily using jquery. no need of php for such a simple task. just include this once in your webpage.

您可以使用 jquery 轻松完成此操作。如此简单的任务不需要 php。只需在您的网页中包含一次即可。

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

now use data-load on any element to call its contents from external html file you just have to add line to your html code where you want the content to be placed.

现在在任何元素上使用 data-load 来从外部 html 文件调用其内容，您只需在 html 代码中添加一行，以便放置内容。

example

例子

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

回答by Jose

The simplest way to do that is using plain HTML.

最简单的方法是使用纯 HTML。

You can use one of these ways:

您可以使用以下方式之一：

<embed type="text/html" src="header.html">

or:

或者：

<object name="foo" type="text/html" data="header.html"></object>

回答by allesklar

The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.

最实用的方法是使用Server Side Include。当您有几个页面时，它很容易实现并节省大量工作。

回答by Joe Phillips

HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.

HTML 框架，但它不是一个理想的解决方案。您基本上会同时访问 3 个单独的 HTML 页面。

Your other option is to use AJAX I think.

我认为您的另一个选择是使用 AJAX。

回答by Antonello Cherubini

You can try loading them via the client-side, like this:

您可以尝试通过客户端加载它们，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

NOTE:the content will load from top to bottom and replace the content of the container you load it into.

注意：内容将从上到下加载并替换您加载到的容器的内容。