Make side bar content apply on every page?

[zj]

I use my side bar as a navigation bar, with links to all my pages. My problem is, every time I want to add something new to it, I have to manually add the new thing to every page on my site :') .. So, I'm looking for a way to make any change apply to every iteration of the sidebar.

Evey source I've found only had tips for how to create a brand new side bar, but I would prefer to use my pre-existing sidebar 

Any advice is greatly appreciated! 


This is the code:

Spoiler

Code

<aside id="rightSidebar">
            
            
            <center><img class="blinkie" src="/gifs/be-kind.webp" alt="be kind to your computer"></center>
            <center><img class="blinkie" src="/gifs/internet loser.webp" alt="internet loser"></center>
            <center><a href="https://www.imood.com/users/zeejay"><img src="https://moods.imood.com/display/uname-zeejay/fg-fceaf/bg-191970/trans-1/imood.gif" alt="The current mood of zeejay at www.imood.com" border="0"></a></center>
 <h3>Navigation</h3>
            <ul>
                <li><a href="https://zj.neocities.org/">Home</a>
                </li><li><a href="https://zj.neocities.org/about">About</a></li>
                <li><a href="https://hizj.123guestbook.com/">Guestbook!</a></li>
                <li><a href="https://zj.neocities.org/stamps">Stamp collection</a></li>
                <li><a href="https://zj.neocities.org/scrapbook">Scrapbook</a> <img src="https://zj.neocities.org/gifs/updatedts.gif" alt="updated!" width="50px"></li>
                <li><a href="https://zj.neocities.org/resources">Resources</a> <img src="https://zj.neocities.org/gifs/newts.gif" alt="new!" width="25px"></li>
                <li><a href="https://zj.neocities.org/neighbours">Internet neighbours</a> <img src="/gifs/newts.gif" alt="new!" width="25px"></li>
            </ul>
            
      
       <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=zeejay" defer></script>
       <br>
       <center><a href="https://tamanotchi.world/7460c"><img src="https://tamanotchi.world/i2/7460" alt="It's tamaNOTchi! Click to feed!"></a>
       <br>This is Kurt! Click to feed him :3</center>
       
       <h3>Webrings!</h3>
      <center><p><a href="https://hotlinewebring.club/zj/previous" target="_blank">←</a> <a href="https://hotlinewebring.club/" target="_blank">hotline webring</a> <a href="https://hotlinewebring.club/zj/next" target="_blank">→</a></p></center>
      <center><p><a href="https://webring.dinhe.net/prev/zj.neocities.org">←</a> <a href="https://webring.dinhe.net/">retronaut ring</a> <a href="20230127205717/https://webring.dinhe.net/next/zj.neocities.org">→</a></p></center>
      <center><p><script src="https://nuthead.neocities.org/ring/ring.js"></script></p></center>
      
      <center>
      <object id="melonland-surf-club" data="https://melonland.net/surf-badge.svg?fill=#fceaff" type="image/svg+xml" style="width: 100px; height: 100px;"></object>
      </center>
                  

[close]

[TheNothingMonster]

There's a very basic way of doing this with Javascript. Don't worry, it's nothing complicated!

Make a new .js file and name it whatever you want. For this example, I'm going to call it sidebar.js.
This is where your sidebar's HTML code will be stored & printed. To achieve that, we will create a variable which will contain your sidebar's code in a string and later a function which will print out the contents of that variable.

Code

let sidebarHTML = `Sidebar content will go in here.`;
document.write(sidebarHTML);

Adding in your sidebar's code into the variable's string, it will look something like this:

Code

let sidebarHTML = `
<aside id="rightSidebar">
	            
	            
	            <center><img class="blinkie" src="/gifs/be-kind.webp" alt="be kind to your computer"></center>
	            <center><img class="blinkie" src="/gifs/internet loser.webp" alt="internet loser"></center>
	            <center><a href="https://www.imood.com/users/zeejay"><img src="https://moods.imood.com/display/uname-zeejay/fg-fceaf/bg-191970/trans-1/imood.gif" alt="The current mood of zeejay at www.imood.com" border="0"></a></center>
	 <h3>Navigation</h3>
	            <ul>
	                <li><a href="https://zj.neocities.org/">Home</a>
	                </li><li><a href="https://zj.neocities.org/about">About</a></li>
	                <li><a href="https://hizj.123guestbook.com/">Guestbook!</a></li>
	                <li><a href="https://zj.neocities.org/stamps">Stamp collection</a></li>
	                <li><a href="https://zj.neocities.org/scrapbook">Scrapbook</a> <img src="https://zj.neocities.org/gifs/updatedts.gif" alt="updated!" width="50px"></li>
	                <li><a href="https://zj.neocities.org/resources">Resources</a> <img src="https://zj.neocities.org/gifs/newts.gif" alt="new!" width="25px"></li>
	                <li><a href="https://zj.neocities.org/neighbours">Internet neighbours</a> <img src="/gifs/newts.gif" alt="new!" width="25px"></li>
	            </ul>
	            
	      
	       <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=zeejay" defer></script>
	       <br>
	       <center><a href="https://tamanotchi.world/7460c"><img src="https://tamanotchi.world/i2/7460" alt="It's tamaNOTchi! Click to feed!"></a>
	       <br>This is Kurt! Click to feed him :3</center>
	       
	       <h3>Webrings!</h3>
	      <center><p><a href="https://hotlinewebring.club/zj/previous" target="_blank">←</a> <a href="https://hotlinewebring.club/" target="_blank">hotline webring</a> <a href="https://hotlinewebring.club/zj/next" target="_blank">→</a></p></center>
	      <center><p><a href="https://webring.dinhe.net/prev/zj.neocities.org">←</a> <a href="https://webring.dinhe.net/">retronaut ring</a> <a href="20230127205717/https://webring.dinhe.net/next/zj.neocities.org">→</a></p></center>
	      <center><p><script src="https://nuthead.neocities.org/ring/ring.js"></script></p></center>
	      
	      <center>
	      <object id="melonland-surf-club" data="https://melonland.net/surf-badge.svg?fill=#fceaff" type="image/svg+xml" style="width: 100px; height: 100px;"></object>
	      </center>
`;
document.write(sidebarHTML);

And now, wherever you want to include your sidebar in your HTML pages, just add this little snippet:

Code

<script src="path_to_the_file/sidebar.js"></script>

Make sure to change path_to_the_file into, well, the path which leads to sidebar.js's location in your site files.
And, of course, if you have given the file your own name, make sure to change that as well.

If something was made unclear, feel free to ask!

[Melooon]

Its important if you are doing a JavaScript based sidebar that you add a <noscript> alert that informs visitors that the site needs JavaScript to function! Quite a lot of web revival explorers don't allow JavaScript by default, so they could visit a site and have no clue how to navigate it if theres a JS dependancy!

For that reason Id always recommend putting your nav bars in an iFrame or using a frameset layout - those have downsides too; but with a bit of tweaking they work for just about everyone!

To do this with an iFrame - you'd put your nav code in a separate nav.html file, and then put an iframe on each page showing the nav.html; then you use target="_parent" on your nav links to make them change the whole page ^^

[larvapuppy]

This is great info, thanks TheNothingMonster and Melooon! I just changed my navbar to an iframe on all of my pages... this makes things so much easier 

[PurpleHello98]

Its important if you are doing a JavaScript based sidebar that you add a <noscript> alert that informs visitors that the site needs JavaScript to function! Quite a lot of web revival explorers don't allow JavaScript by default, so they could visit a site and have no clue how to navigate it if theres a JS dependancy!

For that reason Id always recommend putting your nav bars in an iFrame or using a frameset layout - those have downsides too; but with a bit of tweaking they work for just about everyone!

To do this with an iFrame - you'd put your nav code in a separate nav.html file, and then put an iframe on each page showing the nav.html; then you use target="_parent" on your nav links to make them change the whole page ^^

Some people may have problems with iframes not reflecting new changes, and have to reset their caches to see new additions. Because of this, framesets, in my humble opinion, are easier, although there is a way to force reloads every so often, which I used when I had an iframe sidebar to force it to refresh every 30 seconds, which was a good enough fix for me. To do this, include this

Code

<meta http-equiv="refresh" content="30" >

inside the <head></head> tags on your sidebar's HTML page.

[Melooon]

Some people may have problems with iframes not reflecting new changes,

Oh I don’t disagree; that’s why I use frameset on my site; iFrames can be a MASSIVE pain; but frameset just has too many complications of it’s own; such as needing a JS script to fix urls, not working perfectly for mobile, being really poorly documented these days (we have a wiki page for it though) - it’s really hard to recommend it to someone casually without explaining all that 

That’s a clever fix thought! I’ll have to test it some time; I guess you could also have a JS that updates the iframe url with a timetamped address like nav.html?v=37474 - that way if someone has no JS that nav will work (even if it’s an outdated nav) and if they have JS it’ll be perfect!

[TheFrugalGamer]

I should mention that if anyone does decide to go the JS route, it should probably be standard to add a link at the bottom of your page to a sitemap. That way you don't have to update anything but the sitemap page as things change, but anyone who has JS disabled will be able to navigate to it and still get around your site.

It'll still be an extra step for them, but you know at least they're not lost.