Looping Through Jekyll Collections
2022-08-12
I recently needed to add a couple new items to my wife's personal recipe website (cookingwith.casa) which I hadn't touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each collection
by hand on the main homepage[^1].
Not so good.
Of course, this wasn't difficult at all to fix. Now everything is much more "hands free" moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it's my blog - so I'll do what I want!
Looping Our Collections
We want Jekyll to make things as streamlined as possible for us. This means that if I decide to add a new collection it will automatically render it along the others on the homepage.
Work smart not hard!
Let's take a look at the bare-bones collections loop:
{% for collection in site.collections %}
<!-- Our code goes here -->
{% endfor %}
Then we need to include an if
statement to avoid pulling in standard post
items (or leave this in if that is desired):
{% for collection in site.collections %}
{% if collection.label != 'posts' %}
{% endif %}
{% endfor %}
Now for my specific use case, we want to display each collection label and then list its corresponding items below that label (see the site[collection.label]
for reference)
{% for collection in site.collections %}
{% if collection.label != 'posts' %}
<h2>{{ collection.label }}</h2>
<ul class="recipe-list">
{% for item in site[collection.label] %}
<li>
<a href="{{ item.url }}">{{ item.title }}</a>
</li>
{% endfor %}
</ul>
<hr>
{% endif %}
{% endfor %}
That's it! Now if I plan to add any new collections down the line, I just need to include it in the _config.yml
file and I'm set. The homepage will take care of the rest once rendered.
Enjoy looping through your Jekyll collections!
Refs
- Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane!