Get A List Of Categories Based In Subfolders In Jekyll

Overview

In Jekyll, posts located in subfolders, automatically get its parents folders as the post categories.

For example, lets consider the following directory structure that will be useful in the rest of the post:

├── about.md
├── _config.yml
├── index.md
├── _posts
│   └── 2017-03-03-welcome-to-jekyll.markdown
├── theory
│   ├── index.md
│   ├── testing
│   │   ├── index.md
│   │   └── _posts
│   │       └── 2016-08-08-when-to-test-or-write-code-first-in-web-development.md
│   └── web-development
│       ├── index.md
│       └── _posts
│           └── 2016-08-17-authorization-versus-authentication-in-web-apps.md
└── web
    ├── index.md
    ├── _posts
    │   ├── 2016-11-10-automatically-tweet-new-blog-posts-based-in-rss.md
    │   └── 2016-12-09-colors-palettes-for-web-design.md
    ├── seo
    │   ├── index.md
    │   └── _posts
    │       └── 2017-01-26-essential-seo-tips-and-techniques-from-trusted-sources.md
    └── servers
        ├── apache
        │   ├── index.md
        │   └── _posts
        │       └── 2017-01-07-protect-web-directories-with-http-basic-authentication-in-apache-server.md
        └── index.md

The post /web/seo/_posts/2017-01-26-essential-seo-tips-and-techniques-from-trusted-sources.md will be automatically assigned by Jekyll the following categories: ["web", "seo"].

There are other solution to build a list of categories, keeping a data file with the structure, the downside of this approach is that you will always have to keep in sync with your directory structure or they will be left out of the category list.

Developing a solution capable to get the categories from posts full path, makes it possible to detect new categories at each build, without having you to enter them manually.

In this solution we will create an include where you can specify which level of the path you want, so for example if you want the categories at the first position (level 0), then you will get ["web", "theory"].

But if you want the subcategories of web, you will get ["seo", servers].

This way it is very easy to have a layout with this snippet included, and automatically generate the subcategories list in each subcategory index.md page.

Developing process

If we don’t have yet, we create the _includes folder and a subcategories.html file.

In _includes/subcategories.html we will define a categories liquid array that will hold our categories:

{% raw %}
{% assign categories = "" | split: '/'%}
{% endraw %}

Then we iterate through all posts

{% raw %}
{% assign categories = "" | split: '/'%}
{% for page in site.pages %}
{% assign page_cats = page.dir | split:'/' %}
{% if page_cats[1] == site.docs_dir %}
{% assign category = page_cats[2] | strip %}
{% unless category == "" %}
{% unless categories contains category %}
{% assign categories = categories | push: category %}
{% endunless %}
{% endunless %}
{% endif %}
{% endfor %}
{% endraw %}