0

私はcycle、HTMLのblelowでLiquidを適切に使用する方法を理解しようとしています。これは、終わりのない行、最大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の倍数でない場合（or forloop.lastテスト対象）、divを開いたままにしません。

（これは、特別な変数とその属性に関するいくつかのドキュメントです。）forloop

于 2012-08-02T14:26:58.783 に答える