如何使用pug将项目从一个数组过滤到两个单独的列表中?

时间:2019-05-05 00:36:39

标签: sorting pug logical-operators templating

我正在尝试创建一个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。我还尝试过在索引<6之前也使用forif而不是while

0 个答案:

没有答案