Мой breadcrumbs в шаблоне по умолчанию

Код, который построит breadcrumb, расположим в _includes/breadcrumb.htm, и подключим его к шаблону _layouts/default.html:

{% include breadcrumb.htm %}

Вот содержимое файла breadcrumb.htm:

[ 1]{% if page.url != "/" %}
[ 2]  {% assign arr_pages = page.url | split: "/" %}
[ 3]  {% assign last_page = page.url | split: "/" | last %}
[ 4]  <p>
[ 5]  {% for item in arr_pages %}
[ 6]    {% if item == '' %}
[ 7]      {% assign full_url = site.baseurl %}
[ 8]      <a href="{{ full_url }}">home</a>
[ 9]    {% else %}
[10]      {% capture full_url %}{{ full_url }}/{{ item }}{% endcapture %}
[11]      {% assign dir = item | remove: ".html" %}
[12]      {% if dir == last_page %}
[13]        / <span class="text-gray">{{ dir }}</span>
[14]      {% else %}
[15]        / <a href="{{ full_url }}">{{ dir }}</a>
[16]      {% endif %}
[17]    {% endif %}
[19]  {% endfor %}
[20]  </p>
[21]{% endif %}

Несколько слов для ясности

Итак, пусть, например, наш путь к текущей странице выглядит так: /reponame/first/second/third

Наш breadcrumb (цепочка страниц) будет выглядеть так:

home / first / second / third

, где каждая страничка, кроме последней, будет в виде ссылки на саму себя.

При этом, в служебной переменной site.baseurl будет находиться /reponame (т.е. home), а в служебной переменной page.url - цепочка пути /first/second/third.

Конечно же, вместо “home”, можно указывать, что угодно: “index”, “root”, изобразить в виде домика, или присвоить имя репозитория. Но в этом примере - это home.

Как работает код

  1. Проверяем, если это не первая (главная) страница, то выполняем код.
  2. Разделяем текущий URL страницы по слешу “/” и создаем массив arr_pages=['','first','second','third']. Важно, что первый элемент будет всегда пустой, т.к. мы разбиваем URL по слешам, а URL начинается со слеша!
  3. В переменную last_page мы заносим имя последней страницы в цепочке, т.е. third.
  4. Начинаем формировать и выводить код breadcrumb’а.
  5. Для каждого элемента массива arr_pages проверяем…
  6. … пустой ли он? А первый элемент будет всегда пустым (см. п.2)
  7. Подготавливаем переменную full_url. Она будет поочередно принимать значение пути к каждой странице и ее первое значение всегда будет site.baseurl. Если мы укажем его как /, то попадем в корень username.github.io, а нужно попасть на username.github.io/reponame, поэтому и корень для нас - site.baseurl
  8. Формируем и выводим первую ссылку - “home”.
  9. Если же текущий элемент массива arr_pages не пустой…
  10. …мы продолжаем наращивать наш full_url: через слеш добавляем к нему имя текущей страницы.
  11. Если она окажется последней - к ней будет добавлено расширениие “.html”, которое нам не нужно и будет только мешать при сравнении с last_page, поэтому, удаляем его, если оно есть. А имя текущей страницы записываем в переменную dir.
  12. Сравниваем, если текущая страница - последняя…
  13. … выводим только ее имя (без ссылки)
  14. Если нет…
  15. … формируем и выводим очередную ссылку

После перебора всех елементов массива arr_pages, завершаем наш breadcrumb: п.20.