How do I display related posts with common tags on a post page?

[bissy]

I would like to be able to automatically display 3 related articles on post pages based on tags.
I tried code below, but of course, not working 🥺
What should I do?

post content:

title: This is my first post.
tags: ['cat','dog']
layout: layouts/post.njk
---
...

post.njk:

<ul>
{%- for post in collections.{{ tag }} -%}
  <li>{{ post.data.title }}</li>
{%- endfor -%}
</ul>

[pdehaan]

@bissy Not sure where tag is coming from (for example, if you're looping over tags somewhere else), but I'd try something like this:

{%- for post in collections[tag] -%}

[bissy]

@pdehaan
That's great! Thank you!!! 🎉
Simple description, but it's working great!
I need to learn more about Nujax...

Right now it shows "Related posts posts", "Related cat posts" and "Related dog posts".
Can you make this so that it is just "Related posts"?
This includes both tags "cat" and "dog".

[pdehaan]

OK, custom filters to the rescue!

// .eleventy.js
module.exports = (eleventyConfig) => {
  eleventyConfig.addNunjucksFilter("excludeFromCollection", function (collection=[], pageUrl=this.ctx.page.url) {
    return collection.filter(post => post.url !== pageUrl);
  });

  eleventyConfig.addFilter("filterByTags", function(collection=[], ...requiredTags) {
    return collection.filter(post => {
      return requiredTags.flat().every(tag => post.data.tags.includes(tag));
    });
  });

  return {
    dir: {
      input: "src",
      output: "www"
    }
  };
};

Our _includes/layouts/post.njk layout file now looks like this:

<h1>{{ title }}</h1>

{%- set relatedPosts = collections.all | filterByTags(tags) | excludeFromCollection(page.url) -%}
{% if relatedPosts.length %}
<aside>
  <h1 data-tags="{{ tags | join(',') }}">Related posts</h1>
  <ul>
    {%- for post in relatedPosts -%}
    <li><a href="{{ post.url }}" data-tags="{{ post.data.tags | join(',') }}">{{ post.data.title }}</a></li>
    {%- endfor -%}
  </ul>
</aside>
{% endif %}

Basically we're taking the easy way and looping over collections.all for posts that contain at least the same sets of tags as the current page.

So my example1.njk file looks like this:

---
title: This is my first post.
tags: ['cat', 'dog']
layout: layouts/post.njk
---

The example2.njk file looks like this:

---
title: This is my second post.
tags: ['cat','giraffe',"dog"]
layout: layouts/post.njk
---

Finally, the generated /example1/index.html file:

<h1>This is my first post.</h1>
<aside>
  <h1 data-tags="cat,dog">Related posts</h1>
  <ul>
    <li><a href="/example2/" data-tags="cat,giraffe,dog">This is my second post.</a></li>
  </ul>
</aside>

The generated example1/index.html file will show /example2/ as a related post, because both pages include the tags cat+dog (even though /example1/ doesn't include the tag "giraffe").
BUT, if you go to /example2/, it will NOT show any related posts, since it tries to match cat+dog+giraffe (which is the current page's full set of tags).

So, this mess, collections.all | filterByTags(tags) | excludeFromCollection(page.url), is trying to say:

For every known page in the site (collections.all) filter posts that contain the at least the same tags as the current page (filterByTags(tags)), except, ignore the current page, since a page can't be related to itself (excludeFromCollection(page.url)).

Note that filterByTags(tags) is using the current page's tags front matter value. You could also pass an array, like filterByTags(['cat', 'dog', 'hamster']), or just keep passing arguments and the custom filter will flatten the values, like filterByTags('cat', 'dog', 'mongoose'). 🤷

[bissy]

@pdehaan
Thank you for your kindness!!
In post.data.tags.includes(tag));, an error occurred.
TypeError: Cannot read properties of undefined (reading 'includes') (via Template render error)
Could I fix this?

[pdehaan]

Sounds like post.data.tags is undefined which causes an error when accessing .includes().

Let me see if I still have my sample project locally and can break something to try and get that error.

[pdehaan]

Yep, I can reproduce locally if I create a page without a tags frontmatter key.
Looks like we can workaround it by adding a few more optional chaining (?.) checks to ensure that we gracefully handle missing tags:

module.exports = (eleventyConfig) => {
  eleventyConfig.addNunjucksFilter("excludeFromCollection", function (collection = [], pageUrl = this.ctx.page.url) {
    return collection.filter(post => post.url !== pageUrl);
  });

  eleventyConfig.addFilter("filterByTags", function(collection = [], ...requiredTags) {
    return collection.filter(post => {
      return requiredTags.flat().every(tag => post.data.tags?.includes(tag));
    });
  });

  eleventyConfig.addNunjucksFilter("related", function (collection = []) {
    const { tags: requiredTags, page } = this.ctx;
    return collection.filter(post => {
      return post.url !== page.url && requiredTags?.every(tag => post.data.tags?.includes(tag));
    });
  });

  return {
    dir: {
      input: "src",
      output: "www"
    }
  };
};

[pdehaan]

Another approach which merges the two Nunjucks filters.

.eleventy.js

  eleventyConfig.addNunjucksFilter("related", function (collection = []) {
    const { tags: requiredTags, page } = this.ctx;
    return collection.filter(post => {
      // Filter the specified collection, confirm it isn't the current page, and has all the required tags.
      // Updated to handle potentially missing `tags` properties, per https://github.com/11ty/eleventy/discussions/2534#discussioncomment-3419991 above.
      return post.url !== page.url && requiredTags?.every(tag => post.data.tags?.includes(tag));
    });
  });

src/_includes/layouts/post.njk

{%- set relatedPosts = collections.all | related -%}
{%- if relatedPosts.length %}
  <h2>Related posts</h2>
  <ul>
  {%- for post in relatedPosts %}
    <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {%- endfor %}
  </ul>
{%- endif -%}

-{%- set relatedPosts = collections.all | filterByTags(tags) | excludeFromCollection(page.url) -%}
+{%- set relatedPosts = collections.all | related -%}

[aaronstezycki]

@pdehaan This answer is dope. I've been looking for a way to filter by tags (either set by the current pages tags, or arbitrarily on the fly).

I've previously used a 'contains' filter ... but it can be a little too open to what the tags actually contain.
I have a filters.js which contain all my filters, then I declare them in the eleventy.js file ...

module.exports = {
    contains: (arr, key, value) => {
        return arr.filter(item => {
            const keys = key.split('.');
            const reduce = keys.reduce((object, key) => {
                return object[key];
            }, item);
            const str = String(reduce);
            return (str.includes(value) ? item : false);
        });
    },
    otherfilters ...
}

then ....

{% set offers = collections.offers | contains("data.tags", 'volvo') %}
<ul>
{%- for offer in offers %}
    <li><a href="{{ offer.url }}">{{ offer.title }}</a></li>
{%- endfor -%}
</ul>

... but if a post has the tag 'volvo xc60' it would still be included. Does the above filterByTags explicitly look for tags which only match?

...Also (maybe for another discussion thread) could the above filter be altered to filter collections via front matter fields also a bit like #637 ?

[pdehaan]

Sorry, re: your second question:

"…Also (maybe for another discussion thread) could the above filter be altered to filter collections via front matter fields also a bit like #637?"

Yeah, I definitely think something like that is possible.
Probably start a new discussion thread and maybe some sample code/data and we can figure something out. It likely all depends on how specific/generic your tags are, and how likely the system is to find matches.
And whether the logic is ALL tags have to match, or only some, or do we ignore some tags? Lots of customizing and stuff probably very specific to your use case.

[pdehaan]

And for my own weird future reference, here was my lazy local (non-11ty) data I was testing with:

const _get = require("lodash.get");

const filters = {
  contains: (arr, key, value) => {
    return arr.filter(item => {
      return _get(item, key)?.includes(value);
    });
  },
};

const collections = {
  cars: [
    {data: {title: "Volvo C40 Recharge", tags:["cars", "crossover", "volvo", "c40", "recharge", "electric"], author: "pdehaan"}},
    {data: {title: "Volvo XC40 Recharge", tags:["cars", "suvs", "volvo", "xc40", "recharge", "electric"], author: "pdehaan"}},
    {data: {title: "Volvo XC90 Recharge", tags:["cars", "suvs", "volvo", "xc90", "recharge", "hybrid"], author: "jdehaan"}},
    {data: {title: "Volvo V60 Recharge", tags:["cars", "wagons", "volvo", "v60", "recharge", "hybrid"], author: "jsmith"}},
    {data: {title: "Volvo XC90", tags:["cars", "suvs", "volvo", "xc90", "gasoline"], author: "jsmith"}},
    {data: {title: "Volvo S90", tags:["cars", "sedans", "volvo", "s90", "gasoline"]}},
  ]
};

// Exact string matching for `tags[]` array; via `Array#includes()`.
console.log("\ndata.tags => suvs");
console.log(filters.contains(collections.cars, "data.tags", "suvs"));

// "Fuzzy" string matching for `author` string; via `String.includes()`.
console.log("\ndata.author => dehaan");
console.log(filters.contains(collections.cars, "data.author", "dehaan"));

OUTPUT

data.tags => suvs
[
  {
    data: {
      title: 'Volvo XC40 Recharge',
      tags: [ 'cars', 'suvs', 'volvo', 'xc40', 'recharge', 'electric' ],
      author: 'pdehaan'
    }
  },
  {
    data: {
      title: 'Volvo XC90 Recharge',
      tags: [ 'cars', 'suvs', 'volvo', 'xc90', 'recharge', 'hybrid' ],
      author: 'jdehaan'
    }
  },
  {
    data: {
      title: 'Volvo XC90',
      tags: [ 'cars', 'suvs', 'volvo', 'xc90', 'gasoline' ],
      author: 'jsmith'
    }
  }
]

data.author => dehaan
[
  {
    data: {
      title: 'Volvo C40 Recharge',
      tags: [ 'cars', 'crossover', 'volvo', 'c40', 'recharge', 'electric' ],
      author: 'pdehaan'
    }
  },
  {
    data: {
      title: 'Volvo XC40 Recharge',
      tags: [ 'cars', 'suvs', 'volvo', 'xc40', 'recharge', 'electric' ],
      author: 'pdehaan'
    }
  },
  {
    data: {
      title: 'Volvo XC90 Recharge',
      tags: [ 'cars', 'suvs', 'volvo', 'xc90', 'recharge', 'hybrid' ],
      author: 'jdehaan'
    }
  }
]

[pdehaan]

Quick sample: https://github.com/pdehaan/11ty-related

The .eleventy.js config has a custom async Nunjucks shortcode, {% related %}, which takes a collection, array of required tags, and the current page's URL (so a page can't be related to itself). Then it filters the collection based on the "required" tags. Finally we use the EleventyRenderPlugin plugin to render a Nunjucks template (./src/_includes/related.njk); although you could have just as easily (or easier, really) returned the template HTML from a JavaScript string.

The other interesting thing in the config file is a custom filter, filter_arr, which takes an array (or a bunch of positional arguments) and filters them from the input array. This way we can exclude certain tags from the current page that we don't necessarily care about.

The custom {% related %} shortcode is used in our src/_includes/layouts/page.njk layout and filters a collection, collections.cars, based on the current template's page.url and a filtered version of the current template's tags array (using our custom filter_arr filter).

Apart from that, not much else is very interesting. Just a bunch of sample pages like https://github.com/pdehaan/11ty-related/blob/main/src/pages/volvo-c40-recharge.njk which define a title and tags (and the default layout is defined in a directory data file).

Not all page's have related content, but you can check the output files in the repo and see https://github.com/pdehaan/11ty-related/blob/main/www/pages/volvo-xc90-recharge/index.html, which found 2 related pages for the "Volvo XC90 Recharge" which had matching "cars" and "suvs" tags defined in their front matter.

[euro]

@pdehaan
This example repo: https://github.com/pdehaan/11ty-related only seems to match on the first two tags.

Am I missing something?

[euro]

Oops I just figured it out - it was too late at night. The ignoreTags front matter and the filter_arr