Adding Pages

Adding your own pages is really easy! First copy and paste your index.html file, and rename the copy "other-page.html".

Open other-page.html for editing. It should look something like this:


	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Squirrel Central</title>
			<script src="su/su-init.js"></script>
			<script>suInit.init( "" );</script>
		</head>
		<body>

	<h1>Welcome</h1>

	<p>
		Welcome to <strong>Squirrel Central</strong>, the ultimate resource for 
		information about your favourite animals: squirrels!
	</p>

	<p>
		This site is under construction. So be sure to check back later!
	</p>

		</body>
	</html>

Look for the <title> tag, and change its contents so that your new page name is first, followed by a |, then the site title. Something like this:


	<title>Other Page | Squirrel Central</title>

At the moment, the title MUST be in this format. I am looking into making this more customizable without being too confusing in a future version of Static Ultra. But I think for now this is a nice and organised approach. xD

Make some changes to the <body> section so this page has some unique content.

After your changes, other-page.html's code might look something like this:


	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Other Page | Squirrel Central</title>
			<script src="su/su-init.js"></script>
			<script>suInit.init( "" );</script>
		</head>
		<body>

	<h1>Another Page</h1>

	<p>
		Another page, wohoo!
	</p>

		</body>
	</html>

Now, you'll probably want a link to it on your main menu, right? Open up su-config.js.

Look for the following:


	this.MENU_ENABLE = true;
	this.SITE_MENU = [
		[
			"",
			"Home"
		]
	];

Change it to this:


	this.MENU_ENABLE = true;
	this.SITE_MENU = [
		[
			"",
			"Home"
		],
		[
			"other-page.html",
			"Other Page"
		]
	];

Save and quit su-config.js. Visit your website, hit Ctrl+F5. You should see that Static Ultra has added the page to your main menu. Click the link to visit your new page. As you can see, you only had to update your menu once, and Static Ultra has updated it on both pages! Your new page and site should look a bit like the following:

View Live Example

Also, pages do not need to be added to the main menu to work. You could visit the page directly at http://yoursite.com/other-page.html and it will work just fine!

You can also link to pages from another page, no different to a traditional website. So if you wanted to link to other-page in one of your other pages, you can use:


	<a href="other-page.html">Other Page</a>

Advanced Note: Static Ultra will always try to load and parse the page, unless the link is external (starts with https:// or http://), or the link has class "su-skip", or is inside an element that has the class. This means you can link to non-static-ultra pages by adding class="su-skip" to a link or its container, e.g.:


	<a class="su-skip" href="non-static-ultra-page.html">Some Page</a>


	<div class="su-skip">
		<a href="non-static-ultra-page.html">Some Page</a>
	</div>

Next, we'll take a look at making your own theme so you can make your website your own. After that, we'll take a look at how to add folders with more pages in them!

» Creating Themes