Question

如何使用包含HTML文件的轻微动态布局，因此我只需为静态网站编写一次布局模板？

更具体地说，我如何在静态网站上或没有服务器端代码的网站上拥有动态布局。我想重做我的一个网站，在S3上托管它并写一个布局（如下所示），不必在每个页面中包含它。该网站将以HTML和PDF格式提供纯信息，因此我不需要任何服务器端代码，并且尽量保持简单。

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

我知道如何做到这一点，但它根本不优雅，需要编写一堆前端Javascript，我不想这样做。这个想法是在每个页面上创建一个元素并插入它，但这必须在每个文件中发生，现在我想到它，所以它不能解决我不想为每个页面编写布局一点都不。

另外，我意识到拥有动态布局＆＃39;在一个静态的网站上＆＃39;是矛盾的;但是，我知道StackOverflow社区有多聪明，以及解决这个问题的可行性和解决方案的可能性有多大。

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

Answer 1

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

如果你真的不想要任何脚本，那么static site generator就应该这样做。我从未使用过一个，但想法是你在网站的某种IDE中编写内容，然后生成器转储HTML，你永远不应该直接触摸它。

Answer 2

原来有办法！

再次回答我自己的问题。

您可以一次编写静态网站布局，不使用任何静态网站生成器或模板语言，只使用jQuery（您也可以轻松使用普通的vanilla 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
#loaded-layout是每个静态网站的非索引文件中的必需div（如果没有该div，.load将无法运行）。它是#layout加载到

动臂。 您已完成。不学习另一个模板引擎或任何其他静态站点生成器约定。

现在要弄清楚如何使用<head>。

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

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

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

2 个答案: