Zonelots, a simple blogging framework

Zonelots is a simple script (and some HTML and CSS files) that helps you easily make a blog you can upload to static hosting like Neocities! It's based on Zonelets by Marina Kittaka, which has a great tutorial already that you should go and read first. This readme's more about the differences between Zonelets and Zonelots, and instructions on using the Zonelots framework.

Zonelots will probably not be updated.

Differences from Zonelets

Here are the main differences from Zonelets:

1. Tagging! Each post can be tagged; the script will list the tags at the end of the post. There's also a tags page that lists all tags, and all the posts with each tag. The tags on each post link to the matching tag on the tags page.
2. Header Messages! You can write a list of messages in the script, which'll display a random message in the blog header every time someone loads the page. You can also switch this off.
3. Post navigation! The links to the next and previous posts have the matching post titles added. There's also better navigation within posts: a skip-link before any other content on the page, and a 'return to top' link at the bottom.
4. Gallery CSS! There's some extra CSS for making CSS-only (no-javascript) image galleries. The example posts show how to set them up.

A lot of the rest of the script's also heavily refactored.

How to set up your Zonelot blog

There are a few things you'll want to change in the starting .html files, a few you'll want to change in the script, and one image you'll want to change.

1. Go through the starting .html files (index, about, archive, tags, not_found, and the post template) and edit anything in double braces (e.g. {{YOUR BLOG NAME HERE}}). You can change other things, too, but anything in double braces must be changed or else it'll look weird.
2. Go through script.js and edit the following (they're all near the top):
   • the blogName parameter
   • the recentPostsCutoff parameter, if you want to change how many posts show up on the home page (the default is 3)
   • the headerMessagesOn parameter, if you don't want messages to appear in the header (the default is true)
   • footerLinks, by adding any contact links you want to go at the bottom of every page (put each link between quotes, on a new line, and make sure every line except the last has a comma after the closing doublequote)
3. Delete the example posts in the posts folder and their data in the postsArray array.
4. Finally, you'll want to change the favicon file (replace it an icon of your own, sized 32x32 pixels). Use a .png or else change the file extension in all the basic pages.

You can customise the script more deeply (e.g. to change what's written before the footer links, which is "Contact: " by default), but those are the main things you'll want to change to make Zonelot your own. You can also tweak the styling in style.css. Finally, put it up somewhere online, e.g. NeoCities.

How to add a new post

Adding a new post is easy. First, write the post:

1. copy the post template file and rename it with the date the post will be published (in YYYY-MM-DD format) and the name of the post.
2. open the file and write your post, in HTML, in the <article> element.
3. write your post's name in the <h1> element in the file body and in the <title> element in the file head.
4. add any other metadata (this'll probably just be the optional post description in the file head).

Then, update the script:

1. open script.js and find postsArray.
2. add a new line at the top of the array and write or paste in the following: {path: "", title: "", tags: []},.
3. paste your post's file name inside the doublequotes after path:, and cut off the .html from the end (Zonelot adds that automatically).
4. paste your post's proper title inside the doublequotes after title: (this is the same title that you wrote in the <h1> and <title> elements in the post file).
5. if you want, give the post some tags in the tags array. Wrap each tag in quotes, and put a comma and a space after every tag except the last (the space technically isn't necessary, but it makes the array more readable). See the top of the script for the full list of characters you can include in tag names.
6. make sure every line of postsArray except the last has a comma at the end!

Here's what a postsArray with a few posts might look like:

[
	{path: "2023-06-01-all-about-my-ocs-and-webcomic", title: "All about my OCs and the webcomic I'm making about them", tags: ["comics", "my art", "my OCs", "fantrolls"]},
	{path: "2023-05-17-spit-buckets-and-slaughter-a-look-back-at-homestuck", title: "Spit buckets and slaughter: a look back at Homestuck", tags: ["comics", "history", "Homestuck", "Flash", "the death of Flash"]},
	{path: "2023-05-06-start-here", title: "My first post!", tags: ["the blog"]}
]

How to change the header messages

Adding, changing, and removing header messages is even easier than adding posts. All messages are stored in messagesArray in script.js. To remove a message, just delete that line. To change a message, just change the content between the quote marks. To add a message, just write the message on a new line between quote marks (make sure every line except the last has a comma at the end, after the closing quote mark). Most typical HTML is fine to use in these messages (e.g. links).

To switch messages off, set the headerMessagesOn parameter at the start of the file to false.