![](/assets/images/image-default.png)
Navigation Links And Keyboard Shortcuts
Navigation Links
I had the feeling that it was hard to navigate through the site as it was, so I added navigation links at the end of the posts. I followed this simple example.
The ideal situation would be that the previous/next link takes you to the previous/next post in the same category. There are some hacky ways to achieve it with Liquid (which I want to avoid - I’ve decided to keep Liquid snippets simple), and also some plugins (might be better, but I would prefer if I control the logic).
I will consider in the future if I want to build my script, or if a plugin could be the answer. For now, it is good to have chronological navigation links.
Keyboard Shortcuts
Inspired by the hatch web page, I added keyboard shortcuts to navigate to the next/previous page. Find the snippet below.
<script>
document.addEventListener('keydown', function(event) {
// Check if the key pressed is "."
if (event.key === '.') {
window.location.href = '{{page.next.url}}';
}
// Check if the key pressed is ","
if (event.key === ',') {
window.location.href = '{{page.previous.url}}';
}
});
</script>
Since now I have keyboard shortcuts, I will have to find a visible place to explain how they work (maybe on the home page). The idea is to display something like the table below:
Key | Action |
---|---|
, (comma) | Go to previous page |
. (period) | Go to next page |