web-id/breadcrumb

使用路由宏制作面包屑


README

安装

您可以通过composer安装此包

composer require web-id/breadcrumb

发布配置文件

php artisan vendor:publish --provider="WebId\Breadcrumb\BreadcrumbServiceProvider" --tag="config"

用法

此包使用Spatie的Laravel导航包(https://github.com/spatie/laravel-navigation)。

前端

如果您正在使用Inertia,将配置文件中的frontend键更新为inertia

'frontend' => 'inertia',

如果您的项目使用Blade模板,将配置设置为blade

'frontend' => 'blade',

面包屑根元素

编辑您发布的breadcrumb.php配置文件中的breadcrumb_root标题和路由名称。

例如,如果您的根元素是您的首页

'breadcrumb_root' => [
        'title' => 'Homepage',
        'route_name' => 'homepage',
    ],

注意
您的路由必须命名。

面包屑类

要创建一个新的面包屑,创建一个继承自WebId\Breadcrumb\Breadcrumb的类。

在此示例中,我们将为博客页面(所有文章列表)创建一个面包屑

use WebId\Breadcrumb\Breadcrumb;

class BlogBreadcrumb extends Breadcrumb
{
    public function index(): array
    {
        return $this->render(
            $this->baseBreadcrumb()
                ->add('Blog')
                ->tree()
        );
    }
}

请注意,add()方法只接受一个名称(博客)。实际上,面包屑的最后一个元素是当前页面,您不需要为其附加链接。

在此示例中,您的视图应该有一个breadcrumb键,包含以下数据

[
    {
        "url": "https://www.yourwebsite.com",
        "title": "Homepage"
    },
    {
        "title": "Blog"
    }
]

如果您想为单个博客文章创建面包屑,您可能希望父元素为博客页面。在这种情况下,添加如下方法

public function show(Post $post): array
{
    return $this->render(
        $this->baseBreadcrumb()
            ->add('Blog', route('blog.index'))
            ->add($post->title, route('blog.show', ['post' => $post]))
            ->tree()
    );
}

请注意,您可以在面包屑方法中类型提示模型,就像在控制器方法中一样。

在此示例中,您的视图应该有一个breadcrumb键,包含以下数据

[
    {
        "url": "https://www.yourwebsite.com",
        "title": "Homepage"
    },
    {
        "url": "https://www.yourwebsite.com/blog",
        "title": "Blog"
    },
    {
        "title": "Article title"
    }
]

将面包屑注册到路由

为了使面包屑在Inertia视图中可用,您必须按照以下方式将其注册到相关路由

Route::get('/blog', [BlogController::class, 'index'])->breadcrumb([BlogBreadcrumb:class, 'index']);
Route::get('/blog/{post}', [BlogController::class, 'show'])->breadcrumb([BlogBreadcrumb:class, 'show']);

测试

composer test

许可证

MIT许可证(MIT)。有关更多信息,请参阅许可证文件