What are some good ways to implement breadcrumbs on a Jekyll site?

Question

I\'m aware that there are single-level breadcrumbs in http://raphinou.github.com/jekyll-base/ but I\'m looking for some good ways to have breadcrumbs on a Jekyll sit

Answer 1

This should give breadcrumbs at any depth (with a caveat, see end). Unfortunately, the Liquid filters are fairly limited, so this is an unstable solution: any time /index.html appears, it is deleted, which will break URLs that have a folder that starts with index.html (e.g. /a/index.html/b/c.html), hopefully that won't happen.

{% capture url_parts %} {{ page.url | remove: "/index.html" | replace:'/'," " }}{% endcapture %}
{% capture num_parts %}{{ url_parts | number_of_words | minus: 1 }}{% endcapture %}
{% assign previous="" %}

 {% if num_parts == "0" or num_parts == "-1" %}
  
home   
 {% else %}
  
home » 

  {% for unused in page.content limit:num_parts %}
   {% capture first_word %}{{ url_parts | truncatewords:1 | remove:"..."}}{% endcapture %}
   {% capture previous %}{{ previous }}/{{ first_word }}{% endcapture %}

   
{{ first_word }} » 

   {% capture url_parts %}{{ url_parts | remove_first:first_word }}{% endcapture %}
  {% endfor %}
 {% endif %}

How it works is:

• separates the URL, ignoring index.html (e.g. /a/b/index.html becomes a b, /a/b/c.html becomes a b c.html),
• successively takes and removes the first word of url_parts, to iterate through all but the last word (e.g. it goes a b c.html -> (a, b c.html) -> (b, c.html); then we stop).
• at each step, it makes the breadcrumb link using the current first_word, and previous which is all the previous directories seen (for the example above, it would go "" -> "/a" -> "/a/b")

NB. the page.content in the for loop is just to give something to iterate over, the magic is done by the limit:num_parts. However, this means that if page.content has fewer paragraphs than num_parts not all breadcrumbs will appear, if this is likely one might define a site variable in _config.yml like breadcrumb_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] and use site.breadcrumb_list as the placeholder instead of page.content.

Here is an example (it doesn't use precisely the same code as above, but it's just a few little modifications).