I'm genuinely not sure how mine works. But it does work on Neocities, at least mostly. There's a bit of an issue with the parts not loading quickly enough to be put into place on the site's initial load. But I think that's largely because of the way my specific sidebars work.
Anyway, this is an overview of how mine works, and you can visit [url=https://noxid-kin.neocities.org/]my site[/url] to see it in action.
Here's the part that's on every page, specifically the containers and the .js script at the end.
[quote]
**content here**
[/quote]
Here is the template loader script, which I confess I can barely read:
[quote]
// Function to load a template into a given container
function loadTemplate(templateName, containerId) {
fetch(`${templateName}.html`)
.then(response => response.text())
.then(data => {
const container = document.getElementById(containerId);
container.innerHTML = data;
// Add classes to sidebars if applicable
if (containerId === 'sidebar-container-right') {
container.classList.add('sidebar-right');
}
if (containerId === 'sidebar-container-left') {
container.classList.add('sidebar-left');
}
// Extract and run any script tags inside the fetched HTML
const tempDiv = document.createElement('div');
tempDiv.innerHTML = data;
const scripts = tempDiv.querySelectorAll('script');
scripts.forEach((script) => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
newScript.async = false; // maintain execution order
} else {
newScript.textContent = script.textContent;
}
document.body.appendChild(newScript);
});
})
.catch(error => console.error(`Error loading ${templateName}:`, error));
}
// Load the page components when the document is ready
document.addEventListener('DOMContentLoaded', function () {
loadTemplate('page-header', 'header-container');
loadTemplate('page-footer', 'footer-container');
loadTemplate('page-sidebar-right', 'sidebar-container-right');
loadTemplate('page-sidebar-left', 'sidebar-container-left');
});
[/quote]
And here's an example of the header code, with one link. It's pretty straightforward.
[quote]
HomeGallery
[/quote]
You can view most of it, and other parts, by inspecting the pages on my site if you like. Good luck! :)