List Subcategories in GitHub Pages

Question

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?

Answer 1

See simpyll.com for demo

See github for website code

assign var page_depth as the current pages depth using the path '/' as a count variable

{% assign page_depth = page.url | split: '/' | size %}

assign var page_parent as the slug of the last directory housing 'index.md'

{% assign page_parent = page.url | split: '/' | last %}

loop through every page in the website

{% for node in site.pages offset:1 %}

skip website root

{% if node.url == '/' %}
{{ continue }}
{% else %}

remove backslashed from each page in website

{% assign split_path = node.url | split: "/" %}

assign var node_last for each page in website

{% assign node_last = split_path | last %}

assign var node_parent as the slug of the last directory housing 'index.md' for each page in website

{% assign node_parent = node.url | remove: node_last | split: '/' | last %}

assign node_url for each page in website

{% assign node_url = node.url %}

loop through each slug in each page path in website

{% for slug in split_path offset:1 %}

assign var slug as the name of each slug therefore giving it a name

{% assign slug = slug %}

assign slug_depth with a forloop.index

{% assign slug_depth = forloop.index %}

close for

{% endfor %}

obtain sub-directories for every page in website comparing depth and parent of current page to that of every other page in website

{% if slug_depth == page_depth and page_parent == node_parent %}<li><a href="{{ node_url }}">{{ slug }}</a></li>{% endif %}

obtain sub-directories for root (which we skipped early in this script). we can use depth alone to define this.

{% if slug_depth == 1 and page.url == '/' and slug != 'search.json' and slug != 'sitemap.xml' %}<li><a href="{{ node_url }}">{{{slug}}</a></li>{% endif %}

close if and for

{% endif %}
{% endfor %}

altogether:

  {% assign page_depth = page.url | split: '/' | size %}
  {% assign page_parent = page.url | split: '/' | last %}
  {% for node in site.pages offset:1 %}
  {% if node.url == '/' %}
  {{ continue }}
  {% else %}
  {% assign split_path = node.url | split: "/" %}
  {% assign node_last = split_path | last %}
  {% assign node_parent = node.url | remove: node_last | split: '/' | last %}
  {% assign node_url = node.url %}
  {% for slug in split_path offset:1 %}
  {% assign slug = slug %}
  {% assign slug_depth = forloop.index %}
  {% endfor %}
  {% if slug_depth == page_depth and page_parent == node_parent %}
  <li><a href="{{ node_url }}">{{ slug }}</a></li>
  {% endif %}
  {% if slug_depth == 1 and page.url == '/' and slug != 'search.json' and   slug != 'sitemap.xml' %}
  <li><a href="{{ node_url }}">{{{slug}}</a></li>
  {% endif %}
  {% endif %}
  {% endfor %}

Answer 2

As it was suggested in my deleted answer, I post an improved version of my answer of your previous question. I also add information to answer your new questions (also deleted) :

Thanks for the reply. This almost works, but it's got a few problems. Most importantly, it doesn't support subcategories with the same name (like animals->bats and baseball->bats). It also lists every subcategory and every post under a particular category. I only want to list the subcategories, not the posts. Is there a way to modify your approach to meet those requirements? – Kevin Workman yesterday

Modify your _config.yml accordingly

collections:
    animals:
        output: true
        mammals:
            output: true
            cats:
                output: true
            dogs:
                output: true
        reptiles:
            output: true
            lizards:
                output: true

then created the structure:

mkdir -p _animals/reptiles/lizards
mkdir -p _animals/mammals/cats
mkdir _animals/mammals/dogs

add your md files and all index.html you need to make the list you want. which will index items with filter. From the top directory, your animals collection should look like this (with index.html in each folder) :

cleaner

root/
└── _animals/
    ├── index.html
    ├── mammals
    │   ├── cats
    │   │   ├── housecat.md
    │   │   └── tiger.md
    │   ├── dogs
    │   │   ├── doberman.md
    │   │   └── poodle.md
    │   └── index.html
    └── reptiles
        └── lizards
            ├── chameleon.md
            └── iguana.md

new you can list only subcategories with or without going deeply (with an optional parameters) _includes/list_subcategories.html

 {% assign animals = site.animals| sort:'title' %}
 {% assign from = page.url | remove: '/index.html' %}
 {% assign deep = (page.url | split: '/' | size) + 1 %}
 {% for animal in animals %}
 {% assign d = animal.url | remove: '/index.html' | split: '/' | size %}
 {% if animal.url != page.url and animal.url contains from and animal.url contains "index" and (include.dig or deep == d) %}
 <a  href={{ animal.url | prepend: site.baseurl }}>{{animal.title}}</a>
 {% endif %}
 {% endfor %}

improved similarly to list animals _includes/list_animals.html

{% assign animals = site.animals| sort:'title' %}
{% assign from = page.url | remove: '/index.html' %}
{% assign deep = (page.url | split: '/' | size) + 1 %}
{% for animal in animals %}
{% assign d = animal.url | remove: '/index.html' | split: '/' | size %}
{% if animal.url contains "index" or animal.url == page.url %}
{% else %}
    {% if animal.url contains from  and (include.dig or deep == d) %}
    <a  href={{ animal.url | prepend: site.baseurl }}>{{animal.title}}</a>
    {% endif %}
{% endif %}
{% endfor %}

list all subcategories and all animals in animals/index.html :

---
title: animals
---
{% include list_subcategories.html dig=true %}
<hr>
{% include list_animals.html dig=true %}

For example, to list all mammals and subcategoeries in animals/mammals/index.html :

---
title: animals
---
{% include list_subcategories.html %}
<hr>
{% include list_animals.html %}

Finally the generated structure should look like this (with some more index.html):

cleaner

root/
├─ _animals/
│   └─── ...
└── _site
    └── animals
        ├── index.html
        ├── mammals
        │   ├── cats
        │   │   ├── housecat.html
        │   │   └── tiger.html
        │   ├── dogs
        │   │   ├── doberman.html
        │   │   └── poodle.html
        │   └── index.html
        └── reptiles
            └── lizards
                ├── chameleon.html
                └── iguana.html

it solves your question. I changed from taxonomy to dig, but you could also have distinguished between animals->bats and baseball->bats by putting taxonomy="baseball/bats" or taxonomy="animals/bats".