How can I have layouts on a purely static website?

StackOverflow https://stackoverflow.com/questions/23666040

  •  22-07-2023
  •  | 
  •  

質問

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?

役に立ちましたか？

解決

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:

  1. Write your layout/nav etc in index.html or whatever...
  2. 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
  3. 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

他のヒント

Sounds like what you need is an inclusion mechanism for HTML, similar to Handlebars.

If you really don't want any scripting, then a static site generator should do. I've never used one, but the idea is you write your content in a sort of IDE for websites, then the generator dumps the HTML, which you're never supposed to touch directly.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top