Створення хлібних крихт в OctoberCMS

Розберемо найпростіший спосіб створення хлібних крихт. По суті хлібні крихти це простий масив який можна вказати в twig чи секції php коду.

В OctoberCMS є дуже корисний тег {% placeholder %} який дозволяє підставити частину коду із іншого місця за допомогою тега {% put %}.

Створення хлібних крихт розберемо по пунктах.

1) Для початку в місце де будемо відображати хлібні крихти необхідно добавити тег placeholder:

{% placeholder breadcrumbs %}

2) Створимо partial з назвою breadcrumbs.htm в якому буде html розмітка.

{% set index = 1 %}
<section class="breadcrumbs">
    <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
        {% for page in pages %}
            {% if not loop.last %}
                <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a class="breadcrumbs__link" href="{{ page.url }}" itemprop="item">
                        <span class="breadcrumbs__name" itemprop="name">{{ page.name }}</span>
                    </a>
                    <meta itemprop="position" content="{{ index }}">
                </li> 
                <li class="breadcrumbs__sep"> / </li>
            {% else %}
                <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <span class="breadcrumbs__name" itemprop="name">{{ page.name }}</span>
                    <meta itemprop="position" content="{{ index }}">
                </li>
            {% endif %}
            {% set index = loop.index + 1 %}
        {% endfor %}
    </ol>
</section>

3) Потім на кожній CMS сторінці будемо створювати масив з хлібними крихтами і передавати його в раніше створений placeholder. Для прикладу візьмемо сторінку статті і плагін RainLab.Blog.

{# Отримуємо статтю та категорію із RainLab.Blog #}
{% set post = blogPost.post %}
{% set category = post.categories.first %}

{# Створюємо масив хлібних крихт. Також його можна створити в секції php коду, кому як зручніше. #}
{% set breadcrumbs = [
    {
        'name':'Головна',
        'url':"/",
    },
    {
        'name':'Блог',
        'url':"blog"|page(),
    },
    {
        'name':category.name,
        'url':"blog"|page()~'/'~category.slug,
    },
    {
        'name':post.title
    }
] %}

{# Передаємо в breadcrumbs.htm масив і виводимо все це в міці де вказали placeholder. #}
{% put breadcrumbs %}
    {% partial 'breadcrumbs' pages=breadcrumbs %}
{% endput %}

4) Добавимо трохи CSS для краси.

.breadcrumbs {
    background: rgba(0,0,0,0.5);
    margin-bottom: 10px
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
    padding: 4px 15px;
    list-style: none;
    box-sizing: border-box
}

.breadcrumbs__sep {
    color: white;
    padding: 0 4px;
    font-size: 11px
}

.breadcrumbs__link {
    color: white;
    font-size: 12px;
    text-decoration: underline
}

.breadcrumbs__link:hover {
    color: white;
    text-decoration: none
}

.breadcrumbs__name {
    color: white;
    font-size: 12px
}

Пункт №3 необхідно повторити для кожної CMS сторінки. Таким чином ми отримали супер гнучке налаштування хлібних крихт для окремих сторінок де можна використовувати будь-які дані із моделі, а також всю силу twig. Наприклад з домопогою умовних операторів перевіряти на якій сторінці пагінації ми знаходимося і дописувати " - сторінка 2" для останнього пункту хлібних крихт.

Створення хлібних крихт (breadcrumbs) в OctoberCMS