如何实现CMS文章列表中图片与文本的交替布局（避免相邻布局重复）

Hey there! 看你的需求是要让文章布局严格按「图片在文本下方→图片在文本上方」循环交替，而且绝对不能出现相邻两篇布局重复的情况——原来的随机排序方法确实不靠谱，很容易撞车。咱们换个简单直接的思路，利用组件接收的idx（列表索引）来控制布局就好，索引是天然有序的，完全能保证交替效果。

核心思路 #

假设你的列表索引idx是从0开始（这是React列表渲染的默认逻辑）：

• 当idx为偶数（0、2、4...）时，使用「图片在文本下方」的布局
• 当idx为奇数（1、3、5...）时，使用「图片在文本上方」的布局
  这样就能完美实现固定交替，绝对不会出现相邻布局重复的问题。

修改后的代码 #

export const GridArticle = ({ item, idx }) => { 
  const img = item.image; 
  // 用索引直接判断布局：奇数索引图片在上，偶数索引图片在下
  const isImageTop = idx % 2 !== 0; 

  return ( 
    <Wrapper> 
      <a href={`/articles/${item._meta?.uid}`}>
        <Number>{idx + 1}</Number> 
        {isImageTop ? ( 
          <>
            <ImageWrapper> 
              {img && <img src={img.url} alt={img.alt} style={{ marginBottom: '2rem' }} />} 
            </ImageWrapper> 
            <div> 
              <h2>{item.title[0].text}</h2> 
              <RichText render={item.intro} /> 
              <span className="link">Lees verder</span> 
            </div>
          </>
        ) : ( 
          <>
            <div> 
              <h2>{item.title[0].text}</h2> 
              <RichText render={item.intro} /> 
              <span className="link">Lees verder</span> 
            </div> 
            <ImageWrapper> 
              {img && <img src={img.url} alt={img.alt} style={{ marginTop: '2rem' }} />} 
            </ImageWrapper>
          </>
        )}
      </a> 
    </Wrapper> 
  ); 
};

关键修改说明 #

1. 删掉了原来的随机排序逻辑：完全不需要靠随机来实现交替，索引的奇偶性是最可靠的判断依据
2. 简化了JSX结构：把重复的<a>标签抽出来，减少冗余代码，同时用React片段<>避免不必要的DOM嵌套
3. 灵活调整起始布局：如果需要第一篇就用「图片在上方」的布局，只需要把判断条件改成isImageTop = idx % 2 === 0即可

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