README

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

安装

您可以通过 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,
    }
]

以下是一个使用 Vue 3 渲染面包屑的示例

<template>
    <nav v-if="breadcrumbs">
        <ol>
            <li v-for="page in breadcrumbs">
                <div>
                    <span v-if="page ==='/'">/</span>
                    <a
                        v-else
                        :href="page.url"
                        :class="{ 'border-b border-blue-400': page.current }"
                    >{{ page.title }}</a>
                </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）共享 props。如果您想与此包一起使用 gretel，您应该通过更新配置来禁用它们的自动共享

// config/gretel.php

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

测试

composer test

升级

有关显著更改，请参阅UPGRADING。

变更日志

有关最近更改的更多信息，请参阅CHANGELOG。

待办事项

• 创建 Vue 2/3 组件

贡献

有关详细信息，请参阅CONTRIBUTING。

安全漏洞

有关如何报告安全漏洞的详细信息，请参阅我们的安全策略。

鸣谢

• Robert Boes
• 所有贡献者

许可协议

MIT 许可协议（MIT）。有关更多信息，请参阅许可文件。