11ty/eleventy-navigation

Accessing page front matter when looping through eleventy-navigation keys

Level0gamedev opened this issue · 2 comments

I am trying to access the default 11ty front matter data (or even just page entries) when going through eleventy-navigation entries, but that data doesn't seem accessible.

How could I access something like page.date in this situation:

{% set listing = collections.all | eleventyNavigation(key) %}
{% for item in listing %}
  <p> {{ item.page.date }} </p>
{% endfor %}

It doesn't return anything outside of what's defined in the eleventyNavigation structure. Probably not the ideal approach, but you could move the date into eleventyNavigation if that's an option in your case. Otherwise you could create and register your own custom filter that will bring in more data based on EleventyNavigation.findNavigationEntries.

I suppose it could also be possible to use the key for your item to access the something directly from collections.all, but to be honest I don't really know how to make that work.

Yep, that's what I did - I modified the the eleventyNavigation.js to expose the page front matter by calling item.page.var. Didn't post my approach earlier, just in case someone actually knew some "kosher" way of doing it. Honestly, I was surprised that this functionality was not included, it seems it would be relatively common thing to fetch some front matter.

Nevertheless, thanks. I will close the issue, because I don't think we will get a better response.

For others looking for the solution, here's the function I changed in eleventyNavigation.js - I added the line under url: .... After that you can access front matter like it was described in the original post.

function findNavigationEntries(nodes = [], key = "") {
	let pages = [];
	for(let entry of nodes) {
		if(entry.data && entry.data.navi) {
			let nav = entry.data.navi;
			if(!key && !nav.parent || nav.parent === key) {
				pages.push(Object.assign({}, nav, {
					url: nav.url || entry.data.page.url, 
					page: entry.data.page,
					pluginType: "eleventy-navigation"
				}, key ? { parentKey: key } : {}));
			}
		}
	}