Menu
How do I have slightly dynamic layouts that include HTML files so I only have to write a layout template one time for a static website?
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>
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?
881
Turns out there is a way!
Answering my own question, again.
You can write a static site layout one time, without any static site generator or templating language, using only jQuery (you could easily use plain vanilla JS as well) by doing this:
<head> in every page you want layouts to be included$(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 is a div around your header/nav etc in index.html#loaded-layout is a mandatory div inside every one of your static site's non-index files (.load will not run without that div). It is the div that #layout is loaded intoBoom. You're done. No learning another templating engine or any other static site generator conventions.
Now to figure out how to do this with the <head>.
If developing locally without a server (file:///) and using Chrome, you must disable web security. With Macs, do this in your terminal:
open -a Google\ Chrome --args --disable-web-security
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With