如何解决如何每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 %>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。