Common Header / Footer with static HTML

2019-01-02 15:30发布

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?

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
13条回答
君临天下
2楼-- · 2019-01-02 16:08

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.

查看更多
墨雨无痕
3楼-- · 2019-01-02 16:15

There are three ways to do what you want

Server Script

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

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.

查看更多
看风景的人
4楼-- · 2019-01-02 16:18

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

  1. Frames
  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.

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:

  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');

Doing it via CSS would be really an abuse. CSS has the content property 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.

查看更多
步步皆殇っ
5楼-- · 2019-01-02 16:18

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

$(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.

example

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
查看更多
浮光初槿花落
6楼-- · 2019-01-02 16:19

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.

查看更多
其实,你不懂
7楼-- · 2019-01-02 16:22

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

Your other option is to use AJAX I think.

查看更多
登录 后发表回答