Lesson 13 - Recommended content

Learn Eleventy From Scratch
Let’s build a website

Most of our blog template is done and dusted. All we have to do now is add a recommended posts section at the end.

In this last lesson on our blog, we’re going to add a “More from the blog” section to our layout. This will recommend some other posts to the reader once they reach the end of the post they’re on.

We’ll use a helper function to show 3 posts, picked at random, and—most importantly—to make sure they don’t include the post the reader’s currently on.

Adding our helper permalink

Let’s open up eleventy-from-scratch/src/_data/helpers.js. On
line 22 add a comma, so it looks like this: },. Create a new line under that and add the following:

Code language
   * Filters out the passed item from the passed collection
   * and randomises and limits them based on flags
   * @param {Array} collection The 11ty collection we want to take from
   * @param {Object} item The item we want to exclude (often current page)
   * @param {Number} limit=3 How many items we want back
   * @param {Boolean} random=true Wether or not this should be randomised
   * @returns {Array} The resulting collection
getSiblingContent(collection, item, limit = 3, random = true) {
  let filteredItems = collection.filter(x => x.url !== item.url);

  if (random) {
    let counter = filteredItems.length;

    while (counter > 0) {
      // Pick a random index
      let index = Math.floor(Math.random() * counter);


      let temp = filteredItems[counter];

      // Swap the last element with the random one
      filteredItems[counter] = filteredItems[index];
      filteredItems[index] = temp;

  // Lastly, trim to length
  if (limit > 0) {
    filteredItems = filteredItems.slice(0, limit);

  return filteredItems;

This is a pretty handy function. It takes a passed collection of any content, a single item (in our case the current blog post page), a limit to the number of items it can return and whether or not those items should be randomised.

The first thing it does is filter out our current post. It does that by comparing URLs, because they will always be unique. Then, if we want our collection to be random, it loops backwards through the collection and shuffles the items around. Finally, if we’ve set a limit, it slices that amount of items (default 3) out of the return filteredItems array.

Let’s implement that on our blog post layout. Open up eleventy-from-scratch/src/_includes/layouts/post.html. On line 4, create a new line and add the following:

Code language
{# Grab other posts that aren’t this one for the 'more from the blog' feed #}
{% set recommendedPosts = helpers.getSiblingContent(collections.blog, page) %}

Now, on line 29, just before the closing </article>, add the following:

Code language
{% if recommendedPosts %}
  <footer class="recommended-posts">
    {% set postListItems = recommendedPosts %}
    {% set postListHeadline = 'More from the blog' %}
    {% include "partials/post-list.html" %}
{% endif %}

Hopefully you can see the power of partials here. All we needed to do once we grabbed our recommendedPosts was chuck them into our existing post-list.html partial. Lovely stuff.

Now, if you open your browser at http://localhost:8080/blog/laws-of-ux/ again and scroll down, it should look like this:

3 recommended posts, headed with “more from the blog” in amongst the rest of the blog post

Wrapping up permalink

Over the course of these 3 lessons alone, I reckon you could very comfortably create a personal site with Eleventy. Add that to the knowledge you’ve learned from the earlier lessons and you’re in a really good place to own your own content.

Now, we’re going to plough on and build out the rest of this HTML-only site. Let’s go!

Next up: Lesson 14 - Adding our about page

A nice straightforward page build using some of the knowledge we’ve already learned.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.