第一：如何用Jekyll / Liquid显示每行中的两个帖子？

我昨天回答了两个类似的问题：

For loop, wrap every two posts in a div
（一个固定数量的帖子的解决方案 - 就像首页上的两个一组中的最后10个帖子 - 以及一个无限数量帖子的解决方案）
Jekyll automatically processing rows
（另一种解决方案，帖子数量无限，但每组有四个帖子，并附有详细的逐步说明）

第二：如何实现类似于Bootstrap屏幕截图设计的设计？

Bootstrap有a page with example designs你可以偷。特别是这两个：

查看示例页面的源代码 - 基本上，您只需要使用正确的类将文章包装在几个<div>中。

例如，这是Jumbotron示例中的三个块的源代码

<div class="row">
  <div class="col-md-4">
    <h2>Heading</h2>
    <p>blah</p>
  </div>
  <div class="col-md-4">
    <h2>Heading</h2>
    <p>blah</p>
 </div>
  <div class="col-md-4">
    <h2>Heading</h2>
    <p>blah</p>
  </div>
</div>

您只需要修改我的其他答案（上面链接）中的代码示例，以便它们生成<div> s的类似组合。

另外，您可能需要阅读Bootstrap's grid system以获取正确的列（例如，上面示例代码中的类col-md-4因您想要的列数而异）

最后，一个真实的例子：My blog在首页上有类似的列表这是一个固定数量的帖子（最后九个，三个三行），所以我使用this answer的第一个方法。
The source code of the front page is here。
请注意，我仍然使用Bootstrap 2 （而不是3），因此您不能只从我的源代码中复制和粘贴CSS类！

Answer 2

我使用Bootstrap 3为Jekyll设计了一个主题。我知道很多人都想要bootstrap的列功能。

从显示示例列配置的主题中查看this sample post。

Answer 3

使用四列的解释示例：

<div class="container">

    {% for post in site.posts %}

        {% cycle 'add row' : '<div class="row">', nil, nil, nil %}

            <div class="col-sm-3">
                <!-- liquid tags here -->
            </div>

        {% cycle 'end row' : nil, nil, nil, '</div>' %}

    {% endfor %}
    {% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}

</div>

考虑第一个周期。通过循环的第一次和第四次迭代，添加了一个新的行div。剩下的时间没有因为nil参数而发生。

{% cycle 'add row' : '<div class="row">', nil, nil, nil %}

考虑第二个周期。通过循环的每第四次迭代，行div被关闭。其他迭代通过nil，没有任何反应。

{% cycle 'end row' : nil, nil, nil, '</div>' %}

考虑第三个周期。这使用与前一个周期相同的end row标识符，因此它遵循相同的顺序。关键是要关闭最后一行，除非上一个周期处理它。

{% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}

最后，要使用Bootstrap获取正确数量的列，请使用适当的单元类。我使用.col-sm-3获取四列（12/3）以显示在台式机和平板电脑上，但不显示在手机上。

<div class="col-sm-3"></div>

对于三列，请使用：

{% cycle 'add row' : '<div class="row">', nil, nil %}
{% cycle 'end row' : nil, nil, '</div>' %}
{% cycle 'end row' : nil, '</div>', '</div>' %}
<div class="col-sm-4"></div>

对于两列，请使用：

{% cycle 'add row' : '<div class="row">', nil %}
{% cycle 'end row' : nil, '</div>' %}
{% cycle 'end row' : nil, '</div>' %}
<div class="col-sm-6"></div>

Answer 4

我在一个显示Bootstrap网格中的帖子的jekyll项目中实现了这一点，它很有用：

<div class="container">

    <div class="row">

        <ul>
            {% for product in site.pages %}
            {% if product.sub-category == 'sample-category' %}

            <li>
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <a href="{{ product.url }}">
                        <img src="{{ product.img }}" />
                        <h3>{{ product.title }}</h3>
                        <h4>{{ product.part_number }}</h4>
                    </a>
                </div>
            </li>

            {% endif %}
            {% endfor %}

        </ul>

    </div>

</div>

杰基尔的多排博客列表

4 个答案:

第一：如何用Jekyll / Liquid显示每行中的两个帖子？

第二：如何实现类似于Bootstrap屏幕截图设计的设计？