DEV Community

Deniz Akşimşek
Deniz Akşimşek

Posted on • Originally published at denizaksimsek.com on

1

Eleventy — Using A Layout As A Partial (The Most Useful Things...)

Update 2021-02-08: This article mentions things about my website that are no longer true. The technique explained, however, still works fine.

On this website, I have both a Notes page and pages for each individual note. I wanted to use the same template for both, but I ran into an issue: accessing frontmatter data.

In Eleventy, frontmatter data for the current page is merged into the data cascade and made available on the template global scope, whereas collection items have a data property. This made it hard to write templates that work with both the page object and collection items.

Solution

[...] the most useful things are usually cloaked in an air of nonchalance, even in documentation.

YouTube user Bantu Tu, commenting on Missing Semester: Lecture 3: Editors (vim) (2020)

The solution to my problem was right there in the Eleventy docs, staring at me, its description phrased such that it couldn't possibly be of use to anyone.

Also getCollectionItem

For completeness, a getCollectionItem filter is also included that fetches the current page from a collection.

Eleventy docs

With this filter, all my problems were solved. I prepended the following to my note.njk template (similarly for post.njk):

{%set item = note | d(collections.note | getCollectionItem(page))%}
Enter fullscreen mode Exit fullscreen mode

When using note.njk as a partial, the caller assigns the variable note. When using it as a layout, no such variable will exist and the default (d()) will be used.. The beauty of this configuration is that in both situations, item will be a collection item with a data property.

One caveat is that because I'm using this as a partial, I can't use frontmatter, and therefore can't set a layout for my layout (maybe I could use template data files...). Instead, I use Nunjucks' builtin template inheritance.

{%if not note%}
{%extends "base.njk"%}
{%endif%}
...
{%block content%}
{%set item = note | d(collections.note | getCollectionItem(page))%}
...
{%endblock%}
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay