Blog Post Navigation using JavaScript | Part 2

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? >_<

The solution I came up with was to hide the slugs to the Previous and Next post, in the post itself. These slugs will get picked up by JavaScript and used for generating the corresponding links. Yeah I know, this is also a bit of a manual process. But I only had 16 precursor journal entries. I didn't mind updating them one by one to add the slugs for the Previous and Next post in the series.

For future entries in a series, I would consider adding the slugs for the Previous and Next post as part of the writing process. For example, I've recently implemented this solution to entries in my Book Review series. For the next Book Review post that I'll write, I will add the slugs as part of writing the post. And I'll also update the previous post in the series to point to the new one. — Update 04/26/2021: I eventually removed these links on the Book Review posts because they were getting picked up by my search app.

Here is an example of how I hid the slugs in a post. In this case, it is for Journal Entry – XV. You can easily verify by looking at the page source. The key to hiding the slugs is using style="display: none;" for the styling.

<div id="nextLinkSlug" style="display: none;">vacation-week-is-over</div >
<div id="previousLinkSlug" style="display: none;">journal-entry-xiv</div >

The slugs will then be picked up by JavaScript and used for generating links to the Next and Previous post in the series. Sample script below for generating the link to the Previous post.

try {
     previousLinkUrl = "https://journal.dinobansigan.com/" + document.getElementById("previousLinkSlug").innerHTML;

     previousLinkText = '<a class="previousLink" title="Get Previous entry in this series" href="';
     previousLinkText = previousLinkText.concat(previousLinkUrl);
     previousLinkText = previousLinkText.concat('">&#8592;Previous</a>');
} catch (err) { }

Wrapping the code in a try catch block is crucial here. This is to avoid running into JavaScript errors when viewing a post that doesn't have any hidden slugs. Basically, calling document.getElementById("previousLinkSlug").innerHTML on a post that doesn't have a previous link slug will throw an error. When that happens, the rest of your custom JavaScript will not run at all.

Before I end this post, I'll address a question that you might have about the use of slugs in a post. Instead of slugs, why not just add links (URLs) to the Previous and Next post in the series? True, I could have done that. The reason I didn't, is because I didn't want to add any more hard-coded URLs into the post. Also, this keeps the slugs “domain agnostic”. I don't know if that is a proper term. What I mean is, I could switch to a different domain name for this site and not have to mess with all the posts. I would only need to update the Javascript to use the new domain name and all the links should keep working.

Lastly, you might be thinking, why go through all this trouble of manually inserting slugs into a post and writing JavaScript, just so I can display a link to the Previous and Next post in a series? The answer is, because I can and it helps me learn more about JavaScript. Part of the perks of owning your own blog/site, is that you can do what you want with it. You don't have to follow what everyone else is doing, you can make it your own.

Precursor journal entries were entries I wrote before I started a 30 day hiatus for my Digital Declutter phase. These were impromptu entries written mostly at night before going to bed. However, starting from Journal Entry - 010, the journal entries that I've been writing are purely based off entries from my bullet journal.

Tags: ##HowTo #JavaScript #WriteAs

Discuss... or leave a comment below.