What are some good ways to implement breadcrumbs on a Jekyll site? -
i'm aware there single-level breadcrumbs in http://raphinou.github.com/jekyll-base/ i'm looking ways have breadcrumbs on jekyll site when directories depth of 4 or 5 levels.
(yes, i'm aware jekyll blogging engine , perhaps shouldn't use general purpose website, many directory levels. i'm aware of http://octopress.org haven't found suitable plugin.)
based heavily on http://forums.shopify.com/categories/2/posts/22172 came following jekyll layout breadcrumbs, variation of can see in action @ http://crimsonfu.github.com/members/pdurbin . should see breadcrumbs "home » members »" @ top.
here's layout. yes, it's ugly. haven't studied liquid much. can suggest better way?
<html> <head> <title>{{ page.title }}</title> <style type="text/css"> #bread ul { padding-left: 0; margin-top: 2px; margin-bottom: 2px; } #bread ul li { display: inline; font-size: 70%; } </style> </head> <body> <div id="bread"> <ul> {% assign url = {{page.url}} %} {% assign delimiter = '/' %} {% capture allparts %}{{ url | replace: delimiter, ' ' }}{% endcapture %} {% capture myfirstword %}{{ allparts | truncatewords: 1 | remove: '...' }}{% endcapture %} {% capture minusfirst %}{{ allparts | replace_first: myfirstword, '' }}{% endcapture %} {% capture mysecondword %}{{ minusfirst | truncatewords: 1 | remove: '...' }}{% endcapture %} {% capture minussecond %}{{ minusfirst | replace_first: mysecondword, '' }}{% endcapture %} {% capture mythirdword %}{{ minussecond | truncatewords: 1 | remove: '...' }}{% endcapture %} {% capture minusthird %}{{ minussecond | replace_first: mythirdword, '' }}{% endcapture %} {% capture myfourthword %}{{ minusthird | truncatewords: 1 | remove: '...' }}{% endcapture %} {% capture minusfourth %}{{ minusthird | replace_first: myfourthword, '' }}{% endcapture %} {% capture myfifthword %}{{ minusfourth | truncatewords: 1 | remove: '...' }}{% endcapture %} {% if myfirstword contains '.html' %} <li><a href="/">home</a> </li> {% elsif mysecondword contains '.html' %} <li><a href="/">home</a> » </li> {% unless mysecondword == 'index.html' %} <li><a href="/{{myfirstword}}">{{myfirstword}}</a> » </li> {% endunless %} {% elsif mythirdword contains '.html' %} <li><a href="/">home</a> » </li> <li><a href="/{{myfirstword}}">{{myfirstword}}</a> » </li> {% unless mythirdword == 'index.html' %} <li><a href="/{{myfirstword}}/{{mysecondword}}">{{mysecondword}}</a> » </li> {% endunless %} {% elsif myfourthword contains '.html' %} <li><a href="/">home</a> » </li> <li><a href="/{{myfirstword}}">{{myfirstword}}</a> » </li> <li><a href="/{{myfirstword}}/{{mysecondword}}">{{mysecondword}}</a> » </li> {% unless myfourthword == 'index.html' %} <li><a href="/{{myfirstword}}/{{mysecondword}}/{{mythirdword}}">{{mythirdword}}</a> » </li> {% endunless %} {% elsif myfifthword contains '.html' %} <li><a href="/">home</a> » </li> <li><a href="/{{myfirstword}}">{{myfirstword}}</a> » </li> <li><a href="/{{myfirstword}}/{{mysecondword}}">{{mysecondword}}</a> » </li> <li><a href="/{{myfirstword}}/{{mysecondword}}/{{mythirdword}}">{{mythirdword}}</a> » </li> {% unless myfifthword == 'index.html' %} <li><a href="/{{myfirstword}}/{{mysecondword}}/{{mythirdword}}/{{myfourthword}}">{{myfourthword}}</a> » </li> {% endunless %} {% else %} <li><a href="/">home</a> » </li> <li><a href="/{{myfirstword}}">{{myfirstword}}</a> » </li> <li><a href="/{{myfirstword}}/{{mysecondword}}">{{mysecondword}}</a> » </li> <li><a href="/{{myfirstword}}/{{mysecondword}}/{{mythirdword}}">{{mythirdword}}</a> » </li> <li><a href="/{{myfirstword}}/{{mysecondword}}/{{mythirdword}}/{{myfourthword}}">{{myfourthword}}</a> » </li> {% endif %} </ul> </div> <h1>{{ page.title }}</h1> {{ content }} </body> </html>
this should give breadcrumbs @ depth (with caveat, see end). unfortunately, liquid filters limited, unstable solution: time /index.html appears, deleted, break urls have folder starts index.html (e.g. /a/index.html/b/c.html), 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="" %} <ol> {% if num_parts == "0" or num_parts == "-1" %} <li><a href="/">home</a> </li> {% else %} <li><a href="/">home</a> » </li> {% unused in page.content limit:num_parts %} {% capture first_word %}{{ url_parts | truncatewords:1 | remove:"..."}}{% endcapture %} {% capture previous %}{{ previous }}/{{ first_word }}{% endcapture %} <li><a href="{{previous}}">{{ first_word }}</a> » </li> {% capture url_parts %}{{ url_parts | remove_first:first_word }}{% endcapture %} {% endfor %} {% endif %} </ol> how works is:
- separates url, ignoring
index.html(e.g./a/b/index.htmlbecomesa b,/a/b/c.htmlbecomesa b c.html), - successively takes , removes first word of
url_parts, iterate through last word (e.g. goesa b c.html-> (a,b c.html) -> (b,c.html); stop). - at each step, makes breadcrumb link using current
first_word, ,previousprevious directories seen (for example above, go""->"/a"->"/a/b")
nb. page.content in loop give iterate over, magic done limit:num_parts. however, means if page.content has fewer paragraphs num_parts not breadcrumbs appear, if 1 might define site variable in _config.yml breadcrumb_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] , use site.breadcrumb_list placeholder instead of page.content.
here example (it doesn't use precisely same code above, it's few little modifications).
Comments
Post a Comment