
本文详解如何在 laravel 项目中按分类(如 fabrikasi、konstruksi 等)精准筛选并渲染最多 10 张作品图,解决 `take(10)` 无效、分类混乱及第 11 张图不显示等问题。
在 Laravel 前端展示分类图片时,常见误区是:在 Blade 模板中对全量数据 $portfolios 进行条件循环 + $loop->iteration 限制——这会导致“每个分类仅取前 10 个出现位置”,而非“该分类下最新的 10 条记录”。例如,若数据库中 fabrikasi 类别仅有 3 条数据,且它们分散在 $portfolios 集合的第 2、第 15、第 28 位,则 $loop->iteration
✅ 正确做法是:在控制器中预先完成分类 + 分页/截取逻辑,为每个分类提供独立、已裁剪的数据集,再在 Blade 中直接遍历对应变量。
✅ 推荐控制器写法(优化 & 可维护)
public function landing()
{
$numbers = Number::get();
$testimonials = Testimonial::get();
$clients = Client::get();
// 定义分类映射,避免重复代码
$categories = ['fabrikasi', 'konstruksi', 'repair', 'lainnya'];
$portfoliosByCategory = [];
foreach ($categories as $category) {
$portfoliosByCategory[$category] = Portfolio::where('category', $category)
->latest('created_at') // 明确按创建时间倒序(推荐显式指定字段)
->take(10)
->get();
}
return view('landing/landing', compact(
'numbers', 'testimonials', 'clients',
...$portfoliosByCategory // PHP 8.0+ 解构赋值;低版本可用 array_merge + compact
));
}? 提示:->latest() 默认基于 created_at,但若字段名不同(如 published_at),请显式写为 ->latest('published_at'),避免隐式行为失效。
✅ Blade 模板正确渲染方式
不再遍历 $portfolios,而是分别渲染各分类专属集合:
@foreach($fabrikasi as $portfolio)@@##@@image) }}" class="img-fluid" alt="{{ $portfolio->title }}">@endforeach@foreach($konstruksi as $portfolio)@endforeach
⚠️ 关键注意事项
- 路径安全:确保图片路径正确。若使用 Storage::disk('public'),请通过 asset('storage/xxx.jpg') 访问,且已执行 php artisan storage:link。
- 数据一致性:检查数据库中 category 字段值是否严格匹配控制器查询值(如 'fabrikasi' vs 'fabrication'),大小写与拼写必须完全一致。
- 前端过滤器兼容性:你使用的 data-filter=".filter-fabrication" 需与 HTML 元素的 class="filter-fabrication" 对应。确保每个作品项的 class 包含对应分类过滤器类(如 filter-fabrication, filter-construction),否则 JS 插件(如 Isotope)无法正确筛选。
- 性能优化(进阶):若分类较多或数据量大,可改用 when() 动态构建查询,或使用 Eloquent 的 groupBy() + limit()(需配合子查询或窗口函数,Laravel 9+ 支持更好)。
✅ 总结
问题根源在于「逻辑层(PHP)未真正分离数据」,而试图在视图层用循环索引强行截断——这是反模式。真正的解耦是:控制器负责数据准备(按需裁剪),视图只负责呈现。按本文方式重构后,每类稳定显示最新 10 张图,新增作品自动进入对应分类顶部,且完全兼容前端滤镜交互。










