Доброго времени суток. В данной статье мы поговорим о хлебных крошках в Laravel. Хлебные крошки помогают посетителю ориентироваться где на сайте он находится, помогают построить навигацию. А так же полезны для SEO. Хлебные крошки в Laravel можно добавить в ручную или генерировать с помощью плагина. Дальше мы рассмотрим как это сделать.
И так. Я предполагаю, что Laravel у вас уже установлен. У меня установлен Laravel 5.7.26
Сервер настроен.
Давайте создадим несколько роутов.
Шаг 1. Добавление роутов в Laravel
Открываем файл routes/web.php и добавляем роуты:
…
Route::get('/profile', function () {
return view('profile');
});
Route::get('/profile/accounts', function () {
return view('accounts');
});
Route::get('/profile/accounts/add', function () {
return view('accounts_add');
});
Route::get('/profile/accounts/edit/{id}', function ($id) {
return view('accounts_edit',['id' => $id]);
});И, так:
- /profile – это ссылка на профиль, ему соответствует вьюшка profile
- /profile/accounts – это ссылка на список счетов, ему соответствует вьюшка accounts
- /profile/accounts/add – это ссылка на добавление счета, ему соответствует вьюшка accounts_add
- /profile/accounts/edit/{$id} – это ссылка на редактирование счета, ему соответствует вьюшка accounts_edit
Мы не будем заниматься логикой, поэтому не будем писать контроллеры, и вьюшки будем вызывать прямо из роутов. Это не совсем правильно, но так делать можно и в нашем случае это оправдано.
Теперь давайте создадим вьюшки.
Шаг 2. Добавление вьюшек.
Давайте создадим layout, чтобы потом все наши вьюшки наследовали его. Создаем layout.blade.php в каталоге resources/views:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head><body>
<div class="flex-center position-ref full-height">
<div class="top-right links">
<a href="{{ url('/profile') }}">Профиль</a>
<a href="{{ url('/profile/accounts') }}">Счета</a>
<a href="{{ url('/profile/accounts/add') }}">Добавить счет</a>
</div>
<div class="content">@yield("content")</div>
</div>
</body>
</html>Создаем вьюшку profile, в каталоге resources/views profile.blade.php
@extends('layout')
@section('content')
<div class="title m-b-md">Страница профиля</div>
@endsectionИ вот как наша страница смотрится:
Создаем вьюшку для счетов. Для этого создаем файл accounts.blade.php в каталоге resources/views
И вот так она смотрится:@extends('layout') @section('content') <div class="title m-b-md"> Страница счетов </div> @endsection
Создаем вьюшку для добавления счетов. Для этого создаем файл accounts_add.blade.php в каталоге resources/views
@extends('layout') @section('content') <div class="title m-b-md"> Страница добавления счета </div> @endsection
И последняя страница, страница редактирования счета.
Для этого создаем файл accounts_edit.blade.php в каталоге resources/views
@extends('layout') @section('content') <div class="title m-b-md"> Редактирование счета {{ id }} </div> @endsection
Обратите внимание на параметр, переданный в адресе.
Отлично. Роуты и вьюшки мы с вами создали. Пришло время для хлебных крошек.
Шаг 3. Добавление хлебных крошек в ручную
Открываем нашу вьюшку profile.blade.php и меняем в ней код:
@section('content') <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Профиль</li> </ol> </nav> <div class="title m-b-md"> Страница профиля </div> @endsection
Отлично, теперь добавляем хлебные крошки во вьюшку accounts_add.blade.php
@extends('layout') @section('content') <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ url('/profile') }}">Профиль</a></li> <li class="breadcrumb-item active" aria-current="page">Счета</li> </ol> </nav> <div class="title m-b-md"> Страница счетов </div> @endsection
Теперь добавляем крошки во вьюшку accounts_add.blade.php
@extends('layout') @section('content') <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ url('/profile') }}">Профиль</a></li> <li class="breadcrumb-item"><a href="{{ url('/profile/accounts') }}">Счета</a></li> <li class="breadcrumb-item active" aria-current="page">Добавить счет</li> </ol> </nav> <div class="title m-b-md"> Страница добавления счета </div> @endsection
И добавляем крошки в редактирование счетов accounts_edit.blade.php
@extends('layout') @section('content') <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ url('/profile') }}">Профиль</a></li> <li class="breadcrumb-item"><a href="{{ url('/profile/accounts') }}">Счета</a></li> <li class="breadcrumb-item active" aria-current="page">Редактировать счет</li> </ol> </nav> <div class="title m-b-md"> Редактирование счета {{ $id }} </div> @endsection
Все хлебные крошки работают, но добавлять в ручную не очень удобно. Это у нас всего четыре вьюшки, а если их будет сотни?
Вот тут и приходят нам на помощь различные пакеты для генерации хлебных крошек. И мы будем использовать пакет davejamesmiller/laravel-breadcrumbs.
Шаг 4. Установка и настройка пакета davejamesmiller/laravel-breadcrumbs
Для того, чтобы установить пакет воспользуемся composer:
composer require davejamesmiller/laravel-breadcrumbs
Документацию по пакету можно прочитать тут.
Затем запускаем:
php artisan vendor:publishИ выбираем наш пакет. В папке с конфигурациями config будет скопирован файл breadcrumbs.php
В этом файле мы можем настроить наши хлебные крошки. В файле очень подробные комментарии. Поэтому настроить хлебные крошки не вызовет проблем.
Шаг 5. Использование пакета laravel-breadcrumbs
Для того, чтобы начать использовать laravel-breadcrumbs необходимо в папке routes (где хранятся роуты) создать файл breadcrumbs.php
И добавим в него:
Breadcrumbs::register('profile', function ($breadcrumbs) { $breadcrumbs->push('Профиль', url('/profile')); });
Тут мы регистрируем с помощью метода register цепочку хлебных крошек под именем profile. И с помощью метода push добавляем элемент «Профиль» с ссылкой url(‘/profile’)
Теперь в самом представлении мы должны вывести цепочку наших хлебных крошек. Для переходим в наше представление: profile.blade.php и изменяем код:
@extends('layout') @section('content') {{ Breadcrumbs::render('profile') }} <div class="title m-b-md"> Страница профиля </div> @endsection
Тут с помощью метода render мы рендерим цепочку хлебных крошек по ее имени. Давайте посмотрим, что изменилось в нашем отображении:
Ничего не поменялось. Давайте добавим хлебные крошки для страницы счетов. Для этого открываем файл routes/breadcrumbs.php и дополняем код нашего файла:
Breadcrumbs::for('accounts', function ($breadcrumbs) { $breadcrumbs->parent('profile'); $breadcrumbs->push('Счета', url('/profile/account')); });
И в представлении надо вывести эту цепочку:
resources/view/accounts.blade.php
@extends('layout') @section('content') {{ Breadcrumbs::render('accounts') }} <div class="title m-b-md"> Страница счетов </div> @endsection
Ок, теперь давайте сделаем хлебные крошки для страницы добавления счета. Для этого добавим в
route/breadcrumbs.php
Breadcrumbs::for('accounts_add', function ($breadcrumbs) { $breadcrumbs->parent('accounts'); $breadcrumbs->push('Добавление счета', url('/profile/account/add')); });
И добавим в представление рендер данной цепочки.
resources/view/accounts_add.blade.php
@extends('layout') @section('content') {{ Breadcrumbs::render('accounts_add') }} <div class="title m-b-md"> Страница добавления счета </div> @endsection
Аналогично мы можем добавить хлебные крошки и для других страниц. Как видите, мы значительно уменьшили код во вьюшках. Да цепочки стало легче добавлять.
Если нам нужно передать параметры в цепочку, то пакет с легкостью позволяет нам это сделать. Например, у нас есть категории, где название категории, мы должны передать как параметр.
Breadcrumbs::register('category', function ($breadcrumbs, $category) {
$breadcrumbs->parent('home');
$breadcrumbs->push($category->name, route('category', ['name' => $category ->name]));
});А в самом рендеринге хлебных крошек мы должны передать параметр $category
{{ Breadcrumbs::render('category', $category) }}Т.е. мы передаем название цепочки «category» и параметр «$category».
Так же мы можем передать несколько параметров. Например, у нас есть статья, которая находится в категории. Где название категории и название статьи мы должны передавать в хлебные крошки:
Breadcrumbs::register('category', function ($breadcrumbs, $category) {
$breadcrumbs->parent('home');
$breadcrumbs->push($category->name, route('category', ['name' => $category ->name]));
});
Breadcrumbs::register('article', function ($breadcrumbs, $category, $article) {
$breadcrumbs->parent('article');
$breadcrumbs->push($article->name, route('article', ['name' => $article ->name]));
});
Ну и сам рендеринг:
{{ Breadcrumbs::render('article', $category, $article) }}{{ Breadcrumbs::render('article', $category, $article) }}Ну вот и все.
Заключение.
Мы с вами рассмотрели как добавлять хлебные крошки с помощью Laravel пакета laravel-breadcrumbs. Более подробно о данном пакете вы можете прочитать на GitHub.