Suppose you have a few pages and you want a navigation menu for your site on all of said pages. If you add a new page you will have to update every single page with the menu on it to include a link to the new page, which gets tedious.
There are many solutions to this, including static site generators (SSGs), Server Side Includes (SSI), Javascript, and iframes (theres probably more, but thats off the top of my head). Server side includes can only be used on dynamic hosts where you can use languages like PHP. Neocities, Nekoweb, and other static web hosts only allow HTML, CSS, and JS.
I won't get into the other solutions, but luckily the JS solution is not as complicated as one might expect! In its own document will be this little bit of JS (end the file name in .js):
document.getElementById('links').innerHTML = `HTML code here`;You dont need to start or end the document with anything, this is it! Just put in whatever HTML you want to repeat on every page. Be sure to keep the tick marks around the HTML. This will be the document you edit when you want to add a new link (or something).
This code just grabs an element you specify (by its ID, which can be any name you want) and redefines the HTML inside of it.
Now you will have to edit every HTML page you want to have a menu, so that it includes this portion of HTML:
<div id="links">
<script src="links.js"></script>
</div>I named my file "links" but you can name yours as you wish. Same with the ID of the div, just make sure its the same as the ID identified in the JS file. Put this where ever you want your menu to be. Once you have this on every page, you can leave it alone. By updating just the HTML in your JS file, you will change the menu on every page you have inserted the JS file!
Here is what my JS file for the sidebar on my rainbow site looks like:
document.getElementById('links').innerHTML = `
<ul>
<li><a href="https://rainbowspec.observer/visspec/">The Visible Spectrum</a></li>
<li><a href="https://rainbowspec.observer/color/">What Determines Color</a></li>
<li><a href="https://rainbowspec.observer/primaries/">Primary Colors</a></li>
<li><a href="https://rainbowspec.observer/prisms/">Prisms and Rainbows</a></li>
<li><a href="https://rainbowspec.observer/rainbows/">Primary Rainbows</a></li>
<li><a href="https://rainbowspec.observer/secondary">Secondary Rainbows</a></li>
<li><a href="https://rainbowspec.observer/reflection">Reflection Rainbows</a></li>
<li><a href="https://rainbowspec.observer/split">Split Rainbows</a></li>
<li><a href="https://rainbowspec.observer/supernum">Supernumerary Rainbows</a></li>
<li><a href="https://rainbowspec.observer/fog">Fogbows and Drop Size</a></li>
<li><a href="https://rainbowspec.observer/corona">Corona and Cloud Irridesence</a></li>
</ul>
`;The HTML is written as normal inbetween the `` marks.
Here is what my HTML looks like where my script is included:
<details>
<summary><h2 id="pgs">Pages</h2></summary>
<div id="links">
<script src="links.js"></script>
<noscript>
<p>This sidebar uses JS to display the navigation on all pages, so it is easy to update when I make more pages.
Use the <a href="https://rainbowspec.observer/#map">sitemap</a> to navigate if you have JS disabled.</p>
</noscript>
</div>
</details>I put it inside of a details element just so it could be easily expanded and collapsed by the user (not necessary). It being in a div with an ID is important for the JS to have something to insert the HTML into. It doesn't have to be a div as long as it has an ID, but you probably want it to be a div.
The noscript element only shows if a user has JS disabled. Some people have JS disabled to curtail the irritating behavior of corperate sites, but this is a small portion of users, so I went with JS anyways as my solution. However, I still tried to make my site still functional for those users by linking to my sitemap. You will have to paste your message on every page you put your script on, but you should not need to change it.
Hopefully that helps you make your websites easier :3