Generate content from data

Eleventy have feature called Global Data Files where you can generate contents with JSON files or JS to our template

You can see inside the folder site/_data/

Lets take a look our showcase preview page

{%- for show in showcase -%}
            <article class="card">
      {% if show.src %}
      <a href="{{ show.url }}" aria-hidden="true">
        {% Img show.src, "", [1080], "preview__sub-img" %}
      </a>
{% endif %}
    <div class="card__content">
        <h2 class="card__heading text-size-3">
            <a href="{{ show.url }}">{{ show.label }}</a>
        </h2>
    </div>
</article>
        {%- endfor -%}

We just called the data collection with showcase when exactly same with JSON file showcase.json.

We just put the data direct into array items inside the JSON

[
    {
        "src": "src/images/screens/screen3.jpg",
        "label": "Home Page",
        "url": "/"
    },
    {
        "src": "src/images/screens/screen3.jpg",
        "label": "About Page",
        "url": "/about"
    },
    {
        "src": "src/images/screens/screen2.jpg",
        "label": "Blog Page",
        "url": "/blog"
    }
]

Feature Section inside landing page

We also put the data inside our feature section contents.

<div id="gold-features" class="wrapper region">
    <!--  -->
    <div class="auto-grid">
    {% for feature in features %}
            <div class="service-item w-stack">
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.description }}</p>
            </div>
    {% endfor %}
    </div>
</div>

[
    {
        "title": "Saving The Flowers Farm",
        "description": "Saving thousands of rare flowers into one place"
    },
    {
        "title": "Feature Title 1",
        "description": "Placeat vel itaque perspiciatis sed repellat qui nihil recusandae doloremque aperiam necessitatibus aspernatur"
    },
]