Вступление
Хлебные крошки – отличный способ улучшить пользовательский интерфейс (пользовательский интерфейс) и UX (пользовательский интерфейс) ваших приложений и веб-сайтов. Они могут помочь снизить вероятность того, что пользователи заблудятся, и облегчить пользователям навигацию по вашему сайту.
В этой статье мы рассмотрим, что такое панировочные сухари, их преимущества и как вы можете добавить их на свой собственный веб-сайт или приложение Laravel.
Если вам интересно узнать о различных способах улучшения вашего сайта, обязательно ознакомьтесь с одной из моих недавних статей под названием 17 способов подготовить ваш сайт к победе .
Каковы преимущества использования панировочных сухарей?
Хлебные крошки взяты из сказки Гензель и Гретель , которая представляет собой сказку о брате и сестре, которые оставляют след из хлебных крошек, когда они находятся в лесу, чтобы найти дорогу обратно. В мире веб-разработки хлебные крошки работают точно так же; они оставляют за нами след, чтобы мы знали, где мы находимся в системе и как вернуться.
Вы почти наверняка сталкивались с хлебными крошками раньше. Например, давайте представим, что мы находимся на сайте одежды и смотрим на мужские футболки. Вы можете увидеть что-то похожее на это в верхней части страницы:
Домой > Мужская одежда > Футболки
Это хлебная крошка, и она показывает нам, что мы находимся на странице мужских футболок. Как правило, каждая “крошка” представляет собой ссылку, которая возвращает вас на другую страницу.
Панировочные сухари полезны, потому что:
- Они могут снизить частоту отказов и снизить вероятность того, что пользователи заблудятся. Если ваши пользователи начнут путаться в том, где они находятся на веб-сайте или в приложении, они могут разочароваться. Иногда это может привести к тому, что они уйдут. Итак, хлебные крошки решают эту проблему, предоставляя вашему пользователю немного больше видимости того, где он находится.
- Они могут предоставить вашим посетителям или пользователям возможность “подняться на новый уровень”. Например, давайте представим, что посетитель искал “мужские футболки” в Google и попал на страницу с футболками вашего сайта. Но теперь они хотят взглянуть на другую мужскую одежду, которую вы предлагаете. Вместо того, чтобы переходить к основной навигации вашего сайта, они потенциально могут перейти на уровень “Мужская одежда”. Представляя хлебную крошку простым способом, вы позволили пользователю перейти прямо к своей навигации без необходимости искать вокруг.
- Если ваши панировочные сухари настроены правильно, они могут быть невероятно полезны для целей SEO. Они помогают поисковым роботам лучше понять структуру страниц вашего сайта. Затем эта структура может иногда отображаться в результатах вашей поисковой системы.
Если вам интересно узнать о дополнительных преимуществах использования панировочных сухарей, ознакомьтесь с этими двумя статьями, написанными группой Nielsen Norman Group и Неверный .
Как добавить их на Свой веб-сайт Laravel
Чтобы добавить панировочные сухари в ваш проект Laravel, мы будем использовать пакет дидактический/laravel-панировочные сухари . Сейчас я использовал это в довольно многих проектах, начиная от небольших веб-сайтов и заканчивая довольно крупными приложениями, и я всегда находил его действительно простым в настройке и использовании.
Установка и настройка
Давайте начнем с установки пакета с помощью Composer с помощью следующей команды:
composer require diglactic/laravel-breadcrumbs
Теперь, когда мы установили пакет, мы можем опубликовать конфигурационный файл, используя следующую команду:
php artisan vendor:publish --tag=breadcrumbs-config
Теперь у вас должен быть недавно созданный config/breadcrumbs.php файл, который вы можете использовать для редактирования конфигурации пакета. В этой конкретной статье нас будет беспокоить только опция просмотр в файле конфигурации. Но, тем не менее, не стесняйтесь изучить файл и изменить его в соответствии с вашими потребностями.
По умолчанию, когда мы выводим хлебные крошки на нашу страницу, пакет будет оформлять их с помощью Начальная загрузка 5 . Итак, если вы стилизуете свой пользовательский интерфейс с помощью Bootstrap 5, вам не нужно сразу вносить какие-либо изменения.
Однако, если вы используете Попутный ветер для вашего CSS вы можете обновить представление в breadcrumbs.php конфигурационный файл, чтобы пакет использовал попутный ветер для рендеринга, а не начальной загрузки. В этом случае вы можете обновить свой конфигурационный файл следующим образом:
return [
// ...
'view' => 'breadcrumbs::tailwind',
// ...
];
Использование пользовательских стилей для Ваших хлебных крошек
По моему личному мнению, мне очень нравится стиль версии breadcrumbs с попутным ветром по умолчанию. Однако, если вы обнаружите, что вам нужен более индивидуальный дизайн, вы можете легко добавить его самостоятельно.
Во-первых, вы можете создать новый resources/views/partials/breadcrumbs.blade.php файл. Документация содержит удобный небольшой шаблон, с которым вы можете начать, перейдя прямо в этот файл:
@unless ($breadcrumbs->isEmpty())
@endunless
Теперь вы можете добавить свой собственный стиль и структуру в этот шаблон и сделать так, чтобы он больше соответствовал дизайну вашего приложения или веб-сайта. В прошлых проектах я использовал этот подход, чтобы добавлять панировочные сухари, используя стиль из пользовательского интерфейса Tailwind.
Все, что осталось сделать, чтобы использовать ваш пользовательский стиль, – это обновить конфигурационный файл. Нам просто нужно изменить поле вид , чтобы указать на наш новый файл Blade, который мы только что создали. Вот пример того, как это может выглядеть:
return [
// ...
'view' => 'partials/breadcrumbs',
// ...
];
Определение панировочных сухарей
Теперь, когда у нас есть конфигурация для пакета, мы можем начать определять наши хлебные крошки, готовые к отображению.
Прежде чем мы начнем определять какие-либо хлебные крошки, давайте рассмотрим этот базовый пример routes/web.php файл:
name('users.index');
Route::get('/users/{user}', [UserController::class, 'show'])->name('users.show');
Route::get('/users/{user}/edit', [UserController::class, 'edit'])->name('users.edit');
Пакет работает за счет того, что мы определяем хлебную крошку для каждого маршрута, который у нас есть. Итак, в этом конкретном примере, поскольку у нас есть 3 маршрута, нам нужно определить 3 хлебных крошки.
Чтобы сделать это, нам сначала нужно определить новый пустой routes/breadcrumbs.php файл. Как только мы его создадим, мы сможем добавить нашу первую хлебную крошку:
use App\Models\User;
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;
Breadcrumbs::for('users.index', function (BreadcrumbTrail $trail): void {
$trail->push('Users', route('users.index'));
});
Давайте быстро посмотрим, что делает приведенный выше код. По сути, мы определяем макет страницы, к которой вы можете получить доступ через маршрут users.index . Затем мы говорим посылке, чтобы она толкала Пользователи в стек для отображения и отображения со ссылкой на страницу users.index
Мы определим наши другие маршруты и еще раз взглянем на то, как может выглядеть наш файл breadcrumbs:
use App\Models\User;
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;
Breadcrumbs::for('users.index', function (BreadcrumbTrail $trail): void {
$trail->push('Users', route('users.index'));
});
Breadcrumbs::for('users.show', function (BreadcrumbTrail $trail, User $project): void {
$trail->parent('users.index');
$trail->push($user->name, route('users.show', $user));
});
Breadcrumbs::for('users.edit', function (BreadcrumbTrail $trail, User $project): void {
$trail->parent('users.show');
$trail->push('Edit', route('users.edit', $user));
});
В приведенных выше строках мы определили еще две хлебные крошки для двух других маршрутов.
Для первого маршрута мы добавили хлебную крошку, которая поместит имя пользователя в стек в качестве ссылки на маршрут пользователя “показать”. Если бы мы должны были перейти к этому маршруту в нашем браузере, хлебная крошка имела бы следующую структуру в качестве примера:
Пользователи > Эш Аллен
Для второго маршрута мы добавили хлебную крошку, которая поместит “Редактировать” в стек в качестве ссылки на маршрут показа пользователя. Если бы мы должны были перейти к этому маршруту в нашем браузере, хлебная крошка имела бы следующую структуру в качестве примера:
Пользователи > Эш Аллен > Редактировать
Отображение хлебных крошек
Мы почти на месте! Теперь, когда мы определили наши хлебные крошки, мы можем вывести их на нашу страницу, чтобы наши посетители могли начать использовать. Чтобы сделать это, нам просто нужно найти место в нашем файле просмотра лезвий, где мы хотим их отобразить, а затем добавить:
{{ Breadcrumbs::render() }}
Вот и все! Это все, что вам нужно сделать!
Теперь вы должны видеть, как ваши хлебные крошки отображаются на вашей странице, и должны иметь возможность переходить по различным ссылкам для навигации по разным страницам.
Пакет довольно тщательный, поэтому я определенно рекомендовал бы ознакомиться с их документацией и посмотреть на другие интересные вещи, которые вы можете сделать.
Вывод
Надеемся, что в этой статье должны были быть объяснены преимущества использования панировочных сухарей и то, как они могут помочь вашим пользователям. Это также должно было дать вам некоторое представление о том, как вы можете довольно легко добавлять их в свои собственные приложения Laravel.
Если этот пост вам помог, я бы с удовольствием послушал об этом. Точно так же, если у вас есть какие-либо отзывы, чтобы улучшить этот пост, я бы тоже хотел это услышать.
Если вы заинтересованы в том, чтобы получать обновления каждый раз, когда я публикую новый пост, не стесняйтесь подписаться на мою рассылку новостей .
Продолжайте создавать потрясающие вещи! 🚀
Оригинал: “https://dev.to/ashallendesign/how-to-add-breadcrumbs-to-your-laravel-website-2a2p”