发表新帖
发表新帖

Server side includes alternative

后端 未结
关注
6 1252
你的背包
你的背包 2020-12-16 21:02

I have a static site hosted on GitHub Pages which is starting to grow in size. Normally I would use server side includes (

相关标签:
6条回答
  • 慢半拍i
    2020-12-16 21:26

    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.

    0 讨论(0)
  • 死守一世寂寞
    2020-12-16 21:27

    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:

    enter image description here

    0 讨论(0)
  • 感情败类
    2020-12-16 21:28

    SSI should be supported!

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

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

    0 讨论(0)
  • 南旧
    2020-12-16 21:33

    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.

    0 讨论(0)
  • 一整个雨季
    2020-12-16 21:39

    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.

    0 讨论(0)
  • 慢半拍i
    2020-12-16 21:48

    jQuery load() works well for this.

    0 讨论(0)
 看不清?
提交回复
热议问题