Lesson 13 - Recommended content

Course
Learn Eleventy From Scratch
Module
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
JavaScript
  /**
   * 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);

      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
text
{# 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
HTML
{% if recommendedPosts %}
  <footer class="recommended-posts">
    {% set postListItems = recommendedPosts %}
    {% set postListHeadline = 'More from the blog' %}
    {% include "partials/post-list.html" %}
  </footer>
{% 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, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me