服务器端包括替代方案答案

【问题标题】：Server side includes alternative服务器端包括替代方案
【发布时间】：2014-04-15 02:59:52
【问题描述】：

我在 GitHub Pages 上托管了一个静态站点，该站点的规模开始增长。通常我会使用服务器端包含 (<?php include('path to file'); ?>) 来引入页眉、页脚和任何导航文件。但是 php 不能在 GitHub Pages 上运行。

采用一种 iFrame 技术的 HTML5 嵌入是我唯一的选择吗？

我看到了诸如this、this、this、this 之类的线程，但它们似乎不适用于 GitHub 页面。

不是很理想。

谢谢。

【问题讨论】：

PHP 包含不是 SSI。

标签： html iframe github-pages server-side-includes

【解决方案1】：

Jekyll 是一个常见的解决方案。它是一个静态站点生成器，允许您使用Liquid templates，并且是made to run on GitHub's servers。

{% include %} 功能的一个很好的例子可以在 Twitter Bootstrap 的文档页面上看到，它使用了 header.html 和 footer.html 的包含：

【讨论】：

有没有办法在不使用主题的情况下使用该语法？我正在将一个站点移植到 github 页面；它已经有自己的风格了。我只需要包含工作即可。

【解决方案2】：

使用模板并在构建时（而不是运行时）对其进行预处理。您可以将它们设置为构建为 git commit hook。

有很多工具可以做到这一点listed here，我喜欢ttree。

【讨论】：

谢谢昆汀。那里有一些有用的帮助，会试一试。

【解决方案3】：

我知道这是一个迟到的答案，但这是我最近偶然发现的。
原来http://w3schools.com/ 的人创建了一些简单的 JavaScript 代码来替代 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 一个例子。

【讨论】：

@PatMyron 很高兴看到有人觉得它有用！

【解决方案4】：

jQuery load() 可以很好地解决这个问题。

【讨论】：

【解决方案5】：

我制作了一个关于如何使用 AJAX 导入自定义 HTML 模板的视频。它将在不使用 eval() 的情况下在导入的 HTML 中运行脚本标签，并且用于进行导入调用的脚本标签将用导入的代码替换自身，因此在 div 中没有嵌套。它基本上是一个非常干净的 AJAX 站点构建器。这是链接：https://www.youtube.com/watch?v=ZqD61tIoG2s&t=18s&index=1&list=PLRJ8uW8FBcZJMiFbPNG67lsFHhFF1k322

源代码见视频说明。

【讨论】：

【解决方案6】：

应该支持SSI！

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

包含上述行的文件必须以“.shtml”或“.shtm”扩展名结尾！

【讨论】：

GitHub Pages 不支持 SSI
@mt_xing ，谁说支持的？