服务器端包括替代方案
Posted
技术标签:
【中文标题】服务器端包括替代方案【英文标题】：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。 【参考方案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 ，谁说支持的？以上是关于服务器端包括替代方案的主要内容，如果未能解决你的问题，请参考以下文章