Laravel文章支持多分类后如何在Blade模板渲染对应分类标识

解决方案 #

第一步：预加载关联（避免N+1查询问题）

首先在输出当前视图的控制器方法中，查询文章列表时预加载多对多关联的分类数据：

// 原有查询逻辑调整为预加载关联
$articles = Article::with('blog_categories')->get();
// 其他变量（$categories、$allArticlesCount等）赋值逻辑保持不变
return view('你的视图路径', compact('articles', 'categories', 'allArticlesCount'));

第二步：修改Blade模板代码

分类筛选器部分的代码不需要调整，只需修改文章列表的渲染逻辑，给每篇文章加上所有关联分类对应的类名即可，你也可以根据需要在文章卡片中展示所有关联的分类标签：

<div class="blog-filter">
  <div class="blog-filter__item active" data-filter="all" value="All ({{ $allArticlesCount }})">
    All ({{ $allArticlesCount }})
  </div>
  @foreach ($categories as $category)
    <div class="blog-filter__item" data-filter=".category_{{ $category->id }}" value="{{ $category->title }} ({{ $category->articles_count }})">
      {{ $category->title }} ({{ $category->articles_count }})
    </div>
  @endforeach
</div>

<div class="blog-list">
  @foreach($articles as $article)
    <!-- 遍历当前文章所有关联分类，拼接生成所有分类类名 -->
    <div class="blog-article {{ $article->blog_categories->map(fn($cat) => 'category_'.$cat->id)->implode(' ') }}">
      <h2 class="blog-article__title">{{ $article->title }}</h2>
      <span>{{ date('d F Y', strtotime($article->published_at)) }}</span>
      <!-- 可选：展示文章所属的所有分类标签 -->
      <div class="blog-article__categories">
        @foreach($article->blog_categories as $category)
          <span class="category-tag">{{ $category->title }}</span>
        @endforeach
      </div>
    </div>
  @endforeach
</div>

兼容性说明

如果你的筛选逻辑是通过匹配元素class是否包含对应分类标识实现（比如常用的Isotope筛选插件、自定义的JS筛选逻辑），修改后无需调整筛选逻辑，即可自动支持多分类筛选：只要文章属于选中的分类，就会被正常筛选展示。

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