SvelteKit GraphCMS循环在两个分区布局上发布

Question

我正在与Sveltekit和GraphCMS合作。我能够让我的帖子正确地循环在一个div上，但是我希望在列表中使用两个div来错开布局。问题是，循环产生了两个相同的员额(每个交错布局/div中一个)。循环每个列表项的最佳方法是什么？提前感谢！

下面是循环：

      <ul>
        {#each posts as post}
        <!-- first item -->
          <li>
            <div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
              <div class="w-full lg:w-2/5 px-4">
                <div class="text-left lg:max-w-md">
                  <span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
                  <h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
                  <span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
                  <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
              </div>
              <div class="order-first lg:order-last w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
                <div class="h-96">
                  <img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
                </div>
              </div>
            </div>
           </li>
           <!-- second item -->
           <li>
            <div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
              <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
                <div class="h-96">
                  <img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
                </div>
              </div>
              <div class="w-full lg:w-2/5 px-4">
                <div class="text-left lg:max-w-md lg:ml-auto">
                  <span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
                  <h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
                  <span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
                  <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
              </div>
            </div>
           
          </li>
          {/each} 
        </ul>

Answer 1

根据我所能理解的，我相信您正在尝试将奇数和偶数div的样式分开，您可以做的事情如下，对索引做一个非常、非常的 basic检查：

<ul>
        {#each posts as post, index}
   <li>
        {#if !(index % 2)} 
        <!-- first item -->
          
            <div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
              <div class="w-full lg:w-2/5 px-4">
                <div class="text-left lg:max-w-md">
                  <span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
                  <h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
                  <span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
                  <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
              </div>
              <div class="order-first lg:order-last w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
                <div class="h-96">
                  <img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
                </div>
              </div>
            </div>
           
           {:else}
           <!-- second item -->
           
            <div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
              <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
                <div class="h-96">
                  <img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
                </div>
              </div>
              <div class="w-full lg:w-2/5 px-4">
                <div class="text-left lg:max-w-md lg:ml-auto">
                  <span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
                  <h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
                  <span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
                  <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
              </div>
            </div>
           
          
          {/if}
   </li>
          {/each} 
        </ul>

否则，由于您使用的是顺风，您可以使用第一、最后、奇数和偶数修饰符