Yes I know there is almost certainly some syntax that allows me to make a universal header/footer that applies to every page but right now I am moving fast and breaking things!!
(I will regret this in a week when I learn what to do and have to go back and fix it on every individual page)
static website generation. you're going to be using the same elements across pages a *lot* more than just the footer. you're probably also going to want a consistent header, navigation, style, title bar, favicon, open graph, etc, so it makes a lot of sense to build the website with a generator
Ah, you make a good point here. I suppose what I would actually do is make it a SPA and inject the content based on the URL fragment rather than the other way around, but I'm a software engineer so I suppose that would seem easy to me. I've never used a static site generator. =)
Of course you don't NEED to use JavaScript. You could do it with any number of server-side templating systems or with a static site generator. But personally I feel like this little JS snippet is the easiest option. You don't need to set up FastCGI or whatever.
You’d think so—just like you can load the same CSS file in multiple places. Unfortunately “html imports” don’t currently exist. You need a server side language (or some local build process) to regenerate all the static files and include the contents of (e.g.) footer.html everywhere.
Agree (prob more than half the reason lol). HTML imports were actually supposed to be a thing a long time ago, but we can thank Firefox for killing them (Chrome first implemented them in 2014 but eventually deprecated them in 2019, after Firefox said they wouldn’t implement and Safari said nothing)
this was me copy/pasting my website’s sidebar to every single page to update it whenever i created a new page 😭 eventually a friend of mine wrote a little awk script to automate it (kinda like if html supported C-style include files)
Comments
I think they are the HTML way of defining custom components, but I never used them myself
(I will regret this in a week when I learn what to do and have to go back and fix it on every individual page)
Then write whatever you want in your footer in /footer.html =)
HTML imports are dead.
index.html#/example loads content from /example.html
SEO? What's that? ^^;
1. Use web components for your header/footer https://github.com/mdn/web-components-examples
2. Use a js framework like nuxt/sveltekit/astro/react