×

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 - указать правила формирования навигационной цепочки

  1. В файле 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.

Компонент breadcrumbs Bootstrap 5
Компонент breadcrumbs 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

Комментарии