时间戳

首页 > 解决方案 > 如何更改每 n 次迭代的代码

ruby-on-rails - 如何更改每 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 次更改一次，因此我的博客中有多个“布局”（不是 ruby​​ 意义上的）。为此，我添加了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 %>

标签： ruby-on-railsrubylayouterb

解决方案

你可以这样做：

<% @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 .... 索引，它将添加 class col-12，否则将添加 classcol-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 %>

推荐阅读