如何每n次迭代更改代码

问题描述

我在.erb文档中得到了以下代码：

<% @blog.order("created_at DESC").each do |d| %>

       <!-- Blog Card -->
       <div class="col-12 mb-3 mb-sm-7">
        <article class="row align-items-lg-center">
          <div class="col-lg-8">
            <%= image_tag d.image.to_s,class:"img-fluid rounded" %>
          </div>

          <div class="col-lg-4">
            <div class="py-5 px-lg-3">
              <span class="d-block mb-2">
                <p class="small text-body font-weight-bold text-cap"><%= d.tag_list %></p>
              </span>
              <h2>
                <%= link_to d.title,d,class:"text-inherit" %>
              </h2>
              <p><%= d.summary.truncate(100) %></p>
              <%= link_to "read more",d %>
            </div>
          </div>
        </article>
      </div>
      <!-- End Blog Card -->

<% end %>

我希望代码每n次更改一次，因此我的博客中有多个“布局”（不是红宝石）。为此，我添加了一个带有以下代码的if clause：

<% if d.id % 5 == 0 %>

不幸的是，这种方法不能很好地工作，因为我想将布局替代项编织到常规布局中，如下所示：

┌─────────┐
└─────────┘
┌──┐┌──┐┌─┐
└──┘└──┘└─┘
┌─────────┐
└─────────┘
┌──┐┌──┐┌─┐
└──┘└──┘└─┘

那么一篇大文章，下一行有三篇小文章，等等。

编辑： 交替的布局如下所示：

      <div class="order-lg-1 col-sm-6 col-lg-4 mb-3 mb-sm-7">
        <!-- Blog -->
        <article
          class="card align-items-start flex-wrap flex-row h-380rem gradient-y-overlay-sm-dark bg-img-hero rounded-pseudo transition-3d-hover"
          style="background-image: url('<%= d.image.to_s %>');">
          <div class="card-header border-0 bg-transparent w-100">
            <p class="small text-white font-weight-bold text-cap mr-2"><%= d.tag_list %></p>
          </div>

          <div class="card-footer border-0 bg-transparent mt-auto">
            <%= link_to d do %>
            <h3 class="text-white"><%= d.title %></h3>
            <span class="text-white-70">Read more<i class="fas fa-angle-right fa-sm ml-1"></i></span>
            <% end %>
          </div>
        </article>
        <!-- End Blog -->
      </div>

如何实现这种布局？

解决方案

我成功地结合了.each_with_index和局部使用来完成了我想做的事情。像这样：

<% @blog.order("created_at DESC").each_with_index do |d,index| %>

<%= index % 4 == 0 ? render("blog/var1",d: d) : render("blog/var2",d: d) %>

<% end %>

解决方法

您可以执行以下操作：

<% @blog.order("created_at DESC").each_with_index do |d,index| %>

       <!-- Blog Card -->
       <div class="col-#{index % 4 == 0 ? '12' : '4'} mb-3 mb-sm-7">
        <article class="row align-items-lg-center">
          <div class="col-lg-8">
            <%= image_tag d.image.to_s,class:"img-fluid rounded" %>
          </div>

          <div class="col-lg-4">
            <div class="py-5 px-lg-3">
              <span class="d-block mb-2">
                <p class="small text-body font-weight-bold text-cap"><%= d.tag_list %></p>
              </span>
              <h2>
                <%= link_to d.title,d,class:"text-inherit" %>
              </h2>
              <p><%= d.summary.truncate(100) %></p>
              <%= link_to "read more",d %>
            </div>
          </div>
        </article>
      </div>
      <!-- End Blog Card -->

<% end %>

这意味着，对于每个0、4、8、12 ....索引，它将添加类col-12，否则将添加类col-4

编辑：

是的，可以将整个部分插入为代码：

可以说，您为小卡片和大卡片分别创建了两个文件。 _small_blog_card.html.erb和_big_blog_card.html.erb

<% @blog.order("created_at DESC").each_with_index do |d,index| %>

  <% if index % 4 == 0 %>
    <%= render partial: 'big_blog_card',locals: {pass your data} %>
  <% else %>
    <%= render partial: 'small_blog_card',locals: {pass your data} %>
  <% end %>

<% end %>