How do I generate a header and a footer for every page automatically? (No PHP)

[Rubbereon]

I got well over 15+ pages on my website and I want all of them to have a header and a footer.

The header contains a back button and a home button and there's a section for news that I wanted to update for anything new happening on my website or socials. You can guess that havinbg this on 15+ pages and having to manually update each header whenever there's something new ain't really convenient. 
The footer contains a copyright notice with the year and the last time a page was edited. Originally, the copyright year would've been updated manually, but now that I found a script that does it for me and with the "last edited" bit added,this isn't nearly as problematic, but if I can fix the script so it displays the header might as well include the footer in it.


This is what my about page looks like when I manually add both of them and what it would look like if the script worked as intended. (Disregard the missing images, the screenshot utility I used doesn't like it when something is hotlinked, it should show up as norml on the page itself)

This is what my about page actually looks right now. (Again, disregard the missing images)

If you wanna take a look at either the footer or header they can be accesssed from here and there. Maybe there's something that causes a problem in the html code?

This is frustrating because I've been banging my head for days at this point since the script throws no error or warning in the console and I temporarily managed to display something by preloading the html before everything else, but it was some placeholder text which at least tells me it should work normally, but it doesnt and as I said I get no error and no warning whatsoever.

So with all that yapping, this is the script I tried to use to make them show up on every page.

Code

window.onload = function automatichtml() {
        document.getElementById('header').innerHTML = fetch('header.html').then(response => response.text()).then(response => {console.log(response)}); 
        document.getElementById('footer').innerHTML = fetch('footer.html').then(response => response.text()).then(response => {console.log(response)}); 
}

I also tried this to no avail, its basicly the same thing as above, but insead of loading or injecting an html file, it adds the html by itself. The text is placeholder.

Code

let bottom = document.getElementById('footer');
bottom.innerHTML = '<h1>Header stuff goes here</h1>';
bottom.innerHTML = `
<h1>Header stuff goes here</h1>
<ul>
  <li>Bla bla bla</li>
  <li>Bla bla bla</li>
  <li>Bla bla bla</li>
</ul>
`;

I'm using Nekoweb which, by design, disallows PHP, so it must be done in javascript or similar. I have seen folks put a header on every page on their site I don't know if they did it manually or they use a script, but I think many of them must be using a script sunce they did what I wanna do and make a dynamic page I can update sitewide for news or other interesting tidbits.

[starbreaker]

My solution won't do you much good since I'm not on Nekoweb. I build my pages with shell scripts on a local computer and then upload them to my host. If you're a Nekoweb donor, you could use NekoFTP to build your site locally and then upload.

Otherwise, have you considered creating a template page that contains your preferred header and footer and then editing all of your pages to use that template? It's a lot of work, especially if you decide to update your header or footer, but at least pages would load faster since you're not using JS.

[holly]

When I last made a site, i had just like used the jQuery function to inject code from another html file for header and footer, and copy and pasted it in every page, maybe a bad idea lololol

[stoat]

I think this is a fetch cycle issue! My favourite! I couldn't reproduce the behaviour where it prints out the HTML (my understand of js innerhtml was that it doesn't do that) but I did get it to print out object Promise. The fact preloading the html helped at one stage also sniffs of weird js timing stuff.

This code worked fine for me locally:

Code

    <script>
        window.onload = function automatichtml() {
            fetch('header.html')
                .then(response => response.text())
                .then(html => {
                    document.getElementById('header').innerHTML = html;
                });

            fetch('footer.html')
                .then(response => response.text())
                .then(html => {
                    document.getElementById('footer').innerHTML = html;
                });
        };
    </script>

Just need to make sure you're not returning the whole fetch object, but rather what it resolves as.

I have no idea what nekoweb's server setup and headers and stuff are set up like and I only tested this on vscode live server, which is one of mankind's worst inventions, so i would not be surprised if this is entirely wrong. let me know!

[Rubbereon]

My solution won't do you much good since I'm not on Nekoweb. I build my pages with shell scripts on a local computer and then upload them to my host. If you're a Nekoweb donor, you could use NekoFTP to build your site locally and then upload.

Otherwise, have you considered creating a template page that contains your preferred header and footer and then editing all of your pages to use that template? It's a lot of work, especially if you decide to update your header or footer, but at least pages would load faster since you're not using JS.

Footer.html and Header.html already both act as templates, the problem is being able to edit them and apply the change synchronously to all 15+ pages.

My script loads lightning fast as is, what causes slow downs on most of my pages are the way too many <img> tags which I've since slowly been phasing out and moving into their own dedicated shrines in my /shitpost/ nd /misc/ subdirectories.

You shouldn't be allergic to javascript like this, even sites like deviantart and youtube have much heavier javascript and they still load reasonably fast I reckon.

I think this is a fetch cycle issue! My favourite! I couldn't reproduce the behaviour where it prints out the HTML (my understand of js innerhtml was that it doesn't do that) but I did get it to print out object Promise. The fact preloading the html helped at one stage also sniffs of weird js timing stuff.

This code worked fine for me locally:

Code

    <script>
        window.onload = function automatichtml() {
            fetch('header.html')
                .then(response => response.text())
                .then(html => {
                    document.getElementById('header').innerHTML = html;
                });

            fetch('footer.html')
                .then(response => response.text())
                .then(html => {
                    document.getElementById('footer').innerHTML = html;
                });
        };
    </script>

Just need to make sure you're not returning the whole fetch object, but rather what it resolves as.

I have no idea what nekoweb's server setup and headers and stuff are set up like and I only tested this on vscode live server, which is one of mankind's worst inventions, so i would not be surprised if this is entirely wrong. let me know!

Thank you so much!    I finally got around to try it out yesterday and after doing some tweaking on the html today I could even incorporate it into my script.js file instead of the html body ands it works perfectly!

One new issue I encountered is the script contained inside the footer won't run if the html is injected into the page and parsed that way, so I'll probably only use the script for the header and add the footer to all the pages unless it's possible to load the script from another script.

Again, thank you you're a lifesaver!

[stoat]

Thank you so much!    I finally got around to try it out yesterday and after doing some tweaking on the html today I could even incorporate it into my script.js file instead of the html body ands it works perfectly!

One new issue I encountered is the script contained inside the footer won't run if the html is injected into the page and parsed that way, so I'll probably only use the script for the header and add the footer to all the pages unless it's possible to load the script from another script.

Again, thank you you're a lifesaver!

Glad it worked :D

I think it's possible to jank this through but I already feel weird about js-inserted html so maybe let's not :P It looks like html5 doesn't officially support script tags in innerhtml anyway (but who cares about validation)

Normal load event listeners don't work cleanly with this setup since fetch is async. But we're already waiting for it to return the promise so the #copyright element is available, why not piggyback off that?

Code

fetch('footer.html')
    .then(response => response.text())
    .then(html => {
        document.getElementById('footer').innerHTML = html;
        const copyrightElement = document.getElementById("copyright");
        copyrightElement.innerHTML = "©  " + new Date().getFullYear() + " Wolfmanfur/Rubbereon - All Rights Reserved.";
        copyrightElement.innerHTML += "<br/>Last Updated : " + document.lastModified;
    });