首页 > 解决方案 > 如何使用 pug 从一个数组中将项目过滤到两个单独的列表中?

问题描述

我正在尝试创建一个 pug mixin,它可以根据生成的列表的长度处理不同的格式。我让它能够接受无限的值,并且可以生成一个列表没问题。

当我尝试按索引对项目进行排序以创建多个列表时,代码要么<ul>为每个列表生成一个新列表,要么<li>根本不为更长的列表格式生成一个新列表。

如果 items 数组的长度大于 5,我该如何做到这一点,它将前 5 个项目放在列表 1 中,其余的放在第二个列表中?

代码:

mixin panelList(...items)
  if items.length < 6
      ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
        each item in items
          li.list-item.my-lg-1= item
  else   
      each item in items    
         .row.row-12
           while index < 6 
             ul.list-unstyled.col.col-12.col-lg-6.offset-sm-4.offset-md-0.offset-lg-0.d-none.d-lg-inline
               li.list-item.my-lg-1= item
          while index > 5 
             ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
               li.list-item.my-lg-1= item

mixin panelList(...items)
  if items.length < 6
      ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
        each item in items
          li.list-item.my-lg-1= item
  else   
      each item in items
       .row.row-12
          while index < 6 
             ul.list-unstyled.col.col-12.col-lg-6.offset-sm-4.offset-md-0.offset-lg-0.d-none.d-lg-inline
               li.list-item.my-lg-1= item
          while index > 5 
             ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
               li.list-item.my-lg-1= item

通过以下方式实现:

+panelList("this", "is", "working", "great")工作正常

问题在于这样的列表:

+panelList("this", "is", "not", "working", "quite", "as", "intended", "yet")

我尝试过排序,%但它会<ul>为每个项目生成一个新的。我尝试过使用 item.index 和 index。我也尝试过使用forandif而不是while在 index < 6 之前。

标签: sortingpuglogical-operatorstemplating

解决方案


推荐阅读