— Menu —

Hello!

I'm Keir Whitaker — I work in the Offline Marketing team at Shopify. You can my read latest blog posts, find out more about me & listen to the web industry podcast I co–host. You'll also find me on Twitter and Instagram.

Blog

How to Create a "You Might Also Like" list in Jekyll

I recently added a simple “you might also like” list to the bottom of my Weekly Miscellany layout file and thought it might be worth sharing the code for other Jekyll users to use/make better.

My goal was to provide up to five links to the most recent “Weekly Miscellany” categorised posts but also ensure that if the currently viewed post was in that it wasn’t included. As with many scenarios in Liquid you have to change your way of tackling the problem, especially if you come regularly developing with server-side languages.

Here’s the code I have employed:

<ul>
{% assign count = 1 %}
{% for post in site.posts %}
{% if post.categories contains "weekly miscellany" %}
{% if post.url != page.url and count < 6 %}
<li><a href="{{ post.url }}">{{ post.issue }}: {{ post.title }}</a></li>
{% assign count = count | plus: 1 %}
{% endif %}
{% endif %}
{% endfor %}
</ul>

Here’s an explanation of the steps:

  1. Firstly we create a Liquid variable called count which we’ll use to track the number of links we have output
  2. Next, we open a for loop which will iterate over every post (the default collection in Jekyll) in the site
  3. On each iteration, we check whether the current post has an assigned category of weekly miscellany
  4. Only if this resolves to true does the loop continue. If false the next post will be evaluated.
  5. Next, we run a comparison to check whether the current post.url (i.e. the url of the current post in the loop) is the same as the page being generated by Jekyll. In order to do this, we compare the post.url variable with the page.url.
  6. If post.url != page.url(i.e. if there is no match) then we run one more comparison which checks how many posts we have already output. This utilises our count variable. The link will only be output if the count is less than six. This should ensure that the list will never include a link back to itself and also ensure
  7. If the link is output then we increment our count using assign count = count | plus: 1. This is one of those Liquid concepts which still feels a little alien to me!
  8. Finally, in the code example, we end our two if statements and our single for loop

This approach will loop over every post in the collection. This may take a while if you run a very large archive and may not be the most performant way of achieving this result. As my archive is tiny I am not concerned by this.

There’s probably a number of ways to achieve this same result but so far it seems to be working well for me.

This article was published by Keir Whitaker on January 09, 2018 in the Web Development category. You can view the blog archives, subscribe to RSS updates, and see a full list of my contributions to other publications. Articles are also availabe on Medium. Discuss this article with me by email.