How to get front matter values from a different page

[hajo17]

I'm looking for a way to include front matter values from a different page with a given URL.
What I'm trying to do is create hyperlinks, where I provide the URL of a target page and get its title and short description.

page1.html

---
title: Page 1
description: ...
layout: layout
templateEngineOverride: njk
---

<!-- pseudo code fragment, does not work -->
{% set target = ... %}
<p><a href="{{ target.url }}" title="{{ target.data.description }}">{{ target.data.title }}</a></p>

page2.html

---
title: Another page
description: Short description for another page
layout: layout
templateEngineOverride: njk
---
. . .

Expected output for page1.html

<p><a href="/page2/" title="Short description for another page">Another page</a></p>

Any clues how to this can be done?

[hajo17]

Below is a working solution, but I wonder if the for loop is really necessary.

.eleventy.js

module.exports = function(config) {
  // ...
  config.addNunjucksFilter("getpage", (arr, url) => {
    return arr.filter(item => item.url == url);
  });  
}

page1.html (source)

{% for item in collections.all | getpage("/page2/") -%}
<p><a href="{{ item.url }}" title="{{ item.data.description }}">{{ item.data.title }}</a></p>
{% endfor %}

page1.html (output)

<p><a href="/page2/" title="Short description for another page">Another page</a></p>

[pdehaan]

👍   Nice solution.

Below is a working solution, but I wonder if the for loop is really necessary.

Not necessary, but it has a nice(?) side effect of if the "/page2/" can't be found, there is no output since the getpage filter will return an empty array so the loop won't run.

Also means you can display something in the event of the specified slug not being found by using {% else %}:

{% for item in collections.all | getpage("/page2/") -%}
  <p><a href="{{ item.url }}" title="{{ item.data.description }}">{{ item.data.title }}</a></p>
{% else %}
  <p>Page not found</p>
{% endfor %}

Here's how I did it without the loop:

{%- set item = collections.all | getpage("/page2/") | first -%}
{% if item %}
  <p><a href="{{ item.url }}" title="{{ item.data.description }}">{{ item.data.title }}</a></p>
{% else %}
  <p>Page not found</p>
{% endif %}

The part that confused me here was that getpage() still returns an array of pages with 0 or 1 items, so I had to use the built-in Nunjucks first filter to get the first item from the filtered array.

And just because this was fun, here was my other idea about throwing an build error if you specified an invalid page url (like "/page404/" or made a typo):

  eleventyConfig.addNunjucksFilter("getpage", function (arr, url) {
    const pages = arr.filter(item => item.url === url);
    if (pages.length > 0) {
      return pages;
    }
    throw new Error(`${url} not found.`);
  });

You could also modify that slightly to return pages[0]; to return the specified page object instead of an array with 1 item (and then needing to use the first filter, or whatever). Although, once I returned pages[0] it breaks the ability to use a {% for .. in %} loop since getpage would return an object instead of an array.

---

UPDATE: Actually, I think using Array#find() might be preferable to pages[0] since [I believe] .find() will stop looping as soon as it finds a match. So if your site is 1000 pages, and it finds the specified match on the 3rd iteration, it won't loop another 997× trying to match an already found permalink:

return arr.find(item => item.url === url);

[pdehaan]

Another idea I had was it could also depend on how big your site is, or how common these linkings are.
If you have a huge site, looping over thousands of pages in collections.all might be slow. Or if you only do this in a couple places, if adding specific tags to specific pages so they show up in a custom collection which only has a 1 item.

For example, if I add "tags: about" to one of my pages, Eleventy will create an "about" collection and I can just do this:

{%- set item = collections.about[0] -%}
<p><a href="{{ item.url }}" title="{{ item.data.description }}">{{ item.data.title }}</a></p>

[hajo17]

Many thanks, Peter. This is indeed very helpful. I think I'll go with collections.all | getpage(url) | first and arr.find().

Links of this form are fairly common in the software user guide for which the static site will be used. (In its current form, there are 86 pages with 103 internal links, not counting chapter TOCs.)

I have yet to find out whether looping over a collection takes too long. My bigger concern was having three lines of code for a link, which may also occur inline. Right now I'm having a look at Nunjucks macros to reduce the code to something like {{ xref('/page2/') }}.

[pdehaan]

Cool. I haven't really used Nunjucks macros yet, but am curious how it turns out.

I think I have a version working w/ a shortcode, filter, and macros:

// .eleventy.js snippet
  eleventyConfig.addFilter("_xref", (pages, url) => {
    return pages.find(page => page.url === url);
  });

  eleventyConfig.addShortcode("xref", function (pages, url) {
    const xrefFn = eleventyConfig.getFilter("_xref");
    const page = xrefFn(pages, url);
    return `<a href="${page.url}">${page.data.title}</a>`;
  });

So the shortcode above uses the poorly named _xref filter, although you could save a line by duplicating the filter code directly in the shortcode.

Now I can use the custom shortcode like this, but I couldn't find a way to access a collection from within a shortcode, so I have to specify the collection and desired URL as arguments.

{% xref collections.all, "/pages/one/" %}

As for the macro version, I have ./src/_includes/macros.njk with the following:

{% macro xref(slug) %}
  {% set $page = collections.all | _xref(slug) %}
  <a href="{{ $page.url | url }}">{{ $page.data.title }}</a>
{% endmacro %}

And I have to call it like this:

{% import "macros.njk" as macro with context %}

{{ macro.xref("/pages/two/") }}

The "with context" was interesting; #434, but it seems to let me access the collections.all context from within the macro. But now instead of passing a collection and page URL, I need to import the macro on each page.

[hajo17]

Thanks a lot for your support, Peter. If only I had read your reply earlier, I would have saved two hours and besides learned something new. I will try out the shortcode feature. My own macro looks simliar,

.eleventy.js like in my previous example.

page1.html

{% from 'macros.njk' import xref with context %}  
<p>{{ xref("/page2/") }}</p>

_includes/macros.njk

{% macro xref(url) %}
{%- set item = collections.all | getpage(url) | first %}
{%- if item -%}
<a href="{{ item.url }}" title="{{ item.data.description }}">{{ item.data.title }}</a>
{%- else -%}
<a href="{{ url }}" class="link-unavailable">{{ url }} (unavailable)</a>
{%- endif -%}
{% endmacro %}