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

Ромчик
0

Доброго времени суток. В данной статье мы поговорим о хлебных крошках в 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">

&nbsp;

<title>Laravel</title>

&nbsp;

<!-- Fonts -->

<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

&nbsp;

<!-- Styles -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

&nbsp;

.full-height {

height: 100vh;

}

&nbsp;

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

&nbsp;

.position-ref {

position: relative;

}

&nbsp;

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

&nbsp;

.content {

text-align: center;

}

&nbsp;

.title {

font-size: 84px;

}

&nbsp;

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

&nbsp;

.m-b-md {

margin-bottom: 30px;

}

</style>

</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>

&nbsp;

<div class="content">

@yield("content")

</div>

</div>

</body>

</html>

Создаем вьюшку profile, в каталоге resources/views profile.blade.php


@extends('layout')

&nbsp;

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

Ну вот и все.

Заключение.

Мы с вами рассмотрели как добавлять хлебные крошки с помощью Laravel пакета laravel-breadcrumbs. Более подробно о данном пакете вы можете прочитать на GitHub.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2019 По всем вопросам обращайтесь через форму обратной связиПолитика конфиденциальности

Яндекс.Метрика