Edit: I've created a repository here that tests jibe's answer below. I just end up getting a blank page when I visit /animals
, so any help is appreciated!
This is a follow-up to this question: Hierarchical Categories in GitHub Pages
In that question, I found out how to list the posts of a particular hierarchical category. Now I'm trying to figure out how to list the subcategories of a particular hierarchical category.
I'm using Jekyll on GitHub pages, and I want to have hierarchical categories like this:
- animals -> mammals -> cats -> _posts -> housecat.md, tiger.md
- animals -> mammals -> dogs -> _posts -> poodle.md, doberman.md
- animals -> reptiles -> lizards -> _posts -> iguana.md, chameleon.md
I'd like users to be able to visit /animals
and see a listing of the subcategories (mammals
and reptiles
). Then if they go to /animals/mammals
, they'd see cats
and dogs
listed as subcategories.
I'm currently doing this manually by putting an index.html
file inside each subcategory. But that makes updating things much more complicated than it probably should be.
I've tried following this answer, but that's meant for single tags, not multiple categories.
The catch is that any particular category might not be unique, so I can have stuff like this:
- animals -> mammals -> bats -> _posts -> vampire.md, fruit.md
- sports -> baseball -> bats -> _posts -> wiffle.md, teeball.md
I'd also like to be able to define frontmatter attributes in the subcategories, maybe in the index.html file of each? For example the animals->mammals->bats->index.html
file would contain a frontmatter variable thumbnail
with a value of "VampireBat.jpg"
, and sports->baseball->bats->index.html
would have a thumbnail
of "YellowWiffleBat.png"
. I'd like to be able to access these variables from the parent level (to show a thumbnail and a link to the subcategory).
My first thought was to access the subcategories directly, like this:
{% for mammalType in site.categories.animals.mammals %}
<p>{{ mammalType.title }}</p>
<img src="(( mammalType.thumbnail }}" />
{% endfor %}
Which I'd generalize using the categories from the page itself:
{% for subcategory in page.categories %}
<p>{{ subcategory.title }}</p>
<img src="(( subcategory.thumbnail }}" />
{% endfor %}
But that doesn't work at all, since site.categories.whatever
is a list of all of the posts in that category, ignoring any hierarchical information.
Is there a better way to approach this other than doing it manually?