Jekyll中的多行博客列表

Question

Jekyll中的多行博客列表

csstwitter-bootstrap-3jekyll

5

我希望使用Jekyll和Bootstrap 3来展示我的博客文章列表，效果如下图所示： Columned blog post

你看文章是每行分成两列的吗？通过Liquid和Bootstrap 3的网格系统，能否实现相同的效果呢？

- Jordan Thornquest

4个回答

1

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

请查看我的主题中这篇示例文章，展示了列配置的示例。

- Hossain Mohd Faysal

1

一个使用四列的带解释示例：

<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>' %}

考虑第三个周期。它使用与上一个周期相同的“结束行”标识符，因此遵循相同的顺序。重点是关闭最后一行，除非上一个周期处理它。

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

- ThisClark

0

我在一个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>

- Pamela Hicks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian Specht · Accepted Answer

这实际上是两个问题。

第一个问题：如何使用Jekyll/Liquid在每行显示两篇文章？

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

循环，将每两篇文章包装在一个div中
（适用于固定数量的文章 - 如首页上最后10篇文章以每组两篇的形式显示 - 以及适用于无限数量的文章的一种解决方案）
Jekyll自动处理行
（另一种适用于无限数量的文章的解决方案，但每组有四篇文章，并提供了详细的逐步说明）

第二个问题：如何在Bootstrap中实现与您截图中类似的设计？

Bootstrap有一个页面，其中包含可供借鉴的示例设计，特别是这两个：

查看示例页面的源代码 - 基本上，您只需要使用正确的类将文章包装在几个<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>组合。

此外，你可能需要阅读有关Bootstrap网格系统的内容，以正确设置列数 (例如，上面示例代码中的class col-md-4会根据所需列数而变化)。

最后，一个实际示例：我的博客在主页上有一个类似的列表。
这是一个固定的帖子数量(最近的九篇文章，即三行三列)，因此我使用了此答案中的第一种方法。
此处是首页的源代码。
请注意，我仍在使用Bootstrap 2（而不是3），因此你不能仅仅复制粘贴我的源代码中的CSS类！