Smarty模板下已上传图片标签连续排序问题求助

场景说明 #

现有一组图片，其中image1、3、5、6已上传，image2、4未上传。需要仅为已上传图片生成标签，且标签序号保持连续：

期望效果：
image 1
image 2
image 3
image 4

原始代码问题 #

原始代码会遍历所有$galleryItems，无论图片是否上传都生成标签，最终显示全部6个序号：

<ul class="navigation-list">
  {capture $featuredtLabel}{__ 'Image 1'}{/capture}
  {capture $defaultLabel}{__ 'Image'}{/capture}
  {foreach $galleryItems as $item}
  <li class="navigation-item{if $iterator->first} active{/if}">
    {var $label = !empty($item['title']) ? $featuredtLabel : ($defaultLabel . ' ' . $iterator->counter)}
    <a href="#">{!$label}</a>
  </li>
  {/foreach}
</ul>

原始代码输出：
image 1
image 2
image 3
image 4
image 5
image 6

修改后代码的问题 #

修改后虽能过滤未上传图片，但序号计算逻辑错误，导致序号不连续：

<ul class="navigation-list">
                {capture $featuredtLabel}{__ 'Image 1'}{/capture}
                {capture $defaultLabel}{__ 'Image'}{/capture}
                {var $count = 1}        
                {foreach $galleryItems as $item}
                <li class="navigation-item{if $iterator->first} active{/if}">                           
                    {if !empty($item['image'])}
                        {var $count = $count + 1}
                        {var $label = !empty($item['title']) ? $featuredtLabel : ($defaultLabel . ' ' . $count)}
                        <a href="#">{!$label}</a>
                    {/if}
                </li>
                {/foreach}
            </ul>

修改后输出：
image 1
image 3
image 4
image 5

解决方案 #

核心调整三点：

1. 仅在图片存在时才生成<li>元素，避免空列表项
2. 仅在图片存在时递增计数，保证序号连续
3. 单独跟踪第一个已上传图片的active类（不再依赖遍历的第一个元素）

修正后的代码：

<ul class="navigation-list">
    {capture $featuredtLabel}{__ 'Image 1'}{/capture}
    {capture $defaultLabel}{__ 'Image'}{/capture}
    {var $count = 0}        
    {var $isFirstActive = true}
    {foreach $galleryItems as $item}
        {if !empty($item['image'])}
            {var $count = $count + 1}
            {var $label = !empty($item['title']) ? $featuredtLabel : ($defaultLabel . ' ' . $count)}
            <li class="navigation-item{if $isFirstActive} active{/if}">                           
                <a href="#">{!$label}</a>
            </li>
            {var $isFirstActive = false}
        {/if}
    {/foreach}
</ul>

逻辑说明 #

• $count初始为0，每遇到一张已上传图片就+1，确保序号从1开始连续递增
• $isFirstActive变量专门标记第一个已上传的图片，避免遍历到未上传的第一个元素时错误添加active类
• 将<li>标签包裹在if !empty($item['image'])内部，不会生成空的列表项

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