2012-01-23 35 views
32

Nếu tôi có vòng lặp for trong Liquid (sử dụng Jekyll), làm cách nào tôi có thể nhắm mục tiêu ngay cả (hoặc lẻ) các mục? Tôi đã thử:Mẫu chất lỏng: các mục chẵn/lẻ trong vòng lặp

{% for item in site.posts %} 
    {% if forloop.index % 2 == 1 %} 

nhưng điều đó dường như không hoạt động. Tôi cũng đã cố gắng:

(forloop.index % 2) == 1 

và:

forloop.index - (forloop.index/2 * 2) == 1 

Trả lời

52

Tôi nghĩ rằng bạn sẽ muốn sử dụng thẻ chu kỳ cho việc này. Ví dụ:

{% for post in site.categories.articles %} 
    <article class="{% cycle 'odd', 'even' %}"></article> 
{% endfor %} 

Nếu bạn muốn đánh dấu HTML khác nhau cho mỗi chu kỳ:

{% for item in site.posts %} 
    {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %} 
    {% if thecycle == 'odd' %} 
    <div>echo something</div> 
    {% endif %} 
{% endfor %} 

Bạn có thể tìm thêm thông tin về nó ở Liquid for Designers, mặc dù ví dụ không có đặc biệt hữu ích. Shopify support thread này cũng sẽ hữu ích.

+1

Nó không được chính xác những gì tôi đang tìm kiếm, nhưng liên kết mà bạn tìm thấy đã cho tôi câu trả lời thực sự. Tôi đã chỉnh sửa câu trả lời của bạn để bao gồm giải pháp của tôi. Cảm ơn! –

+0

Ngoài ra, giải pháp của bạn sẽ hoạt động nếu tôi chỉ muốn sử dụng CSS, nhưng tôi muốn chia 'site.posts' thành hai cột, do đó chỉ chuyển đổi lớp không đủ cho tôi. –

+0

Vâng, tôi đã không chắc chắn nếu bạn đang tìm kiếm để sử dụng CSS hay không. Rất vui được giúp đỡ! –

10

Ngược lại với những gì mà Shopify support thread trong Ales Lande's answer nói, có một hàm modulo trong chất lỏng - dưới hình thức the modulo filter.

Với nó, bạn có thể làm điều này:

{% for item in site.posts %} 
    {% assign mod = forloop.index | modulo: 2 %} 
    {% if mod == 0 %} 
     <!-- even --> 
    {% else %} 
     <!-- odd --> 
    {% endif %} 
{% endfor %} 
+1

Tôi thích giải pháp này tốt hơn giải pháp sử dụng 'chu kỳ'; giải quyết một vấn đề toán học bằng cách sử dụng một chuỗi có vẻ ... lẻ! –

Các vấn đề liên quan