Как-то давно я задался вопросом как правильно делать хлебные крошки, что бы их можно было править прям на CMS странице и без всяких танцев с бубном.
Дискуссий на эту тему было много но из того, что я находил, мне особо ничего и не подошло. В итоге я сделал определенную конструкцию которую легко править в случае чего.
Да, сначала может показаться, что это костыль, поэтому не судите строго, но всё же я решил им поделиться.
Итак, приступим!
1 - Изменение шаблона
Для начала добавим в наш файл шаблона (н.п. layouts/CMS.htm) следующую часть кода:
{% if this.page.id != 'home' %}
{% partial 'Main/Breadcrumbs' %}
{% endif %}
В нашем условии мы проверяем является ли страница у которой этот шаблон “Главной”. Если нет то блок с хлебными крошками будет выводиться. Проверка происходит через имя файла так что вместо home - надо написать свое если отличается. Так же можно сделать проверку через URL если главная страница выводится через StaticPage плагин. Для этого меняем верхнюю строчку на:
{% if this.page.url != '/' %}
2 - Добавляем паршл
Как уже скорее всего стало понятно нам нужно сделать паршл содержащий хлебные крошки. Путь к нему указываете тот что у вас.
Буду показывать на своем примере этого паршала.
<section class="breadcrumb_section">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ 'home' | page }}"> Главная</a></li>
...
<li class="breadcrumb-item active" aria-current="page">{{ this.page.title }}</li>
</ol>
<h2>{{ this.page.title }} </h2>
</nav>
</div>
</section>
Разберем эту часть:
- Выводим саму секцию с хлебными крошками
- Первый элемент списка ol - это ссылка на нашу главную страницу.
- Посередине мы еще элементы.
- Последний элемент списка - просто текущая страница
Таким образом даже в случае если что-то на сайте отвалится или не будет работать - хотя бы будут эти два пункта.
3 - Static Breadcrumbs
Если вы пользуетесь Static Pages то вы должны добавить компонент в ваш паршл под названием “Static Breadcrumbs”
Далее там где мы оставили место посередине добавляем код.
{% for breadcrumb in breadcrumbs if breadcrumb.isActive == false %}
<li class="breadcrumb-item">
<a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
</li>
{% endfor %}
Здесь мы выводим как раз таки хлебные крошки плагина Static Breadcrumbs которые строются автоматически.
Условие
if breadcrumb.isActive == false
мы ставим, что бы не выводился последний пункт потому что он у нас уже есть. Если это не страница StaticPage то этот блок просто не будет показыватся так что можно не переживать что он может мешать на страницах CMS
4 - CMS Страницы
Но как быть с ними? Ведь October CMS не строит сам маршруты? Для этого мы там же где мы выводили крошки Static Pages ниже или выше пишем:
{% placeholder breadcrumbs %}
Этот placeholder поможет нам выводить свои ручные пункты хлебных крошек.
Например на странице категории новостей (именно категории а не всех новостей) наверху нашей CMS страницы мы вставляем код:
{% put breadcrumbs %}
<li class="breadcrumb-item"><a href="{{ 'blog/all'|page }}"> Новости</a></li>
{% endput %}
Ссылки и название правим сами. Т.е. мы у казали путь к предыдущей странице.
А на странице с самим постом мы уже добавляем пункт с категории:
{% put breadcrumbs %}
<li class="breadcrumb-item"><a href="{{ 'blog/all'|page }}">Новости</a></li>
<li class="breadcrumb-item"><a href="{{ post.categories.first.url }}"> {{ post.categories.first.name }}</a></li>
{% endput %}
Таким образом в наш placeholder попадают новые пункты пути к которым мы правим сами. Ссылки и их названия могут быть как статическими так и динамическими.
