如何在Blade视图中按类型筛选展示并控制Logo显示状态？

咱们先从后端数据准备入手，确保传给视图的数据已经按要求筛选好，这样前端渲染会更简洁高效：

1. 控制器中筛选并分组数据 #

假设你的模型是PartnerCustomer（如果是其他名称直接替换就行），在对应的控制器方法里，我们可以分别查询出需要在首页展示的合作伙伴和客户数据：

use App\Models\PartnerCustomer;

public function index()
{
    // 筛选出要显示的合作伙伴：类型为1，且勾选了首页显示（is_show=1）
    $partners = PartnerCustomer::where('type', 1)
                                ->where('is_show', 1)
                                ->get();

    // 筛选出要显示的客户：类型为2，且勾选了首页显示（is_show=1）
    $customers = PartnerCustomer::where('type', 2)
                                ->where('is_show', 1)
                                ->get();

    return view('你的视图名称', compact('partners', 'customers'));
}

这里的is_show是对应复选框的布尔字段，如果你的字段名是别的（比如display_on_home），记得改成你实际用的字段名哦。

2. Blade视图中分别渲染两个轮播组件 #

接下来在Blade视图里，针对合作伙伴和客户的轮播组件，分别遍历对应的数据即可。下面以Bootstrap的Carousel组件为例（你可以换成自己项目用的轮播组件）：

合作伙伴轮播 #

<div id="partnersCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach($partners as $index => $partner)
            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                <!-- 用asset()生成Logo的完整访问路径 -->
                <img src="{{ asset($partner->logo) }}" class="d-block w-100" alt="{{ $partner->name }}">
                <!-- 如果需要显示名称等额外信息，可以加上这段 -->
                <div class="carousel-caption d-none d-md-block">
                    <h5>{{ $partner->name }}</h5>
                </div>
            </div>
        @endforeach
    </div>
    <!-- 轮播切换按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#partnersCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">上一张</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#partnersCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">下一张</span>
    </button>
</div>

客户轮播 #

<div id="customersCarousel" class="carousel slide mt-4" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach($customers as $index => $customer)
            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                <img src="{{ asset($customer->logo) }}" class="d-block w-100" alt="{{ $customer->name }}">
                <div class="carousel-caption d-none d-md-block">
                    <h5>{{ $customer->name }}</h5>
                </div>
            </div>
        @endforeach
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#customersCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">上一张</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#customersCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">下一张</span>
    </button>
</div>

额外优化：处理空数据场景 #

如果某一类没有符合条件的记录，轮播可能会显示异常，咱们可以加上空状态提示，提升用户体验：

比如在合作伙伴轮播里：

<div class="carousel-inner">
    @if($partners->isNotEmpty())
        @foreach($partners as $index => $partner)
            <!-- 轮播项代码 -->
        @endforeach
    @else
        <div class="carousel-item active">
            <div class="d-flex align-items-center justify-content-center h-100 py-5">
                <p class="text-muted">暂无合作伙伴Logo展示</p>
            </div>
        </div>
    @endif
</div>

客户轮播也可以用同样的方式处理。

这样就完美实现了你的两个需求：按类型分别展示到对应轮播，并且只显示勾选了“首页展示”的Logo~

内容的提问来源于stack exchange，提问作者Hazel