0

我试图弄清楚如何适当地使用 Liquidcycle和 html blelow。这是一个永无止境的行，最大 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 %}

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

4

1 回答 1

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

它只循环开始和结束标签。请注意，div如果帖子数不是 3 的倍数，则会中断（保持打开状态）。

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

{% 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 的倍数（这就是测试的目的），这（理论上，我还没有测试过）不会让 div 保持打开状态or forloop.last。

（这里是一些关于特殊forloop变量及其属性的文档。）

于 2012-08-02T14:26:58.783 回答