Jekyll 中的多行博客列表

Question

我想使用 Jekyll & Bootstrap 3 将我的博客文章显示在如下所示的列表中：

查看帖子是如何按每行 2 列进行分列的？ Liquid 和 Bootstrap 3 的网格系统也能达到同样的效果吗？

Answer 1

我在一个 jekyll 项目中使用了这个，在 Bootstrap 网格中显示帖子，效果很好：

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

Answer 2

使用四列的说明示例：

<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 3

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

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

Answer 4

这实际上是两个问题。

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

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

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

第二点：如何在 Bootstrap 中实现与屏幕截图中的设计相似的设计？

Bootstrap 有 a page with example designs 你可以窃取。尤其是这两个：

• Jumbotron
• Narrow jumbotron

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

例如，这是 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 类！