Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that you wanted to add a Previous or Next link to.

In Part 1, I covered how I generated links to the Previous and Next post for my “indexed” journal entries. In this post, I'll talk about how I generated the links for non-indexed journal entries.

Handling Old Journal Entries

So, now that I have navigation working for my “indexed” entries. I turned my attention to my precursor journal entries. These entries don't use base 10 numbers as indexes in their slugs/URLs. For example, the post slug for Journal Entry – I ends in “I”, which is a roman numeral. Same goes for Journal Entry – II, III, IV and so on. To further complicate things, I decided to leave the post slugs unchanged for other precursor journal entries. The post slug for Journal Entry – XV for instance is still “decisions-decisions”. I thought about writing JavaScript that would convert roman numerals to base 10 numbers. But then that won't work for non-indexed entries like Journal Entry – XV.

Shot myself in the foot right there, huh? >_<

Update 06/22/2020: Didn't realize that the JavaScript that I talked about in this post, was actually creating a Next link for this post. It thought this was a Journal Entry post, because it found that text in here. That's hilarious, but that is also part of the fun of tinkering. I have fixed it.

Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that uses index numbers for post slugs. For a working example of this, check out the posts on my photo-blog.

Finally got full blog post navigation working for my Journal Entries. If you have JavaScript enabled on your browser, you could effectively navigate from Journal Entry – I up to Journal Entry – XVI, then continue on to Journal Entry – 001, all the way up to the latest one (as of this writing), Journal Entry – 060. You can also navigate from Journal Entry – 060, all the way back down to Journal Entry – I.

Getting Post Slug and Index

To make navigation work between blog posts in a series, I made use of a standard format for post slugs/URLs. I call them “indexed” entries because I added an index to the end of the slug/URL. For example, “journal-entry-001”, “journal-entry-002”, “journal-entry-003” and so on. It's really just a way to help me figure out the sequence of posts.

So, first off, here is the JavaScript for getting the post slug from the URL. Then from there, getting the post index from the slug. Without this code, it will be impossible to automatically generate the links to the Previous and Next posts.

var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");

// Get post slug
var postSlug = content.split('/').pop();
var postIndex = postSlug.split('-').pop();