如何在Laravel网站上添加面包屑导航

简介

面包屑是一个很好的方法来提升您的应用程序和网站的 UI（用户界面）和 UX（用户体验）。它们可以减少用户迷路的可能性，并使用户更容易在您的网站上导航。

在本文中，我们将介绍什么是面包屑，它们的优点以及如何在您的 Laravel 网站或应用程序中添加它们。

如果您对了解如何以不同的方式改进您的网站感兴趣，请务必查看我最近的另一篇文章《17 Ways to Get Your Website Ready to Win》。

使用面包屑的优点是什么？

面包屑来源于《Hansel and Grettel》的故事，这是一个关于一对兄妹在森林中留下面包屑以找到返回路的故事。在网页开发中，面包屑以同样的方式工作；它们为我们留下了一条路，这样我们就可以知道我们在系统中哪里，以及如何返回。

您几乎肯定之前遇到过面包屑。例如，让我们假设我们正在一个服装网站上，并且我们正在查看男士衬衫。您可能会在页面上方看到类似的内容

首页 > 男士服装 > T-shirts

这是一个路径导航，显示我们目前在男士T恤页面。通常，每个“碎片”都是一个可以带您返回另一个页面的链接。

路径导航的优点在于

它们可以降低跳出率并减少用户迷路的风险。如果用户对自己的网站或应用程序位置感到困惑，他们可能会感到沮丧。有时这会导致他们离开。因此，路径导航通过为用户提供更多位置可见性来解决这个问题。
它们为访客或用户提供“向上移动一层”的方式。例如，让我们假设一个访客在Google中搜索了“男士T恤”，并着陆在您的网站T恤页面。但现在他们想查看您提供的其他男士服装。他们不必去网站的导航，他们可以点击“男士服装”向上移动一层。通过以简单的方式呈现路径导航，您已允许用户直接导航到其导航而无需四处查找。
如果您的路径导航设置正确，它们在SEO方面非常有用。它们帮助搜索引擎爬虫更好地了解您网站页面的结构。这种结构有时会显示在您的搜索引擎结果中。

如果您想要了解更多关于使用路径导航的好处，请查看由Nielsen Norman Group和Infidigit撰写的这两篇文章。

如何将其添加到您的Laravel网站

要将路径导航添加到您的Laravel项目中，我们将使用diglactic/laravel-breadcrumbs包。我已在多个项目中使用过这个包，从小型网站到相当大的应用程序，我总是发现它设置起来非常简单，也很容易使用。

安装和配置

让我们首先使用以下命令使用Composer安装该包

composer require diglactic/laravel-breadcrumbs

现在我们已经安装了包，我们可以使用以下命令发布配置文件

php artisan vendor:publish --tag=breadcrumbs-config

现在您应该有一个新创建的config/breadcrumbs.php文件，您可以使用它来编辑包的配置。在本文中，我们只关注配置文件中的view选项。但请随意探索文件并根据您的需求进行更改。

默认情况下，当我们向页面输出路径导航时，该包将使用Bootstrap 5进行样式设计。因此，如果您使用Bootstrap 5进行UI样式设计，您可能不需要立即进行任何更改。

但是，如果您使用Tailwind进行CSS，您可以在breadcrumbs.php配置文件中的view选项中进行更新，使包使用Tailwind进行渲染而不是Bootstrap。在这种情况下，您可以像这样更新您的配置文件

return [

    // ...
  
    'view' => 'breadcrumbs::tailwind',
  
    // ...
  
];

为您的路径导航使用自定义样式

就我个人而言，我非常喜欢Tailwind版本路径导航的默认样式。但是，如果您发现您想要一个更独特的设计，您可以轻松地自己添加。

首先，您可以创建一个新的resources/views/partials/breadcrumbs.blade.php文件。该文档提供了一份方便的模板，您可以直接将其放入此文件以开始使用

@unless ($breadcrumbs->isEmpty())
    <ol class="breadcrumb">
        @foreach ($breadcrumbs as $breadcrumb)

            @if (!is_null($breadcrumb->url) && !$loop->last)
                <li class="breadcrumb-item"><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
            @else
                <li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
            @endif

        @endforeach
    </ol>
@endunless

您现在可以向此模板添加自己的样式和结构，使其更符合您的应用程序或网站的设计。在以前的项目中，我使用过这种方法，这样我就可以使用Tailwind UI中的样式添加路径导航。

要使用我们的自定义样式，您只需更新配置文件即可。我们只需要更改 view 字段，让它指向我们刚刚创建的新 Blade 文件。以下是一个示例

return [  

    // ...
  
    'view' => 'partials/breadcrumbs',
  
    // ...

];

定义面包屑

现在我们已经为这个包设置了配置，我们可以开始定义我们的面包屑，准备显示。

在我们开始定义任何面包屑之前，让我们看看这个基本的示例 routes/web.php 文件

<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('/users', [UserController::class, 'index'])->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 推到显示的栈上，并带有链接到 users.index 页面。

我们将定义其他路由，并再次查看我们的面包屑文件可能的样子

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

在上面的行中，我们为另外两个路由定义了两个更多的面包屑。

对于第一个路由，我们添加了一个面包屑，它将用户的名称作为链接推到 'show' 路由的栈上。如果我们在这个浏览器导航到这个路由，面包屑的结构如下示例

Users > Ash Allen

对于第二个路由，我们添加了一个面包屑，它将 'Edit' 推到栈上作为用户显示路由的链接。如果我们在这个浏览器导航到这个路由，面包屑的结构如下示例

Users > Ash Allen > 编辑