Как я создаю хлебные крошки в Bolt CMS + немного о таксономии

Эта запись была изменена. Потому что сначала я сделал хлебные крошки через одно место, расположив в каждом шаблоне отдельный блок. И ежу понятно, что это крайне неудобно в плане оперативных правок.

Поэтому сделаем иначе.

Все хлебные крошки должны быть в едином подшаблоне, который будет называться _breadcumps.twig и подключаться в остальных шаблонах.

Все подшаблоны лежат внутри темы, в папке parts, поэтому подключается такой подшаблон следующим образом.

{% include 'parts/_breadcumps.twig' %}

Нижним подчёркиванием для удобства я обозначаю все подшаблоны.

Первым делом определим три основных позиции для которых крошки принципиально отличаются:

  • шаблоны типов контента — contenttypes;
  • шаблоны таксономии;
  • шаблоны записей.

Далее готовый пример хлебных крошек по-новому и следом я их опишу.

<div class="breadcumps">
    <a href="/" class="breadcumps__link">Главная</a>
    <span class="breadcumps__arrow" >&nbsp;    <i class="fa fa-angle-right"></i></span>
    
    {# крошки для contenttypes #}
    {% if contenttype is defined %}    
        <span class="breadcumps__span">
        {% if contenttype == 'blog' %}Заметки
        {% elseif contenttype == 'lab' %}Лаборатория{% endif %}</span>
    {% endif %}
    
    {# Крошки для тем, категорий и тегов #}
    {% if taxonomytype is defined %}
        {% if taxonomytype == 'categories' %}
        <a href="/blog/" class="breadcumps__link">Заметки</a>
        <span class="breadcumps__arrow" >&nbsp;<i class="fa fa-angle-right"></i></span>
        {% elseif taxonomytype == 'themes' %}
        <a href="/lab/" class="breadcumps__link">Лаборатория</a>
        <span class="breadcumps__arrow" >&nbsp;<i class="fa fa-angle-right"></i></span> 
        {% elseif taxonomytype == 'tags' %}{% endif %}
        <span class="breadcumps__span" style="text-transform: capitalize;">{{ slug }}</span>
    {% endif %}
    
    {# Крошки для записей #}
    {% if record is defined %}    
        {% if record.taxonomy.categories is defined %}
            {% set z = record.taxonomy.categories %}    
        {% elseif record.taxonomy.themes is defined %}
            {% set z = record.taxonomy.themes %}
        {% endif %}
        <a href="/{{ record.contenttype.name }}/" class="breadcumps__link">{{ record.contenttype.description }}</a>
        <span class="breadcumps__arrow" >&nbsp;<i class="fa fa-angle-right"></i></span>
        {% for i in z %}{% if loop.first %}
        <a href="{{ _key }}" class="breadcumps__link" style="text-transform: capitalize;">{{i}}</a>
        {% endif %}{% endfor %}
        <span class="breadcumps__arrow" >&nbsp;<i class="fa fa-angle-right"></i></span> 
        <span class="breadcumps__span">{{ record.title }}</span>
    {% endif %}
</div>

Важно: не забываем, что проверить всё, что мы можем вывести, проверить или еще что-то сделать можно забив следующую конструкцию:

{{ dump() }}

1) Крошки для типов контента. Здесь всё просто. Смотрим определен ли тип контента, если да, мы на нужной странице, то просто проверяем какой именно сейчас выведен и в зависимости от этого показываем нужный заголовок.

2) Крошки для типов таксономии. Снова проверяем определена ли таксономия, если да, то мы на нужной странице. У меня три типа таксономии (на момент написания записи). Отсюда в зависимости от нужной выводим свою конструкцию.

3) Крошки для записи. Записи у меня бывают двух типов (опять же, пока), блог и лаборатория. Я смотрю к какому разделу относится запись, проверяя определен ли тот или иной массив таксономии (категории для блога, темы для лаборатории). И в зависимости от результата определяю переменную, которую подставляю в нужное место крошек. После чего вывожу ссылку на тип контента записи, категорию или тему записи и дальше, собственно, заголовок.

З.Ы. Не забывайте, что это прежде всего блог дизайнера, а не программиста, поэтому наверняка всё можно сделать ещё изящнее и красивее. Если что пишите ;)

З.З.Ы. Вот эта штука

<span class="breadcumps__arrow" >&nbsp;<i class="fa fa-angle-right"></i></span>

те самые стрелочки, между ссылками крошек. Сделана при помощи fontawesome. Переходите по ссылке и разбирайтесь сами, что это такое и с чем его едят. Дам только спойлер: мегакрутая штука!

comments powered by HyperComments

Ещё записи

Подгрузка нового набора записей без перезагрузки страницы в «Болте»

Рассказываю как я решил задачу обновления набора записей в блоке «Читайте также», без перезагрузки страницы, при помощи Аякса и пары хитростей.

Немного статистики с трёх сайтов различной тематики

Опубликовал некоторую статистику посещений трёх сайтов разной тематики за 2016 год.

Почему не запускается Adobe Experience Design после обновления

Короткое описание возникшей проблемы