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:
- 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).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 into
Boom. 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