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

Question

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

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

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

我有一个想法，但它一点都不优雅，并且需要编写很多我不想做的前端Javascript。 这个想法是在每个页面上创建一个元素并将其插入，但是既然我已经考虑了，那么这将必须在每个文件中发生，所以这并不能解决我不想完全不为每个页面编写布局的问题。。

另外，我意识到在“静态网站”上具有“动态布局”是矛盾的。 但是，我知道StackOverflow社区有多么聪明，并且有多少可能的解决方案来解决这个问题。

如果没有简单的解决方案，我将不得不使用静态网站生成器来构建我的网站，但是我敢打赌，您可以提出一个吗？

Answer 1

听起来您需要的是HTML的包含机制，类似于Handlebars 。

如果您确实不需要任何脚本，则应该使用静态网站生成器。 我从来没有用过，但是我的想法是，您用某种IDE为网站编写内容，然后生成器转储HTML，您永远不要直接接触它。

Answer 2

原来有办法！

再次回答我自己的问题。

通过执行以下操作，您可以一次仅使用jQuery（无需任何静态站点生成器或模板语言）编写静态站点布局（您也可以轻松地使用纯香草JS）：

在index.html或其他内容中编写布局/导航等。
通过在要包含布局的每个页面的每个<head>中创建一个.js文件，该文件可用于您的站点
将以下内容放入其中：

$(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 #layout标题/导航等周围的div
#loaded-layout是静态站点的每个非索引文件中的一个必填div（没有该div， .load不会运行）。 #layout加载到的div

景气。 你做完了 。 无需学习其他模板引擎或任何其他静态站点生成器约定。

现在弄清楚如何使用<head>做到这一点。

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

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

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

问题描述

2 个解决方案

解决方案1
0 2014-05-14 23:13:20

解决方案2
0 已采纳 2014-05-30 02:14:08

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

问题描述

2 个解决方案

解决方案1 0 2014-05-14 23:13:20

解决方案2 0 已采纳 2014-05-30 02:14:08

解决方案1
0 2014-05-14 23:13:20

解决方案2
0 已采纳 2014-05-30 02:14:08