Tutorial: Avoid Repeat HTML on Neocities

Friday, 8th November 2024

If you are building a website on Neocities, or just building a static website elsewhere, it's likely you've had to duplicate your navbar or menu on several pages. This of course means if you later add a new page, you must update it on every page. Today's post offers a solution to this problem, and a live demo and download to boot!

Same logic applies to your layout/template/theme. Sure, if you update the CSS it updates on every page. But sometimes you want to update the HTML of the layout. Once again this means you need to go and update it on every page.

Well, what if you didn't have to? Today I will show a very quick and simple solution. I actually already have a more comprehensive solution which completely solves this problem and more called Static Ultra... buuuut people seem to be finding it a bit complicated. So this post offers a more simple solution lol.

Solute-eye-own HTML

Today's solution is to have all of your layout and nav in your site's index.html, and then to load the user's requested page with a URL parameter.

Alrighty, let's get this thing going. Make a folder on your Neocities site to do the tutorial. Create a new file called index.html, and paste in the following HTML (I'll explain it below):


	<html>
		<head>
			<title>My Site</title>
			<link rel="stylesheet" href="site.css">
			<script src="site.js"></script>
		</head>
		<body>
			<div class="wrap">
				<div class="header">
					My Site
				</div>
				<div class="nav">
					<a href="?page=home">Home</a>
				</div>
				<div class="page-content">
					<script>writePageContent();</script>
				</div>
				<div class="footer">
					By Someone
				</div>
			</div>
		</body>
	</html>

I've left out common stuff not relevant to the tutorial like the doctype and common meta tags. Be sure to put them in if you want. xD

So, we have a simple HTML layout ready to go with a header, nav (menu), place for our page content and footer. We've also prepped for adding a stylesheet, and even our script which does the magics of this tutorial.

You may want to visit the page a this point just to see our progress.

Beautiful. Well OK it's not much yet, since we haven't made site.css or site.js. Let's get started with that now!

The CSS

Create a new file in the same folder called site.css. Page in the following. This isn't a CSS tutorial, so I'm not gonna explain it all, but I've tried to avoid anything complex so if you have a quick look through it should be pretty straight forward if you have some CSS experience.


	body
	{
		background-color:rgb(242, 241, 218);
		margin:0;
		padding:0;
	}

	.wrap
	{
		margin-top:16px;
		margin-bottom:16px;
		margin-left:auto;
		margin-right:auto;
		border:solid 3px grey;
		width:800px;
		background:rgb(229, 246, 217);
	}

	.header
	{
		padding:16px;
		font-size:32px;
		text-align:center;
		border-bottom:solid 3px grey;
	}

	.nav
	{
		font-size:20px;
		text-align:center;
		padding:8px;
		border-bottom:solid 3px grey;
	}

	.nav a
	{
		color:green;
	}

	.page-content
	{
		padding-left:16px;
		border-bottom:solid 3px grey;
		min-height:400px;
	}

	.footer
	{
		font-size:18px;
		text-align:center;
	}

Visit the page and you should see a layout like the following:

The JS

Alright! Now it's time for the bit that actually makes today's solution work, the JS! We're gonna build this up bit by bit and explain it. Don't worry, it's not much. Oh and if you just want the complete solution/demo just scroll to the end of this page.

Create a new file called site.js, and add the following:


	// Get which page the user wants from the URL
	var queryString = window.location.search;
	var urlParams = new URLSearchParams( queryString );
	var page = urlParams.get( "page" );

	alert( "Page:" + page );

Refresh the page, and you'll get a dialog box that says Page:null. However! Try clicking on the Home link on the navbar. And you'll get a dialog box that says Page:home.

What does this mean? Well, it means we know which page the user wants by reading it from the address bar. The home link turns the address into mysite.com/?page=home, and the code we just wrote extracts the "home" bit.

But, it's also possible for the page to be null or some other value the user types into the address bar. So let's solve that problem, with a safe list.

Adjust site.js so it is as follows:


	// Get which page the user wants from the URL
	var queryString = window.location.search;
	var urlParams = new URLSearchParams( queryString );
	var page = urlParams.get( "page" );

	// Delcare some safe pages
	var safePages = [
		"home"
	];

	// If the page the user wants isn't a safe one, just load the home page
	if( safePages.indexOf( page ) == -1 )
	{
		page = "home";
	}

	// Alert the page
	alert( "Page:" + page );

As you can see, we've made an array of safe pages, and then if the value of page in the address bar is NOT in that array, we just use the home page.

Alright. Next step. Let's prepare for actually loading and showing the page. Delete the alert() from the script. Then add the following to the END of the script.


	// Load the page and write it to the HTML
	function writePageContent()
	{
		// Load the page
		var request = new XMLHttpRequest();
		request.open( "GET", page + ".html", false);
		request.send( null );

		// Write the page to the HTML
		document.write( request.responseText );
	}

The complete script should now look like this:


	// Get which page the user wants from the URL
	var queryString = window.location.search;
	var urlParams = new URLSearchParams( queryString );
	var page = urlParams.get( "page" );

	// Delcare some safe pages
	var safePages = [
		"home"
	];

	// If the page the user wants isn't a safe one, just load the home page
	if( safePages.indexOf( page ) == -1 )
	{
		page = "home";
	}

	// Load the page and write it to the HTML
	function writePageContent()
	{
		// Load the page
		var request = new XMLHttpRequest();
		request.open( "GET", page + ".html", false);
		request.send( null );

		// Write the page to the HTML
		document.write( request.responseText );
	}

So, earlier we got the value of "page" from the URL, which we know is always "home" at the moment. This function turns "home" into "home.html", loads it, and writes it out. If you remember, we call writePageContent() inside the page-content div in the HTML. Get the idea?

If you visit the site right now, you'll get an error, since home.html doesn't exist. Something like this:

Creating our First Page

Apart from updating the safe pages, we're done with script writing! Phew. Let's create a Home page so something actually gets displayed.

Create a new file called home.html, and paste in the following (or just write your own HTML.


	<h1>Home Page!</h1>
	<p>Yay I've made a home page.</p>
	<p>I'll make more pages in a moment.</p>

Visit index.html, and boom:

Creating more Pages

And this is where it all comes together. Open index.html for editing, and adjust your navbar code to the following:


	<div class="nav">
		<a href="?page=home">Home</a>
		<a href="?page=about">About</a>
		<a href="?page=contact">Contact</a>
	</div>

So we've added two pages to the navbar, nice. Now we need to add them to the JS:


// Delcare some safe pages
var safePages = [
	"home",
	"about",
	"contact"
];

Now we just need to create an about.html and a contact.html and put some HTML in them. Once done, visit your site, press Ctrl+F5 and you'll be able to use the menu to navigate your site.

And that's it! You can now update your menu and layout HTML in index.html, and update your pages indepenently. Here's the live demo:

Live Demo

Download Demo files (coming shortly)