Add page-based content with Nunjucks variables

[Brixy]

Hi all!

On a page basis we want to add (optional) ‘meta data’–like page headers, page footers, <aside /> etc.

Global Nunjucks variables are not supported. So I came up with the code below. meta.njk needs to be added multiple times.

As we are planning a rather large-scale eleventy project I would like to ask you: Is this the way to go, or would you suggest another method?

Front matter for pageHeader and pageFooter is not an option because the contents are too complex.

Thank you very much in advance!

Content file:

---
title: Test page
---
{%- set pageHeader -%}
My page header 1 content.
{%- endset -%}
{% include "meta.njk" %}

{%- set pageHeader -%}
My page header 2 content.
{%- endset -%}
{% include "meta.njk" %}

<!-- page contents -->

{%- set pageFooter -%}
My page footer content.
{%- endset -%}
{% include "meta.njk" %}

Partial meta.njk:

{% if pageHeader %}
<header class="page-header">
  {{ pageHeader | safe }}
</header>
{% endif %}

{% if pageFooter %}
<footer class="page-footer">
  {{ pageFooter | safe }}
</footer>
{% endif %}

[pdehaan]

I think support for Nunjucks globals was added in #1060 (which will ship w/ Eleventy v1.0). 🎉

[pdehaan]

I'm not sure if I follow 100%, but I don't know if that will work (although admittedly I haven't tried building it locally yet). I think my main concerns would be that pageHeader gets set, and then added to the page using {% include "meta.njk" %}. Then we overwrite the local pageHeader variable w/ page header 2 content and add another <header class="page-header">{{ pageHeader | safe }}</header> to the DOM. So far so good, but you'll have two <header class="page-header">s on your page. But now when you get to the footer, I assume your pageHeader variable from earlier is still in scope, so your footer might have the following:

<header class="page-header">
  My page header 2 content.
</header>

<footer class="page-footer">
  My page footer content.
</footer>

Although now you've made me very curious whether I guessed correctly, so I'll try building a small proof of concept locally.

---

---
title: Test page
---
{%- set pageHeader -%}
  My page header 1 content.
{%- endset -%}
{% include "meta.njk" %}

{%- set pageHeader -%}
  My page header 2 content.
{%- endset -%}
{% include "meta.njk" %}

<!-- page contents -->

{%- set pageFooter -%}
  My page footer content.
{%- endset -%}
{% include "meta.njk" %}

[pdehaan]

You'd either have to clear the pageHeader and pageFooter after using them {% set pageHeader = false %} so they don't leak into the footer area, or else create separate "metaHeader.njk" and "metaFooter.njk" include files to avoid leaking variables. Or even separate layout files for different page types; it's hard to tell without seeing the site source.

[Brixy]

Excellent! Thank you very much for you support and your estimation.

Using seperate "metaHeader.njk" and "metaFooter.njk" partials is a practical solution.

I had thought of using macros, shortcodes and and methods; but your comments encourage me to use the partial method.

Thanks again.

[pdehaan]

Yeah, definitely a few different approaches that could work…
I imagine even paired shortcodes, like:

{% pageheader %}
  My page header 1 content.
  My page header 2 content.
{% endpageheader %}

Or Nunjucks blocks is probably a solution:

{% block pageheader %}
  My page header 1 content.
  My page header 2 content.
{% endblock %}

{% block pagecontent %}
  <main>
	<p>Some stuff here</p>
  </main>
{% endblock %}

{% block pagefooter %}
  My page footer content.
{% endblock %}

[Brixy]

Yeah, a simple paired shortcode is a good alternative.

The block solution seems to be too Nunjucks-specific.

Choosing between a shortcode or Eleventy 1.0’s new global variables seems to be a 50/50 choice ;-)

Thank you, Peter.

[pdehaan]

Here was my little proof of concept on Nunjucks blocks and paired shortcodes:

---
# ./src/index.njk
title: Homepage, but with blocks!
---

{% extends "layouts/base.njk" %}

{% block pageheader %}
  {% pageheader %}
    <p>Page header 1</p>
    <p>Page header 2</p>
  {% endpageheader %}
{% endblock %}

{% block pagefooter %}
  {% pagefooter %}
    <p>Page footer 1</p>
  {% endpagefooter %}
{% endblock %}

{% block pagecontent %}
  <p>I am some content.</p>
{% endblock %}

<!-- ./src/_includes/layouts/base.njk -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <style>
    .page-header {
      background-color: salmon;
      padding: 1em;
      margin-bottom: 0.5em;
    }
    .page-footer {
      background-color: gold;
      padding: 1em;
      margin-bottom: 0.5em;
    }
  </style>
</head>
<body>

  {% block pageheader %}{% endblock %}
  
  <main>
  {% block pagecontent %}{% endblock %}
  </main>

  <aside>
  {% block pagefooter %}{% endblock %}
  </aside>

</body>
</html>

OUTPUT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Homepage, but with blocks!</title>
    <style>
      .page-header {
        background-color: salmon;
        padding: 1em;
        margin-bottom: 0.5em;
      }
      .page-footer {
        background-color: gold;
        padding: 1em;
        margin-bottom: 0.5em;
      }
    </style>
  </head>
  <body>
    <header class="page-header">
      <p>Page header 1</p>
      <p>Page header 2</p>
    </header>

    <main>
      <p>I am some content.</p>
    </main>

    <aside>
      <footer class="page-footer">
        <p>Page footer 1</p>
      </footer>
    </aside>
  </body>
</html>

[Brixy]

Thank you. That’s a great reference.

Apart from the technical point of view maybe you have to decide between a more content-ish approach (shortcode) or a template-ish approach (partial/block).