Laravel: создание хлебных крошек

Доброго времени суток. В данной статье мы поговорим о хлебных крошках в Laravel.  Хлебные крошки помогают посетителю ориентироваться где на сайте он находится, помогают построить навигацию. А так же полезны для SEO. Хлебные крошки в Laravel можно добавить в ручную или генерировать с помощью плагина. Дальше мы рассмотрим как это сделать.


И так. Я предполагаю, что Laravel у вас уже установлен. У меня установлен Laravel 5.7.26

>Версия Laravel

Сервер настроен.

Проверка настройки сервера

Давайте создадим несколько роутов.

Шаг 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')

&nbsp;

@section('content')

<div class="title m-b-md">

Страница счетов

</div>

@endsection
И вот так она смотрится:

Страница счетов

Создаем вьюшку для добавления счетов. Для этого создаем файл accounts_add.blade.php в каталоге resources/views

@extends('layout')

&nbsp;

@section('content')

<div class="title m-b-md">

Страница добавления счета

</div>

@endsection

Страница добавление счета

И последняя страница, страница редактирования счета.

Для этого создаем файл accounts_edit.blade.php в каталоге resources/views

@extends('layout')

&nbsp;

@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')

&nbsp;

@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')

&nbsp;

@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')

&nbsp;

@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')

&nbsp;

@section('content')

{{ Breadcrumbs::render('profile') }}

&nbsp;

<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')

&nbsp;

@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')

&nbsp;

@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.

ВВЕРХ