How to generate a list with links for each category when using hierarchical categories in Jekyll

Overview

One of the ways to structure content in a Jekyll environment is to put posts in subdirectories, where each subdirectory becomes a category of the post.

For example, the post 2016-06-08-my_title.md in this directory structure /docs/science/_posts/2016-06-08-my_title.md automatically gets the categories docs and science.

.
└── docs
    ├── index.md
    └── science
        ├── index.md
        └── _posts
            └── 2016-06-08-my_title.md

Then a breadcrumb included in each post/category layout, can automatically generate a link to each path of the structure

The breadcrumbs code should be placed at /_includes/breadcrumbs.html:

    {% assign categories = ""%}
    {% if include.path contains "posts" %}
    {% comment %} posts are like /docs/python/_posts/2016-06-06-foobar.md {% endcomment %}
    {% assign categories = include.path | split:"/" | pop %}
    {% else %}
    {% comment %} pages are like /docs/python/index.md {% endcomment %}
    {% assign categories = include.path | split:"/" | pop  %}
    {% endif %}
    {% assign route="" %}
	
    <a href="/">Home</a>
    {% for category in categories %}
    <span class="prompt">>></span>
    {% assign route = route | append: '/' | append: category %}
    {% if forloop.last and category == "_posts" %}
    {{ include.title }}
    {% elsif forloop.last %}
    {{ category }}
    {% else %}
    <a href="{{ route }}">{{ category }}</a> 
    {% endif %}
    {% endfor %}

Posts layouts

Each layout used in category pages and posts should include the breadcrumbs.html code, with the current page path and title parameters.

In /_layouts/post.html:

..
{% include breadcrumbs.html path=page.path title=page.title %}
..

Output

The previous scheme would generate the following breadcrumb for each case.

URL Generated Breadcrumb Served Filename
/ home index.html
/docs home > docs docs/index.md
/docs/science home > docs > science docs/science/index.md
/docs/science/my_title * home > docs > science > my title docs/science/_posts/2016-06-08-my_title.md
Uruguay
Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.

Articles in this category

How To Handle Adsense In A Jekyll Development Environment How To Prevent Content Displaying In A Jekyll Development Environment How to implement breadcrumbs on a Jekyll site with nested categories How To Use Bower Scss With Jekyll Automated Deployment Of Jekyll Websites To Github Pages With A Git Push To Github How To Add Bootstrap 4 To Jekyll The Right Way Having Pretty Urls In A Jekyll Website Hosted In Amazon S3 Multilingual Jekyll Without Plugins