# Lesson 13: Recommended content

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

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:

   * 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:

{# 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:

{% 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/ (opens new window) 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

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!