高级循环使用？答案

【问题标题】：advanced cycle usage?高级循环使用？
【发布时间】：2012-07-31 18:46:14
【问题描述】：

我正在尝试弄清楚如何将 Liquid 的cycle 与 html 适当地结合使用。这是一个永无止境的行，最多 3 列 (float:left) 布局。

<!-- row -->
<div class="single-post-container">
   <div class="single-post-item">
      <div class="single-post-head">
         <a href="{{ post.url }}" />
         <h6>{{ post.title }}</h6>
      </div>
   </div>
   <div class="single-post-item">
      <div class="single-post-head">
         <a href="{{ post.url }}" />
         <h6>{{ post.title }}</h6>
      </div>
   </div>
   <div class="single-post-item">
      <div class="single-post-head">
         <a href="{{ post.url }}" />
         <h6>{{ post.title }}</h6>
      </div>
   </div>
</div>
<!-- row -->
<div class="single-post-container">
   <div class="single-post-item">
      <div class="single-post-head">
         <a href="{{ post.url }}" />
         <h6>{{ post.title }}</h6>
      </div>
   </div>
   <div class="single-post-item">
      <div class="single-post-head">
         <a href="{{ post.url }}" />
         <h6>{{ post.title }}</h6>
      </div>
   </div>
   <div class="single-post-item">
      <div class="single-post-head">
         <a href="{{ post.url }}" />
         <h6>{{ post.title }}</h6>
      </div>
   </div>
</div>

我能够用这个丑陋的东西让它工作一半（{{ post.title }} 字面上显示而不是实际标题）：

{% for post in site.posts %}

   column {%cycle '<div class="single-post-container"><div class="single-post-item"><div class="single-post-head"><a href="{{ post.url }}" /><h6>{{ post.title }}</h6></div></div>', '<div class="single-post-item"><div class="single-post-head"><a href="{{ post.url }}" /><h6>{{ post.title }}</h6></div></div>', '<div class="single-post-item"><div class="single-post-head"><a href="{{ post.url }}" /><h6>{{ post.title }}</h6></div></div></div>'%}

{% endfor %}

请帮忙！也许有更好的方法？

【问题讨论】：

标签： ruby jekyll liquid

【解决方案1】：

cycle 标记中的字符串不会被处理，因此不会发生液体替换（这就是为什么 {{ post.title }} 确实存在的原因）。

更好的方法可能是这样的：

{% for post in site.posts %}
  {% cycle '<div class="single-post-container">', '', '' %}
  <div class="single-post-item">
    <div class="single-post-head">
      <a href="{{ post.url }}" />
      <h6>{{ post.title }}</h6>
    </div>
  </div>
  {% cycle '', '', '</div> %}
{% endfor %}

只循环开始和结束标签。请注意，如果帖子数不是 3 的倍数，这将中断（留下 div 打开）。

基于上述情况，一个更好的解决方案可能是：

{% for post in site.posts %}
  {% capture mod_three %}{{ forloop.index0 | modulo: 3 }}{% endcapture %}
  {% if mod_three == '0' %}
    <div class="single-post-container">
  {% endif %}
      <div class="single-post-item">
        <div class="single-post-head">
          <a href="{{ post.url }}" />
          <h6>{{ post.title }}</h6>
        </div>
     </div>
  {% if mod_three == '2' or forloop.last %}
     </div>
  {% endif %}
{% endfor %}

如果帖子数量不是 3 的倍数（这就是 or forloop.last 正在测试的内容），这（理论上，我还没有测试过）不会让 div 保持打开状态。

（Here is some documentation 关于特殊的forloop 变量及其属性。）

【讨论】：