README

此包以标准化的方式自动共享面包屑作为 Inertia props，并支持多个面包屑包。

安装

您可以通过 composer 安装此包

composer require robertboes/inertia-breadcrumbs

您可以使用以下命令发布配置文件

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

下一步是安装以下包之一来管理您的面包屑

• diglactic/laravel-breadcrumbs
• tabuna/breadcrumbs
• glhd/gretel

根据包的说明配置您的面包屑

更新您的 config/inertia-breadcrumbs.php 配置以使用正确的收集器

// diglactic/laravel-breadcrumbs
use RobertBoes\InertiaBreadcrumbs\Collectors\DiglacticBreadcrumbsCollector;

return [
    'collector' => DiglacticBreadcrumbsCollector::class,
];

// tabuna/breadcrumbs
use RobertBoes\InertiaBreadcrumbs\Collectors\TabunaBreadcrumbsCollector;

return [
    'collector' => TabunaBreadcrumbsCollector::class,
];

// glhd/gretel
use RobertBoes\InertiaBreadcrumbs\Collectors\GretelBreadcrumbsCollector;

return [
    'collector' => GretelBreadcrumbsCollector::class,
];

用法

无论您使用哪个第三方包，此包都会始终以下列格式将面包屑共享到 Inertia

[
    {
        "title": "Dashboard",
        "url": "https:///dashboard"
    },
    {
        "title": "Profile",
        "url": "https:///dashboard/profile",
        "current": true
    },
    {
        "title": "Breadcrumb without URL"
    }
]

注意

请注意，由于包的不同，当使用 glhd/gretel 时，URL 总是存在，但其他情况下是可选的。

以下是一个在 Vue 3 中渲染面包屑的示例

<template>
    <nav v-if="breadcrumbs">
        <ol>
            <li v-for="page in breadcrumbs">
                <div>
                    <span v-if="page === '/'">/</span>
                    <a
                        v-else-if="page.url"
                        :href="page.url"
                        :class="{ 'border-b border-blue-400': page.current }"
                    >{{ page.title }}</a>
                    <span v-else>{{ page.title }}</span>
                </div>
            </li>
        </ol>
    </nav>
</template>

<script>
import { usePage } from '@inertiajs/inertia-vue3'
import { computed } from 'vue'

export default {
    setup() {
        // Insert an element between all elements, insertBetween([1, 2, 3], '/') results in [1, '/', 2, '/', 3]
        const insertBetween = (items, insertion) => {
            return items.flatMap(
                (value, index, array) =>
                    array.length - 1 !== index
                        ? [value, insertion]
                        : value,
            )
        }

        const breadcrumbs = computed(() => insertBetween(usePage().props.value.breadcrumbs || [], '/'))

        return {
            breadcrumbs,
        }
    },
}
</script>

使用分类器

分类器用于确定何时将面包屑作为 Inertia props 共享。默认情况下，所有面包屑都共享，但此包附带 IgnoreSingleBreadcrumbs 分类器，它简单地丢弃只包含一个路由的面包屑集合。

要编写自己的分类器，您需要实现 RobertBoes\InertiaBreadcrumbs\BreadcrumbCollection\ClassifierContract 并更新 inertia-breadcrumbs.classifier 配置，例如

<?php

namespace App\Support;

use Illuminate\Support\Str;
use RobertBoes\InertiaBreadcrumbs\Classifier\ClassifierContract;
use RobertBoes\InertiaBreadcrumbs\BreadcrumbCollection;

class IgnoreAdminBreadcrumbs implements ClassifierContract
{
    public function shouldShareBreadcrumbs(BreadcrumbCollection $collection): bool
    {
        return ! Str::startsWith($collection->first()->url(), '/admin')''
    }
}

序列化面包屑

在某些情况下，您可能不喜欢默认的面包屑序列化方式。要修改将面包屑发送到前端的方式，您可以在服务提供者的 boot 方法中注册一个序列化回调

<?php

namespace App\Providers;

use RobertBoes\InertiaBreadcrumbs\InertiaBreadcrumbs;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        InertiaBreadcrumbs::serializeUsing(fn (Breadcrumb $breadcrumb) => [
            'name' => $breadcrumb->title(),
            'href' => $breadcrumb->url(),
            'active' => $breadcrumb->current(),
            'data' => $breadcrumb->data(),
        ]);
    }
}

在确定当前 URL 时包含查询字符串

默认情况下，在确定当前 URL 时将忽略查询字符串，这意味着为 /users/{id} 定义的面包屑将匹配 /users/1 和 /users/1?foo=bar。要更改此行为并包含查询字符串（意味着 /users/1?foo=bar 不会被视为当前页面），请将 config/inertia-breadcrumbs.php 文件中的 ignore_query 更改为 false。

关于使用 glhd/gretel 的说明

glhd/gretel 如果检测到已安装 Inertia 并共享相同的键（breadcrumbs）则自动共享面包屑。如果您想使用此包与 gretel 一起使用，您应该禁用其自动共享并更新配置

// config/gretel.php

return [
    'packages' => [
        'inertiajs/inertia-laravel' => false,
    ],
];

测试

composer test

升级

有关重大更改，请参阅UPGRADING。

变更日志

请参阅CHANGELOG 了解最近更改的详细信息。

贡献

请参阅CONTRIBUTING 了解详细信息。

安全漏洞

请查阅我们的安全策略了解如何报告安全漏洞。

鸣谢

• Robert Boes
• 所有贡献者

许可

MIT 许可证（MIT）。请参阅许可文件了解详细信息。