静态Magazine页面展示Experiences与Articles模型时出现重复问题求助

问题根源 #

你的视图逻辑存在核心错误：

• 控制器中已经通过@feed = (@experiences.to_a + @articles.to_a).sort_by(&:date)将所有Experience和Article按日期合并排序，但在视图遍历@feed时，每遇到一个Experience类型的条目，就会循环渲染全部的@experiences集合；每遇到一个Article类型的条目，又会循环渲染全部的@articles集合。
• 例如，如果@feed里包含3条Experience，页面就会把所有Experience重复渲染3次，这就是内容重复的直接原因。

修正方案 #

1. 优化控制器代码（可选，修正排序逻辑） #

原控制器的sort_by(&:date)是按日期升序排列（旧内容在前），如果需要和首页保持一致的降序（新内容在前），可以修改如下：

class PagesController < ApplicationController
  include Pagy::Frontend

  def home
    @experiences = Experience.order('date DESC').limit(1)
    @articles = Article.order('date DESC').limit(1)
  end

  def magazine
    # 合并后按日期降序排序，与首页逻辑统一
    @feed = (Experience.order(date: :desc).to_a + Article.order(date: :desc).to_a).sort_by { |item| -item.date.to_i }
  end
end

2. 修正视图代码（核心修复） #

去掉嵌套的全量集合循环，直接遍历@feed中的单个条目，同时修复重复id的HTML规范问题：

<% if @feed.any? %>
  <div id="articles" align="center">
    <% @feed.each do |item| %>
      <div class="article-widget">
        <% if item.is_a? Experience %>
          <%= link_to item do %>
            <%= image_tag item.picture_url, class: "img-rounded", width: '80%' if item.picture.present? %>
          <% end %>
          <div class="article-top-left"><h3><%= item.category %></h3></div>
          <div class="article-bottom-left"><h4><%= item.title %><br /> <%= item.location %></h4></div>
        <% else %>
          <%= link_to item do %>
            <%= image_tag item.picture, class: "img-rounded", width: '80%' if item.picture.present? %>
          <% end %>
          <div class="article-top-left"><h3><%= item.category %></h3></div>
          <div class="article-bottom-left"><h4>Around London with <%= item.title %><br /></h4></div>
        <% end %>
      </div>
    <% end %>
  </div>
<% end %>

修复说明 #

• 移除了嵌套的@experiences.each和@articles.each循环，直接处理@feed中的每一条内容
• 将id="articles"移至循环外层，避免生成多个重复id的HTML元素（HTML规范要求id全局唯一）
• 保留了原有的内容渲染逻辑，仅调整了循环层级，确保每个条目只渲染一次

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