我怎么能有一个纯静态网页的布局？ [英] How can I have layouts on a purely static website?
问题描述
我怎么会有稍微的动态布局，包括HTML文件，所以我只需要编写一个布局模板一次为一个静态的网站？ 的
更具体地讲，我怎么能有动态布局上静态的网站，或者一个没有服务器端code。我想重做我的网站之一，对其进行托管在S3上，写的布局（如下图所示）有一段时间，没有将其包含在每一页。该网站将在HTML的形式，纯粹的信息和PDF文件，所以我不需要任何服务器端code，我试图保持尽可能简单。
More specifically, how can I have dynamic layouts on a static website, or one with no server-side code. I want to redo one of my websites, host it on S3 and write a layout (like below) one time, not have to include it in each page. The site will have purely information in the form of HTML and PDFs so I don't need any server-side code and am trying to keep it as simple as possible.
<html>
<head>
...
<head>
<body>
//each page's content would go here.
</body>
<html>
我有一个想法如何做到这一点，但它不是优雅可言，并要求写了一堆前端的Javascript，这是我不想做的事。这个想法是要在每一页上创建一个元素，并将其插入，但是这必须发生在每一个文件，现在，我想它，所以它并没有解决我不想不写为每个页面布局都
I have an idea how to do it, but it isn't elegant at all and requires writing a bunch of front-end Javascript, which I don't want to do. That idea is to create an element on each page and insert it, but this would have to happen in each file, now that I think about it, so it doesn't solve me not wanting to not write a layout for each page at all.
另外，我认识到，拥有一个静态的网站'一个'动态布局是自相矛盾的;但是，我知道如何聪明的计算器社区，以及如何可能有一个可以接受的，方便的解决这个问题。
Also, I realize that having a 'dynamic layout' on a 'static website' is oxymoronic; however, I know how smart the StackOverflow community is and how likely there is an acceptable, easy solution to this problem.
如果没有一个简单的解决方案，我将不得不诉诸使用静态站点生成器来建立自己的网站，但我敢打赌，你能拿出一个？
If there isn't an easy solution I will have to resort to using a static site generator to build my website but I bet you can come up with one?
推荐答案
原来还有一个办法！
回答我的问题，再一次。的
你可以写一个静态的现场布置一次，没有任何的静态站点生成器或模板语言，只使用jQuery的（你可以很容易地使用纯香草JS也一样）通过执行此操作：
- 在写你的布局/导航等index.html中或任何...
- 创建一个.js文件，该文件将提供给您的网站在每一个被
＆LT; HEAD＆GT;在你想被列入布局每一页 - 将下面的变量：
- Write your layout/nav etc in index.html or whatever...
- Create a .js file that will be available to your site by being in every
<head>in every page you want layouts to be included - Put the following in it:
$（文件）。就绪（函数（）{
如果（document.location.href.indexOf（索引）＆小于0）{
的console.log（发现一个文件，是不是主页。）;
$（＃加载布局）.load（index.html的#layout，函数（）{
的console.log（应该已经加载的布局。）; //回调可选这里...
}）;
}
}）;
$(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
-
＃装载布局为你的每一个静态网站的非索引文件（.load 无该专区将无法运行）。这是DIV的#layout装入
index.html #layoutis a div around your header/nav etc in index.html#loaded-layoutis a mandatory div inside every one of your static site's non-index files (.loadwill not run without that div). It is the div that#layoutis loaded into
景气的。 您正在完成。没有学习另一种模板引擎或任何其他静态站点生成约定。
Boom. You're done. No learning another templating engine or any other static site generator conventions.
现在要弄清楚如何使用做了＆LT; HEAD＆GT;
Now to figure out how to do this with the <head>.
如果本地没有开发服务器（文件：/// ），并使用Chrome浏览器，必须禁用网络安全。随着Mac电脑，这样在你的终端：
If developing locally without a server (file:///) and using Chrome, you must disable web security. With Macs, do this in your terminal:
开放-a谷歌\铬--args - 禁用网络安全
这篇关于我怎么能有一个纯静态网页的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
