How to create a for loop of posts that match current pages tag.

[philnind]

I hope this makes sense...

I have created some blog posts using Strapi & 11ty and saving them into MD files to serve on the front end. Each MD file has a tag of "post" (to identify it as a post) and then an additional tag to identify the category of the post (e.g SEO or Web-Design).

In my categories.njk file I am trying to create a loop where it displays only the posts that correspond to that category. IE only showing the posts of that include the SEO tag on the SEO categories page.

I have tried doing this with filters but can't quite work it out.

Can anyone help me, please...

[danurbanowicz]

Have you had a look at any of the 11ty starter projects? If I understand your use case correctly, the Eleventy Base Blog will probably do what you need. Specifically, take a look at tags.njk and includes/postslist.njk.

[philnind]

I'm using strapi to manage categories so don't think this will work. I was advised to maybe look into doing it via a filter...

[tannerdolby]

You can create a custom collection and filter those .md posts by tag with getFilteredByTag. Then you can iterate over the filtered collection with a for loop in the page you need to display those posts. Try this out.

Within your Eleventy Config File (.eleventy.js):

module.exports = (eleventyConfig) => {
  // create a custom filtered collection that only matches a specific tag in `tags`
  eleventyConfig.addCollection("seo", function(collectionApi) {
      return collectionApi.getFilteredByTag("seo");
  });
}

Now you can iterate over this custom collection of filtered posts in a markdown or template file, For example if you wanted to loop and display the SEO posts on a certain page, let's say seo-page.njk. You could do this using Nunjucks (the syntax is slightly different for Liquid but the 11ty.dev docs could quickly clear that up if you need):

<ul class="seo-posts">
{% for post in collections.seo %}
  <li>{{ post.data.title }}</li>
{% endfor %}
</ul>

This will generate an unordered list of blog post titles from the custom collection containing blog posts which only have the "seo" tag in the tags list.

Also {{ post.data.title }} would be accessing the title key in front matter from the .md posts. Below is an example of some blog post seo-post-one.md with the "seotag intags`.

---
title: Some post about SEO
tags:
  - post
  - seo
---

# {{ title }}

Some blog post markdown about SEO.

[tannerdolby]

@philnind Let me know if the above solution helped you.