Server side includes alternative

旧时模样 提交于 2019-11-29 04:13:55

Jekyll is a common solution for this. It is a static site generator that allows you to use Liquid templates, and is made to run on GitHub's servers.

A great example of the {% include %} feature can be seen on the documentation pages from Twitter Bootstrap, which make use of includes for header.html and footer.html:

Use templates and preprocess them at build time (as opposed to run time). You could set them up to build as a git commit hook.

There are a lot of tools for doing this listed here, I'm fond of ttree.

I know this is a late answer, but here's something I stumbled on recently.
Turns out that the guys over at http://w3schools.com/ created some simple JavaScript code as an alternative to SSI:

<!DOCTYPE html>
<html>
<script>
function w3IncludeHTML() {
  var z, i, a, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    if (z[i].getAttribute("w3-include-html")) {
      a = z[i].cloneNode(false);
      file = z[i].getAttribute("w3-include-html");
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;

          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
</script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>

Here's an example.

I made a video about how to Import custom HTML templates using AJAX. It will run the script tags in the imported HTML without using eval(), and the script tag you use to make the import call will replace itself with the imported code, so there's no nesting in divs. It's basically a really clean AJAX site builder. Here's the link: https://www.youtube.com/watch?v=ZqD61tIoG2s&t=18s&index=1&list=PLRJ8uW8FBcZJMiFbPNG67lsFHhFF1k322

The source code can be found in the video description.

SSI should be supported!

<!--#include virtual="layout.html" -->

The file that contains the above line must end with ".shtml" or ".shtm" extensions!

jQuery load() works well for this.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!