SvelteKit GraphCMS 循环发布两个 Div 布局

Question

我正在使用 Sveltekit 和 GraphCMS。我能够让我的帖子正确循环遍历单个 div，但我想在列表中使用两个 div 来错开布局。问题是循环导致两个相同的帖子（每个交错 layout/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 的样式分开，你可以做的是像下面这样的事情，做一个非常，非常对索引的基本检查：

<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>

否则，由于您使用的是顺风，您可以使用 First, last, odd, and even 修饰符

SvelteKit GraphCMS 循环发布两个 Div 布局

SvelteKit GraphCMS Loop Posts over Two Div layout

svelte

svelte-3