Automatic Jekyll Breadcrumb for GitHub Pages
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
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/
First of all, thank you for the code. Secondly, small problem, rsrs, index.html still shows on the links, even with the correct structure of permalinks. =\
If you could fork this repository and commit your changes, so that I can see what exactly the problem is, I will fix it 🙂
https://github.com/comsysto/jekyll-breadcrumb-for-github-pages/
greenwoodbr, thank you for the fast reply! rsrs
actually, the demonstration itself has the problem:
https://comsysto.github.io/jekyll-breadcrumb-for-github-pages/foo/bar/index.html
Just click in any of these links on the breadcrumb and you see that the page returns the index.html in the end of the URL.
Ok I see, I fixed it and now the Breadcrumb renders without /index.html at the end.
I hope now it suits you 🙂
Really cool man! Works like a charm. You rock!
Thanks. And I hope you rock your website with the new breadcrumb! 🙂
It does, you can see the progress here:
https://docs.brshift.com/e-lojas/extensoes/gateways-de-pagamento/pagseguro/
I will recommend your plugin to my friends.
looks nice! 🙂
Thank you for this nice bit of code, it works well.
There is an issue I discovered:
if breadcrumbs are placed at top and bottom of page, bottom breadcrumbs are empty.
This is due to next_prepender not being initialized the first time through.
The fix was to include this line @ line 7: {% assign next_prepender = “” %}
Works like a champ now!
Thanks,
Jim
Thanks for your suggestion 🙂
I added a footer breadcrumb to the demo page but it doesn’t seem to work with you fix.
Can you check the code: https://github.com/comsysto/jekyll-breadcrumb-for-github-pages/blob/gh-pages/_includes/footer.html#L30
You can see it here: https://comsysto.github.io/jekyll-breadcrumb-for-github-pages/foo/index.html