Создаем и кастомизируем хлебные крошки breadcrumbs в yii2.
  • 2310

Настройка хлебных крошек Breadcrumbs в yii2

Автор: admin | 28 июня (Чт.) 2018г. в 21ч.47м.

Установка виджета Breadcrumbs в файлах видов.

Хлебные крошки в yii2 формируются с помощью виджета yii\widgets\Breadcrumbs::widget().
Вот так выглядят крошки в yii2 по умолчанию - 
Хлебные крошки в yii2 фреймворке.
Так как хлебные крошки должны присутствовать на всех страницах сайта, то Breadcrumbs::widget()
следует разместить в шаблоне layout.php или где-нибудь в других общих шаблонах.

В layout.php:
<?php
...

<body>
<?php $this->beginBody() ?>

//хлебные крошки
echo Breadcrumbs::widget([
<!--    'itemTemplate' => "<li><i>{link}</i></li>\n",
    'homeLink' => [
        'label' => 'Главная ',
        'url' => Yii::$app->homeUrl,
        'title' => 'Первая страница сайта мастеров по ремонту квартир',
    ],-->
    'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
    <!--'options' => ['class' => 'breadcrumb', 'style' => ''],-->
]);
?>

<?php echo $content; ?>

...​

В базовом шаблоне нашего приложения виджет установлен. Теперь нужно научить его формировать цепочки ссылок, когда пользователь переходит на страницы сайта. Для этого в шаблонах view контроллеров нужно заполнить массив $this->params['breadcrumbs'].

Например, для страницы статьи блога во views/blog/article.php вверху шаблона:

<?php

use yii\helpers\Html;
use yii\helpers\Url;
//$articleName и $articleAlias передаем из экшена
$this->params['breadcrumbs'][] = array(
    'label'=> $articleName, 
    'url'=>Url::toRoute('/photo/'.$articleAlias)
);

label - текст ссылки для вывода в хлебных крошках.
url - ссылка на страницу.

Таким образом сформируются ссылки вида: Home / Какое-то название статьи.Если нужно вывести еще и категорию, к которой пренадлежит страница, то нужно добавить еще один элемент массива в порядке, в котором ссылки должны будут отображаться в breadcrumbs.

$this->params['breadcrumbs'][] = array(
    'label'=> 'Раздел', 
    'url'=>Url::toRoute('/section/')
);

$this->params['breadcrumbs'][] = array(
    'label'=> 'Категория', 
    'url'=>Url::toRoute('/category/')
);

$this->params['breadcrumbs'][] = array(
    'label'=> $articleName, 
    'url'=>Url::toRoute('/photo/'.$articleAlias)
);

Теперь ссылки формируются так:

Home / Раздел / Категория / Какое-то название статьи

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

$this->params['breadcrumbs'][] = $articleName;

Параметры для настройки Breadcrumbs::widget.

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

Настройка ссылки на главную страницу.

echo Breadcrumbs::widget([
    'homeLink' => [
        'label' => 'Главная ',
        'url' => Yii::$app->homeUrl,
        'title' => 'Первая страница сайта мастеров по ремонту квартир',
        //любые атрибуты ссылки : class, style и т.п.
    ],
    
]);​

Назначить родительский тег для списка ссылок.

'tag' => 'div'  //по умолчанию  ul​

Настройка атрибутов родительского тега.

'options' => [
    'class' => 'breadcrumb',//этот класс стоит по умолчанию
    'style' => 'display: table; margin: 0 auto;'//добавили
],​

Кодировать не желательные символы в тексте ссылки.

'encodeLabels' => false  //по умолчанию true​

Массив ссылок для построения хлебных крошек.

В примере ранее мы уже это свойство использовали:
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],​

Шаблон отображения отдельной ссылки.

С помощью этого параметра можно видоизменить html блока ссылки. По умолчанию шаблон выглядит так:
'itemTemplate' => "<li>{link}</li>\n", ​

//меняем на свой
'itemTemplate' => "<li><span>{link}<span></li>\n",

Данный шаблон будет применен ко всем ссылкам в блоке breadcrumbs.
Если нужно изменить шаблон для какой-то отдельной ссылки, то пишем так:

$this->params['breadcrumbs'][] = array(
    'label'=> $articleName, 
    'url'=>Url::toRoute('/photo/'.$articleAlias),
    'template' => "<li><span>{link}<span></li>\n",
);

Шаблон для активного пункта меню.

Данный пункт так же кастомизируется по Вашемо пожеланию:
//по умолчанию    
'activeItemTemplate' => "<li class=\"active\">{link}</li>\n",
        
//изменяем
'activeItemTemplate' => "<li class=\"current\" style=\"border:1px solid #b2b2b2;\">{link}</li>\n", 
​
Хлебные крошки изначально уже имеют стиль отображения, соответствующий bootstrap.
Благодаря рассмотренным в данной статье настройкам виджета Breadcrumbs::widget Вы можете изменить внешний вид хлебных крошек как угодно, создавая любую html структуру, добавляя свои стили и нужные атрибуты.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.