发表新帖

Multi-row blog list in Jekyll

后端未结

关注

 4  723

-上瘾入骨i 2021-02-06 14:23

I want to use Jekyll & Bootstrap 3 to present my blog posts in a listing that looks like this:

4条回答

一生所求 (楼主)

2021-02-06 14:42

An example with explanation that uses four columns:



    {% for post in site.posts %}

        {% cycle 'add row' : '', nil, nil, nil %}

            
                
            

        {% cycle 'end row' : nil, nil, nil, '' %}

    {% endfor %}
    {% cycle 'end row' : nil, '
', '

', '

' %}

Consider the first cycle. The first and every fourth iteration through the loop, a new row div is added. The rest of the time nothing happens because of the nil arguments.

{% cycle 'add row' : '', nil, nil, nil %}

Consider the second cycle. Every fourth iteration through the loop the row div is closed. The other iterations pass through nil and nothing happens.

{% cycle 'end row' : nil, nil, nil, '

' %}

Consider the third cycle. This uses the same end row identifier as the previous cycle, so it follows the same order. The point is to close the last row except in the case when the previous cycle handles it.

{% cycle 'end row' : nil, '

', '

' %}

Finally, to get the right number of columns with Bootstrap, use the appropriate cell class. I used .col-sm-3 to get four columns (12/3) to display on desktops and tablets but not phones.

For three columns, use:

{% cycle 'add row' : '', nil, nil %}
{% cycle 'end row' : nil, nil, '' %}
{% cycle 'end row' : nil, '', '' %}

For two columns, use:

{% cycle 'add row' : '', nil %}
{% cycle 'end row' : nil, '' %}
{% cycle 'end row' : nil, '' %}

0 讨论(0)

查看其它4个回答

热议问题