laravel -хлебные крошки, обзор пакета: diglactic/laravel-breadcrumbs. Делаем навигационную цепочку breadcrumbs на Laravel

Breadcrumbs - хлебные крошки для сайта на Laravel

Хлебные крошки, или навигационная цепочка breadcrumbs – обязательный атрибут сайта, особенно для сайта с большой вложенностью, разделов каталога. Хлебные крошки улучшают юзабилити сайта, упрощают навигацию по сайту и делают его более удобным для пользователей. Так же, навигационная цепочка – улучшает перелинковку сайта, повышает уровень сайта для анализа поисковыми системами, и положительно влияет на поисковую выдачу.

Помните сказку братьев Гримм о Гензель и Грете, которые оставляя хлебные крошки смогли найти дорогу домой и выбраться из леса? Так и навигационная цепочка из ссылок на разделы сата, помогает пользователям знать, где они находятся на сайте, и быстро и легко перемещаться по его разделам.

Рассмотрим один из вариантов создания хлебных крошек на сайте на фреймворке Laravel, в данном случае с использованием готового решения: пакета diglactic/laravel-breadcrumbs.

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

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

Представим, что проект на Laravel создан, подключение к базе данных настроено, а же страницы и разделы, на которых мы хотим создать хлебные крошки, например: страницы сайта Доставка, Контакты, Каталог товаров.

Используя composer установим пакет diglactic/laravel-breadcrumbs, в выполним в консоли команду:

composer require diglactic/laravel-breadcrumbs

Вторым шагом, создадим в папке с роутами создадим файл: routes/breadcrumbs.php. В данном файле, мы будем писать код для вывода навигационных цепочек для различных разделов сата.

Для вывода хлебных крошек необходимо:В созданном файле routes/breadcrumbs.php - указать правила формирования навигационной цепочки

В файле view шаблона – страницы указать код вывода навигационной цепочки

Вывод хлебных крошек на статических страницах сайта

Для примера создадим навигационную цепочку для раздела сайта Контакты. С учетом вложенности, навигационная цепочка к странице Контакты имеет следующий вид:

Главная – Контакты

Для главной страницы сайта и страницы Контакты, в routes/web.php - установлены маршруты.

//Маршрут главной страницы сайта
Route::get('/', [App\Http\Controllers\Front\IndexController::class, 'index'])->name('index');
//Маршрут главной страницы Контакты
Route::get('/contacts', function () {
    return view('front.info.contacts');
})->name('info.contacts');

Тут вы видите, что данные маршруты именованы, name('info.contacts') - имя маршрута к странице Контакты. Данный роут выводит view шаблон 'front.info.contacts' с НТМL кодом страницы.

В нашем случае содержимое routes/breadcrumbs.php – будет таким:

push('Главная', route('index'));
});

// Элемент навигационной цепочки для вывода страницы КОНТАКТЫ
// Главная > Контакты
Breadcrumbs::for('info.contacts', function (BreadcrumbTrail $trail) {
    $trail->parent('index');
    $trail->push('Контакты', route('info.contacts'));
});

Как видите, мы создали элемент навигационной цепочки для главной страницы, затем для страницы Контакты, где:

$trail->parent('index') – указываем родительский элемент навигационной цепочки;
$trail->push('Контакты', route('info.contacts')) – добавляем данные следующего элемента навигационной цепочки, для страницы Контакты, где указываем название страницы и маршрута.

Определим вывод в view шаблоне, страницы. В blade шаблоне создаем секцию, с указанием имени маршрута. Данный код, с рендерит и выведет хлебные крошки на странице Контакты.

@section('breadcrumbs')
    {{ Breadcrumbs::render('info.contacts') }}
@endsection

Не забудьте указать код в родительском шаблоне @yield('breadcrumbs'), для секции @section('breadcrumbs').

Вывод хлебных крошек на динамических страницах сайта.

В первом примере, мы рассмотрели процесс получения хлебных крошек на статических страницах сайта. А как вывести хлебные крошки на страницах сайта, код которых формируется динамически, но основе данных полученных из базы данных?

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

Маршруты для страниц списка статей и детального просмотра статьи выглядят так:

//Маршрут к странице списка статей
Route::get('/articles', [App\Http\Controllers\Front\ArticleController::class, 'list'])->name('articles.list');
//Маршрут к странице странице статьи детально
Route::get('/article/{slug}', [App\Http\Controllers\Front\ArticleController::class, 'item'])->name('articles.item');

Данные маршруты именованы, обращаются к методам контроллера, при этом для ссылок на детальные страницы используется ЧПУ URL – slug

Хлебные крошки для показа детальной страницы со статьёй выглядят так:

Главная – Статьи – Название статьи

В фале routes/breadcrumbs.php пропишем код для хлебных крошек. Точнее добавим код в данный файл.

push('Главная', route('index'));
});

// Элемент навигационной цепочки для вывода страницы КОНТАКТЫ
// Главная > Контакты
Breadcrumbs::for('info.contacts', function (BreadcrumbTrail $trail) {
    $trail->parent('index');
    $trail->push('Контакты', route('info.contacts'));
});

// Элемент навигационной цепочки для вывода страницы списка статей
// Главная > Статьи
Breadcrumbs::for('articles.list', function (BreadcrumbTrail $trail) {
    $trail->parent('index');
    $trail->push('Статьи', route('articles.list'));
});

// Элемент навигационной цепочки для вывода детальной страницы статьи
// Главная > Статьи > Название статьи
Breadcrumbs::for('articles.item', function (BreadcrumbTrail $trail, App\Models\Article $article) {
    $trail->parent('index');
    $trail->push('Статьи', route('articles.list'));
    $trail->push($article->name, route('articles.item', $article->slug));
});

Как вы можете заметить, тут мы снова используем элемент parent – Главная страница, и добавляем элементы для показа страниц со списком статей и детального просмотра. При этом, для формирования ссылок используем данные модели: App\Models\Article $article.

Вывод хлебных крошек в view шаблоне списка статей:

@section('breadcrumbs')
    {{ Breadcrumbs::render('articles.list') }}
@endsection

Вывод хлебных крошек в view шаблоне детальной страницы, с данными модели для формирования ссылки по slug:

@section('breadcrumbs')
    {{ Breadcrumbs::render('articles.item', $article) }}
@endsection

Вывод хлебных крошек на динамических страницах сайта с большим уровнем вложенности

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

Главная – Каталог – Родительская категория – Вложенная категория – Название товара

Как видите – тут последовательно добавляется цепочка элементов – ссылок на категории каталога с учетом их вложенности. Реализуем эту задачу.

И так, маршруты для страниц каталога:

//Маршрут общей страницы каталога
Route::get('/catalog', [App\Http\Controllers\Front\CatalogController::class, 'index'])->name('catalog.index');
//Маршрут страницы раздела, каталога/ списка товаров раздела
Route::get('/catalog/category/{slug}', [App\Http\Controllers\Front\CatalogController::class, 'category'])->name('catalog.category');
//Маршрут детальной страницы товара
Route::get('/catalog/product/{slug}', [App\Http\Controllers\Front\CatalogController::class, 'product'])->name('catalog.product');

Данные маршруты так же именованы, обращаются к методам контроллера CatalogController, при этом для ссылок на страницы категорий и детальные страницы товаров, используется ЧПУ URL – slug.

Опишем правила для вывода хлебных крошек страниц каталога в фале routes/breadcrumbs.php.

push('Главная', route('index'));
});

// Элемент навигационной цепочки для вывода страницы КОНТАКТЫ
// Главная > Контакты
Breadcrumbs::for('info.contacts', function (BreadcrumbTrail $trail) {
    $trail->parent('index');
    $trail->push('Контакты', route('info.contacts'));
});

// Элемент навигационной цепочки для вывода страницы списка статей
// Главная > Статьи
Breadcrumbs::for('articles.list', function (BreadcrumbTrail $trail) {
    $trail->parent('index');
    $trail->push('Статьи', route('articles.list'));
});

// Элемент навигационной цепочки для вывода детальной страницы статьи
// Главная > Статьи > Название статьи
Breadcrumbs::for('articles.item', function (BreadcrumbTrail $trail, App\Models\Article $article) {
    $trail->parent('index');
    $trail->push('Статьи', route('articles.list'));
    $trail->push($article->name, route('articles.item', $article->slug));
});

// Элемент навигационной цепочки для вывода общей страницы каталога, список всех катергорий
// Главная > Каталог
Breadcrumbs::for('catalog.index', function (BreadcrumbTrail $trail) {
    $trail->parent('index');
    $trail->push('Каталог', route('catalog.index'));
});

// Элемент навигационной цепочки для вывода общей страницы каталога, список всех катергорий
// Главная > Каталог > Категория товаров > Вложенная категория товаров
Breadcrumbs::for('catalog.category', function (BreadcrumbTrail $trail, App\Models\Category $category) {
    $trail->parent('index');
    $trail->push('Каталог', route('catalog.index'));

    foreach ($category->ancestors as $ancestor) {
        $trail->push($ancestor->name, route('catalog.category', $ancestor->slug));
    }
    $trail->push($category->name, route('catalog.category', $category));
});
// Элемент навигационной цепочки для вывода детальной страницы товара
// Главная > Каталог > Категория товаров > Вложенная категория товаров > Название товара
Breadcrumbs::for('catalog.product', function (BreadcrumbTrail $trail, App\Models\Category $category, App\Models\Product $product) {
    $trail->parent('index');
    $trail->push('Каталог', route('catalog.index'));
    foreach ($category->ancestors as $ancestor) {
        $trail->push($ancestor->name, route('catalog.category', $ancestor->slug));
    }
    $trail->push($category->name, route('catalog.category', $category->slug));
    $trail->push($product->name, route('catalog.product', $product));
});

Обратите внимание, данные разделов - категорий товаров и данные самих товаров содержаться в разных таблицах базы данных, и для формирования хлебных крошек используются зависимости, модели:

App\Models\Category - категории товаров каталога
App\Models\Product - товары каталога

Вывод хлебных крошек в view шаблоне для страницы списка разделов каталога:

@section('breadcrumbs')
    {{ Breadcrumbs::render('catalog.index') }}
@endsection

Для вывод хлебных крошек, формирования ссылок на разделы каталога, нам нужно получить данные модели App\Models\Category в view шаблоне на странице списка товаров, раздела каталога:

@section('breadcrumbs')
    {{ Breadcrumbs::render('catalog.category', $category) }}
@endsection

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

@section('breadcrumbs')
    {{ Breadcrumbs::render('catalog.product', $category, $product) }}
@endsection

Вывод хлебных крошек – VIEW шаблоны

По умолчанию, после установки пакета diglactic/laravel-breadcrumbs – вы получаете шаблон навигационной цепочки основанный на компоненте Breadcrumb CSS фреймворка Bootstrap 5.

Если на Вашем сайте используется Bootstrap 5, возможно вас устроит вариант по умолчанию. Однако, разработчик пакета, предоставил нам выбора большой выбор шаблонов, практически всех используемых CSS фреймворков:

breadcrumbs::bootstrap5 – Bootstrap 5
breadcrumbs::bootstrap4 – Bootstrap 4
breadcrumbs::bulma – Bulma
breadcrumbs::foundation6 – Foundation 6
breadcrumbs::json-ld – JSON-LD Structured Data
breadcrumbs::materialize – Materialize
breadcrumbs::tailwind – Tailwind CSS
breadcrumbs::uikit – UIkit

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

К примеру, мы хотим использовать CSS фреймворк Tailwind. Давайте изменим настройки по умолчанию. Для этого опубликуем конфигурационный файл пакета:

php artisan vendor:publish --tag=breadcrumbs-config

И в опубликованном конфигурационном файле config/breadcrumbs.php, внесем изменения, в стоку:

// config/breadcrumbs.php
'view' => 'breadcrumbs::bootstrap5',
//заменим на 
'view' => ' breadcrumbs::tailwind ',

Теперь, мы будем использовать шаблон хлебных крошек, основанный компоненте CSS фреймворка Tailwind. Аналогично мощно настроить использование шаблонов breadcrumbs основанных на других фреймворках из списка.

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

Так же, мы можем внести изменения в данные шаблоны, костомизировать их под себя. Для это необходимо из resources/views/vendor/breadcrumbs/ копировать шаблоны. Сделаем это командой:

php artisan vendor:publish --tag=breadcrumbs-views

В результате, орегинальные шаблоны будут скопированы в директорию сайта resources/views/. Выберем любой из них для внесения правок. Теперь, в опубликованном ранее конфигурационном файле config/breadcrumbs.php, укажем путь к используемому, выбранному нами шаблону:

// config/breadcrumbs.php

'view' => 'partials.breadcrumbs', // --> resources/views/partials/breadcrumbs.blade.php

Выбранный шаблон хлебных крошек подключен и готов к внесению изменений.

Таким же образом в config/breadcrumbs.php, можно указать путь к своему, пользовательскому шаблону, и подключить его.

Автор: Максим Волков

Категории

Laravel

Breadcrumbs - хлебные крошки для сайта на Laravel

Вывод хлебных крошек на статических страницах сайта

Вывод хлебных крошек на динамических страницах сайта.

Вывод хлебных крошек на динамических страницах сайта с большим уровнем вложенности

Вывод хлебных крошек – VIEW шаблоны

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

Категории

Теги

Комментарии

Гость