How to references pages

[tcurdt]

In a blog post I want to reference other related blog posts - reading recommendations. I want to specify the related posts in the frontmatter. But how to lookup the page objects for the references from the frontmatter?

I guess I could pass them into a filter and apply the filter to a collection. That does feel like a workaround though. Any other suggestions?

[tcurdt]

I tried it like this

{%- for post in collections.tech | featured(post.data.related) -%}
{%- endfor -%}

but it seems like I don't get access to the frontmatter data from within the layout.

[pdehaan]

@tcurdt I think I got this working in https://github.com/pdehaan/11ty-related-articles using your custom filter approach.

The README isn't the best, but it has the following mock pages:

src/
└── posts/
    ├── post-1.njk (related to post-2)
    ├── post-2.njk (related to post-1)
    ├── post-3.njk (related to post-6)
    ├── post-4.njk (no related pages)
    ├── post-5.njk (related to post-1, post-2, and post-7)
    ├── post-6.njk (related to post-3)
    ├── post-7.njk (related to post-5)
    |
    └── posts.json (data file which specifies shared `layout` and `tags` for all 
                    of our src/posts/*.njk templates)

[tcurdt]

Wow - thanks for the example project, @pdehaan

Seems like I was already really really close. I am just still a little surprised about the related instead of page.data.related and also post.data.page.url instead of just post.url.

[pdehaan]

Disclaimer: I could be wrong, it was just the first thing I found while dumping objects.

Actually, now that I'm back at my laptop, it looks like just using {{ post.url }} also works, so my digging into {{ post.data.page.url }} was unnecessary. Also it seems like the solution still works if I modify the page's permalinks to something like permalink: "blog/{{ page.fileSlug }}/", which is :+1:.

[pdehaan]

Not sure it really helps, but I also hacked around with using collections and filters to create related and featured articles: https://github.com/pdehaan/11ty-featured-articles

A bit tedious since the approach uses a bunch of custom collections, so if you were on an Eleventy+Nunjucks blog post, you could easily find other posts in that collection, filter out the current page, and display the remaining related links.

For featured articles, it uses a featured: true truthy key in the front-matter to and a custom "featured" filter to filter a collection (or you could define a custom "eleventy:featured" collection and do the filtering there).

🤷‍♂

[cmaas]

I think I got this working in https://github.com/pdehaan/11ty-related-articles using your custom filter approach.

Very helpful, thank you @pdehaan ! I added one line to sort them by how they're ordered in the related array in the Front Matter:

https://gist.github.com/cmaas/1686dbb8bf999871c8ffb127aa07ff84

eleventyConfig.addFilter('filterRelated', (collection = [], related = []) => {
  const filtered = collection.filter(page => related.includes(page.fileSlug));
  return filtered.sort( (a, b) => related.indexOf(a.fileSlug) - related.indexOf(b.fileSlug));
});