如何在纯静态网站上进行布局？答案

【问题标题】：How can I have layouts on a purely static website?如何在纯静态网站上进行布局？
【发布时间】：2014-05-14 22:11:02
【问题描述】：

我如何拥有包含 HTML 文件的稍微动态的布局，这样我只需为静态网站编写一次布局模板？

更具体地说，如何在静态网站或没有服务器端代码的网站上拥有动态布局。我想重做我的一个网站，将其托管在 S3 上并编写一次布局（如下所示），而不必将其包含在每个页面中。该站点将包含 HTML 和 PDF 形式的纯信息，因此我不需要任何服务器端代码，并试图使其尽可能简单。

<html>
  <head>
     ...
  <head>
  <body>
     //each page's content would go here.
  </body>
<html>

我有一个想法，但它一点也不优雅，需要编写一堆前端 Javascript，我不想这样做。这个想法是在每个页面上创建一个元素并插入它，但这必须在每个文件中发生，现在我想到了，所以它不能解决我不想为每个页面编写布局的问题.

另外，我意识到在“静态网站”上使用“动态布局”是自相矛盾的；但是，我知道 StackOverflow 社区有多聪明，以及有多大可能有一个可接受的、简单的解决方案来解决这个问题。

如果没有简单的解决方案，我将不得不求助于使用静态网站生成器来构建我的网站，但我敢打赌你能想出一个？

【问题讨论】：

标签： html layout static amazon-s3

【解决方案1】：

原来有办法！

再次回答我自己的问题。

您可以一次性编写一个静态站点布局，无需任何静态站点生成器或模板语言，只使用 jQuery（您也可以轻松地使用普通 JS）这样做：

将您的布局/导航等写入 index.html 或其他任何内容...
创建一个可供您网站使用的 .js 文件，方法是在您希望包含布局的每个页面中的每个 <head> 中
将以下内容放入其中：

$(document).ready(function() { if (document.location.href.indexOf("index") < 0 ) { console.log("Found a file that isn't the home page."); $( "#loaded-layout" ).load( "index.html #layout", function() { console.log("Should have loaded the layout."); // Callback optional here... }); } });

index.html #layout 是 index.html 中标题/导航等周围的 div
#loaded-layout 是每个静态站点的非索引文件中的强制 div（没有该 div，.load 将无法运行）。是#layout加载到的div

轰隆隆。 大功告成。无需学习其他模板引擎或任何其他静态站点生成器约定。

现在要弄清楚如何使用<head> 执行此操作。

如果在没有服务器 (file:///) 的情况下在本地开发并使用 Chrome，则必须禁用网络安全。对于 Mac，请在终端中执行此操作：

open -a Google\ Chrome --args --disable-web-security

【讨论】：

这是真的。我工作的公司的另一个站点使用纯 JS 框架 Meteor，因此访问者不会在没有 JS 的情况下获得单个字符。将查找非 JS 访问者统计信息。编辑：2% of U.S. Yahoo users four years ago had JS disabled。我认为四年后非雅虎美国用户的价格会更低。

【解决方案2】：

听起来你需要一个 HTML 包含机制，类似于 Handlebars。

如果您真的不想要任何脚本，那么static site generator 应该可以。我从来没有使用过，但想法是你在一种网站的 IDE 中编写你的内容，然后生成器转储 HTML，你永远不应该直接接触。

【讨论】：