Over a million developers have joined DZone.

Automatic Breadcrumb for Jekyll on GitHub Pages

Learn how to use breadcrumb plugins to use on GitHub pages together with jekyll's safe mode to improve software development.

· DevOps Zone

The DevOps Zone is brought to you in partnership with Sonatype Nexus. The Nexus Suite helps scale your DevOps delivery with continuous component intelligence integrated into development tools, including Eclipse, IntelliJ, Jenkins, Bamboo, SonarQube and more. Schedule a demo today

There are many Breadcrumb Plugins out there but I wanted something that works on GitHub Pages together with jekyll’s safe mode.


Assuming you have the following static page URL structure for all pages (you will need to disable the breadcrumb inside your blog pages).
UPDATE 2015-05-06: You can use markdown files now too.

/page1/index.html
/page1/subpage1/index.md
/page2/index.html
...

You can use the following liquid statement which will render a breadcrumb with url and text from the frontmatter. Make sure all your pages have page.breadcrumb set to the value you want to be shown inside the breadcrumb element.

Example page with frontmatter:

---
layout: default
title: My Java-Page
breadcrumb: Java-Page
---

<div class="container">
  <div class="row">
    <div class="col-md-12">
      peace yo!
    </div>
  </div>
</div>

Now here is the code for the breadcrumb

<ol class="breadcrumb">
<li><a href="{{ site.baseurl }}/">Home</a></li>
{% capture page_url_without_index_html %}{{ page.url | remove: "/index.html" }}{% endcapture %}
{% assign splitted_url_parts = page_url_without_index_html | split: '/' %}
{% capture forLoopMaxInt %}{{ splitted_url_parts.size | minus:1 }}{% endcapture %}
{% for i in (1..forLoopMaxInt) %}
    {% capture current_breadcrumb_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/index.html{% endcapture %}
    {% capture current_breadcrumb_md_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %}
    {% capture next_prepender %}{{next_prepender}}/{{ splitted_url_parts[i] }}{% endcapture %}
    {% for breadcrumb_page in site.pages %}
        {% if current_breadcrumb_url == breadcrumb_page.url or current_breadcrumb_md_url == breadcrumb_page.url  %}
            <li {% if i == forLoopMaxInt %}class="active"{% endif %}>
                {% capture breadcrumb_page_page_url_without_index_html %}{{ breadcrumb_page.url | remove: "index.html" }}{% endcapture %}
                <a href="{{ site.baseurl }}{{breadcrumb_page_page_url_without_index_html}}">{{breadcrumb_page.breadcrumb}}</a>            </li>
        {% endif %}
    {% endfor %}
{% endfor %}
</ol>


The output will be a breadcrumb for bootstrap. You will need to style the html with css.

<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/page1/">Foo</a></li>
  <li class="active"><a href="/page1/subpage1/">Bar</a></li>
</ol>

You can see a full demo project here: github.com/comsysto/jekyll-breadcrumb-for-github-pages/

The DevOps Zone is brought to you in partnership with Sonatype Nexus. Use the Nexus Suite to automate your software supply chain and ensure you're using the highest quality open source components at every step of the development lifecycle. Get Nexus today

Topics:
architects ,devops ,github ,markdown

Published at DZone with permission of Comsysto Gmbh, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}