<< Back

Basic static pagination

What do you do when you make too many posts on your website, but you are limited to static HTML files? The post title kinda sounds complicated but trust me it isn't! At least I think so...

We all know our beloved Neocities limits us basic users to only static HTML files. No PHP, no server configuration, none of that spooky stuff.

But we do have one great tool at our disposal: Javascript! One of the challenges I encountered making my site was splitting the plethora of posts I have into pages.

I am a lazy person and I wanted a simpler solution than manually coding every single page, so I came up with an idea! Here is how it works:

  1. You put all your posts into one <div> container.
  2. When the page loads, the code takes your posts and sorts them into separate containers.
  3. Then the code creates little number buttons at the bottom to let you navigate your "pages".

Well that was simple. Now, how do we make it work?

Here is how to do it:

  1. Include the jQuery library at the top of your document, if you haven't already. You can either download it from the official site, or copy a CDN link.
  2. Once you have done that, add two <div> containers to your <body>, one with the source-posts class, one with the paginated-posts class and an empty <ul> list, like so:

  3. Once you have done that, put all your posts into the source-posts <div>. Make sure each of your posts is inside it's own container, because otherwise the code will not work the way it should. Once you do, it should look something like this:

  4. And now for the spooky part, you gotta add some code right before the </body> tag.

    Here it is:

  5. What this code does is it takes all your posts from the source-posts <div>, put it into paginated-posts <div> and adds the buttons to the pagination-list <ul> for you to click.
  6. And finally you could add some CSS code to make your page buttons look better. You could write your own, or you could drop this basic example before your </head> tag:

And this is pretty much it! I hope this wasn't too confusing! If you notice any errors I made, I would appreciate it if you let me know! Also, do let me know if you need any help! Hope this article was of good use.