How to implement breadcrumbs on a Jekyll site with nested categories
Hierarchical categories and breadcrumbs
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
Breadcrumb code
The breadcrumbs code should be placed at /_includes/breadcrumbs.html
:
{% assign categories = include.path | split:"/" %}
{% assign filename_without_extension = categories | last | split:"." | first %}
{% if categories contains "_posts" or filename_without_extension == "index" %}
{% comment %} posts are like /docs/python/_posts/2016-06-06-foobar.md {% endcomment %}
{% comment %} OR pages are index.* i.e.: like /docs/python/index.md or index.html {% endcomment %}
{% assign categories = categories | pop %}
{% endif %}
{% assign route="" %}
<a href="{{ '/' | absolute_url }}">Home</a>
{% for category in categories %}
<span class="prompt">>></span>
{% assign route = route | append: '/' | append: category %}
{% if forloop.last %}
{% if include.title %}{{include.title}}{% else %}{{ category }}{% endif %}
{% else %}
<a href="{{ route | absolute_url }}">{{ 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/about | home > about | docs/about.md |
/docs/science/my_title | home > docs > science > my title | docs/science/_posts/2016-06-08-my_title.md |
_config.yml
with permalink: /:title/
You can see this in action in the jekyll-skeleton example website.
- Multilingual Jekyll Without PluginsMay 8, 2017
- Host a Jekyll Website With Pretty Urls In Amazon S3 and CloudfrontApril 24, 2017
- Get A List Of Categories Based In Subfolders In JekyllMarch 3, 2017
- 5 Steps To Add Bootstrap 4 To Jekyll The Right WayFebruary 27, 2017
- Automated Deployment Of Jekyll Websites To Github Pages With A Git Push To GithubNovember 8, 2016
- How To Use Bower Scss With JekyllJune 18, 2016
- How to implement breadcrumbs on a Jekyll site with nested categories
- How To Handle Adsense In A Jekyll Development EnvironmentJune 6, 2016
- How To Prevent Content Displaying In A Jekyll Development EnvironmentJune 6, 2016
Articles
Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 . Terms and Policy.
Powered by SimpleIT Hugo Theme
·