Repeat same HTML code in several pages

问题

I have a really hard time searching for this, because I have no idea how to call it.

I'll try to describe the process I want, and see if any of you know such an editor. I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line. What I do, is copy the menu over to every place. If I change the menu, I need to do it all again. I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.

I was wondering if there was a way to do this. I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.

Thanks

回答1:

Have a look at server side includes ... create a menu.shtml page and then include it like so :

<!--#include virtual="/menu.shtml" -->

Its supported by most web servers out of the box (including IIS, Apache and lighttpd)

回答2:

Have you heard about MasterPage Concept

The below link will give you a quick start

Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!

回答3:

You can do this with jquery

Assume you have page1.html page2.html etc.

You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- page content -->
    <div id="contact"></div>
  </body>
</html>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
        $("#contact").load("info.txt");
    ;
});
</script>

Whatever you place in 'info.txt' will be put on the spot of were you put

回答4:

You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload

来源：https://stackoverflow.com/questions/11241056/repeat-same-html-code-in-several-pages

标签

html

static

editor

repeat