Search code examples
javascripthtmlincludetemplate-engine

As simple as possible template engine for embedding repeating html elements

There are quite a few questions on this topic, but I did not find anything that I liked.

I decided to update my one-page portfolio and make it multi-page (github pages). For convenience, I would like to embed repeating 3 files head, header, footer. What can be used to do this so that it has minimal impact on performance.

Thank!

Solution

  • This article offers many ways to do what you're trying to do, but I think the easiest one is:

    <body>
  
  <iframe src="./header.html"></iframe>
  
  Content.
  
  <iframe src="./footer.html"></iframe>
  
</body>

    and the one it suggests will minimally impact performance is:

    <body>
   <?php include "./header.html" ?>

   Content

   <?php include "./footer.html" ?>
</body>