📅 Published on: October 25, 2025
🧐 Subject: JustTheDocsCeption
I more or less spent the entire afternoon and evening trying to figure out how to modularize the whole table of contents stuff on index pages as I wasn’t a fan of the default. Or well, I could sense it needed extra features.
It was quite a
battle.
If you go on any category page (bar software as I’m still pondering on that one), you will see a very nice table of contents with sorting options. I’m into modularization a lot. If I can make something repetitive modular, I will do my best to do it, even if sometimes its kind of like scratching my right ear with my left hand.
In this case it was similar, but it was more like scratching my right ear with my right hand, only that the arm wraps around my head first.
The end result was phenomenal though, as now I can just slap a tiny snippet on each index, and modify it to my likeing.
{% include ipage.html
area='hardware'
main='type'
secondary='device'
header='mods'
%}
What happens here is all the pages containing /hardware/ in the uri will have the type and the device displayed in a list that will just say mods: prior. And as per usual, I took it a step further, the secondary attribute being allowed to have more than 1 item even though I do not have a usecase for it as of now.
All it took was to combine javascript with Liquid in the monstrosity bellow 👌
{% for post in sorted_posts %}
{% if post.path contains include.area and post[main] %}
<li data-{{ main }}="{{ post[main] }}"
{% if secondary %}
{% for opt in secondary %}
data-{{opt}}="{{ post[opt] | downcase }}"
{% endfor %}
{% endif %}
>
<a href="{{ post.url }}">
{{ post[main]}}
{% if secondary %}
➝
{% for sec in secondary %}
{{post[sec]}}{% unless forloop.last %}, {% endunless %}
{% endfor %}
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
Thank you for reading 😎👉
Some minutes into making this article edit: spent a bit of time figuring out how to show the liquid code, since it kept rendering, turns out it just had to be wrapped in raw tags.