如何在单个foreach循环中实现商品列表差异化展示？

嘿，这个需求其实很容易解决！咱们可以借助Smarty模板引擎foreach循环里的内置变量，来判断当前商品在循环中的位置，从而给不同元素设置差异化的展示样式。

先明确你的现有代码 #

你目前的商品循环代码是这样的：

{foreach $products as $p} 
  <div class="product_list"> 
    <img src={$p.pic}> 
    <h2>Product {$p.name}</h2> 
  {/foreach}

想要实现第一个商品显示大尺寸图，商品2、3显示小尺寸图，核心就是在循环里识别元素的位置，然后应用不同的样式规则。

具体解决方案 #

方法1：用CSS类控制（推荐，结构和样式分离）

Smarty的foreach有个内置变量@index（从0开始计数，第一个元素就是0），我们可以用它给不同位置的商品容器或图片加特殊类，再通过CSS定义尺寸：

{foreach $products as $p}
  <!-- 给第一个商品加product-large类，其他加product-small -->
  <div class="product_list {$p@index == 0 ? 'product-large' : 'product-small'}">
    <img src="{$p.pic}" alt="{$p.name}">
    <h2>Product {$p.name}</h2>
  </div>
{/foreach}

然后在你的CSS文件里添加样式：

/* 第一个商品的大图样式 */
.product-large img {
  width: 300px;
  height: auto;
}

/* 其他商品的小图样式 */
.product-small img {
  width: 150px;
  height: auto;
}

这里用了Smarty的三元运算符条件 ? 满足时的内容 : 不满足时的内容，逻辑很直观：如果是第一个元素（@index=0），就加product-large类，否则加product-small。

方法2：直接给图片加尺寸属性（快速实现）

如果不想额外写CSS，也可以直接在模板里给图片设置width属性：

{foreach $products as $p}
  <div class="product_list">
    <!-- 第一个图设300px宽，其他150px -->
    <img src="{$p.pic}" alt="{$p.name}" {$p@index == 0 ? 'width="300"' : 'width="150"'}>
    <h2>Product {$p.name}</h2>
  </div>
{/foreach}

不过这种方式把样式写在HTML结构里，后期维护起来不如CSS方便，所以更推荐第一种方法。

额外补充：针对特定商品而非位置的情况

如果以后你的需求变成“指定商品1（比如ID为1的商品）显示大图，不管它在循环里的位置”，那也可以直接判断商品的属性：

{foreach $products as $p}
  <div class="product_list {$p.id == 1 ? 'product-large' : 'product-small'}">
    <img src="{$p.pic}" alt="{$p.name}">
    <h2>Product {$p.name}</h2>
  </div>
{/foreach}

这样就算商品顺序变动，只要ID是1的商品都会显示大图，灵活性更高。

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