11ty/nunjucks - templating a for loop to be extended to multiple layouts but use different data

Question

I am creating an eleventy scaffolding project to learn more about SSG, this is my first time using an SSG so I am new to the templating stuff with nunjucks, etc.

What I am trying to build: I want to create a template for a landing page/showcase that can be re-used but display different data within a for loop.

What I have:

site.json

{
  "showcase": [
    {
      "title": "explore docs",
      "url": "#"
    },
    {
      "title": "visit github repository",
      "url": "https://github.com/ExampleUser/ExampleRepo"
    }
  ],
  "404showcase": [
    {
      "title": "return home",
      "url": "/"
    }
  ]
}

pageShowcase.njk

Currently, I am just using an if statement to control what data set to use but if I ever extend this to other layouts and use a third or fourth set of data this will become really repetitive adding in a new elseif for every new set of data

{%- set pageTitle %}{% if title %} {{title}} {% else %} {{ site.title }} {% endif %}{% endset -%}
{%- set pageDescription %}{% if description %} {{ description }} {% else %} {{ site.description }} {% endif %}{% endset -%}

<!-- Showcase -->
  <div class="container">
    <div>
      <div>
        <h1>{{ pageTitle }}</h1>
        <p>{{ pageDescription }}</p>
        <div class="navbar" id="navmenu">
        <ul class="navbar">
          {% if defualt %}
            {% for item in site.showcase %}
            <li>
              <a href="{{ item.url }}" class="nav-link">{{ item.title}}</a>
            </li>
            {% endfor %}
          {% else %}
            {% for item in site.404showcase %}
            <li>
              <a href="{{ item.url }}" class="nav-link">{{ item.title}}</a>
            </li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
      </div>
      <!-- <img src="assets/img/#.svg" alt="temp"> -->
    </div>
  </div>
</section>

index.njk

---
layout: base
defualt: true
---
<!-- include pageShowcase -->
{% include "partials/pageShowcase.njk" %}

<!-- home page content -->
<section>
  <div class="container">
    <main>
      {{content | safe}}
    </main>
  </div>
</section>

404.njk

---
title: "404: Page Not Found"
description: "It looks like the page doesn not exist"
defualt: false
---

<!DOCTYPE html>
<html lang="{{ lang }}">
<!-- include head -->
{% include "partials/head.njk" %}
<body>
  <!-- use pageShowcase for 404 page -->
  {% include "partials/pageShowcase.njk" %}

</body>
</html>

This is the best I could come up with on my own, but I feel like there has to be a better way without re-writing the same code over and over.

Appreciate any help I can get on this one.

11ty/nunjucks - templating a for loop to be extended to multiple layouts but use different data

0 Answers0