Breadcrumbs in Jekyll

How to setup breadcrumbs for posts in Jekyll based in categories/URL-structure

It’s possible to generate breadcrumb path in Jekyll based on the URL-structure. I got help from JoostS’s answer on the StackOverflow question good ways to implement breadcrumbs on a Jekyll site. See code below:

{% assign crumbs = page.url | remove:'/index.html' | split: '/' %}

<a href="/">Home</a>
{% for crumb in crumbs offset: 1 %}
  {% if forloop.last %}
    / {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
  {% else %}
    / <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
  {% endif %}
{% endfor %}

One problem with Jekyll 3.X is that category pages is not dynamically created with using plugins, e.g needs to manually be added. Because of this I removed links to the category-pages. And since I don’t want the country category “en” to be a path in the breadcrumb, this is excluded via remove:’/en’

{% assign crumbs = page.url | remove:'/en' | split: '/' %}

{% for crumb in crumbs offset: 1 %}
  {% if forloop.first %}
      <span class="first-crumb">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</span>
  {% elsif forloop.last %}
  {% else %}
      <span class="other-crumbs">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</span>
  {% endif %}
{% endfor %}

Just add the code under “_layouts” and “posts.html”.

Dela på Facebook