Adding Folders

There are times where you want to have a folder for another bunch of pages. Maybe a blog section? Or maybe you have some kind of categories. You get the idea.

Actually, a blog is a good example. xD So, create a folder in your website root called "blog".

Copy and paste your index.html file, and paste it inside of the blog folder. Open up blog/index.html for editing.

Change the line:

<title>Your Website Title</title>

to

<title>Blog | Your Website Title</title>

Once again, it MUST be in that format for the time being.

Next, change the lines:

<script src="static-ultra/static-ultra-initialiser.js"></script> <script>sckStaticUltra_initialiser.init( "" );</script>

to

<script src="../static-ultra/static-ultra-initialiser.js"></script> <script>sckStaticUltra_initialiser.init( ".." );</script>

This tells the web browser where Static Ultra is relative to the current folder, and it tells Static Ultra the path to your website's root. ".." means "one folder up".

The rest you've seen before. Let's edit the code between: <!-- Page Content Begin --> and <!-- Page Content End -->. Change it so it looks like the following:

<!-- Page Content Begin --> <h1>Blog</h1> <p>Welcome to my blog. Entries:</p> <ul> <li><a href="first-entry.html">First Entry</a></li> </ul> <!-- /Page Content Begin -->

Open config.js for editing and add it to the menu:

// Static Ultra will transform this into your main menu HTML this.SITE_MENU = [ [ ".", "Home" ], [ "my-page.html", "My Page" ], [ "blog", "Blog" ] ]

Alright that's that page done. Let's create the first-entry.html.

The steps are the mostly the same, so I'll just explain what's different. Copy and paste the blog folder's index.html file, and rename it first-entry.html.

Open first-entry.html for editing. You've already sorted out the paths, so all you need to do is update the title and content:

<title>First Entry | Blog | Your Website Title</title> <!-- Page Content Begin --> <h1>First Entry</h1> <p>Today I started using Static Ultra!</p> <p><a href=".">Blog Home</a> <!-- /Page Content Begin -->

You'll probably not want to add this one to the main menu, since you have a link to it on the blog's index.

So you're done! You now have a nice blog section to expand upon.

A word on <title> format

I've mentioned this before, but for the moment the title element must be formatted in a specific way. This is best for Search Engines, and also makes the Static Ultra breadcrumb work correctly. A summary is as follows:

Root Folder index.html Website Title
Root Folder other-page.html Page Title | Website Title
Other Folder index.html Section Title (e.g. Blog) | Website Title
Other Folder other-page.html Page Title | Section Title | Website Title

This concludes the section tutorial.


I'd say at this point you have everything you need to work with Static Ultra. However, if you'd like to get a little more advanced and learn how you can have stylesheets and scripts on a site-wide, theme, and/or page-by-page basis, read on:

» CSS Guide