将 Jekyll 标签分为两组答案

【问题标题】：Organize Jekyll tags into two groups将 Jekyll 标签分为两组
【发布时间】：2020-11-14 22:06:14
【问题描述】：

我正在使用 Jekyll 构建一个 GitHub Pages 网站。 Bootstrap 用于网格和列布局。要列出与标签关联的所有帖子，我首先对标签进行排序，然后列出每个标签的所有帖子：

{% assign tags = site.tags | sort %}
{% for tag in tags %}
<h5>{{ tag[0] }}</h5>
<ul>
    {% for post in tag[1] %}
        <li><a href="/swift-macos{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
</ul>
{% endfor %}

在网页的单个列中创建类似这样的内容：

Tag A
- Post 1
- Post 2
- Post 3

Tag B
- Post 4
- Post 5

Tag C
- Post 6
- Post 7
- Post 8

我想将所有标签和帖子组织成两个列表，而不是所有标签及其帖子的长列表。第一个列表将在左列，而第二个列表在右列。像这样的：

Tag A        Tag C
- Post 1     - Post 6
- Post 2     - Post 7
- Post 3     - Post 8

Tag B
- Post 4
- Post 5

有没有办法将排序后的标签组织成两组，让每组都显示在一个列中？

【问题讨论】：

标签： html bootstrap-4 jekyll

【解决方案1】：

这是我想出的解决方案。第一步是获取标签的总数，然后将该数字除以 2。结果分配给x，它是数组的中间索引。这允许我将标签数组分成两组。然后我使用x 和limit 和offset 参数将每组标签列在一个列中。

<div class="row">
    <!-- x represents middle index of tags array  -->
    <!-- tags is a sorted array -->
    {% assign x = site.tags | size | divided_by: 2 | plus: 1 %}
    {% assign tags = site.tags | sort %}

    <div class="col-md">
        {% for tag in tags limit:x %}
        <h5>{{ tag[0] }}</h5>
        <ul>
            {% for post in tag[1] %}
                <li><a href="/swift-macos{{ post.url }}">{{ post.title }}</a></li>
            {% endfor %}
        </ul>
        {% endfor %}
    </div>

    <div class="col-md">
        {% for tag in tags offset:x %}
        <h5>{{ tag[0] }}</h5>
        <ul>
            {% for post in tag[1] %}
                <li><a href="/swift-macos{{ post.url }}">{{ post.title }}</a></li>
            {% endfor %}
        </ul>
        {% endfor %}
    </div>
</div>

【讨论】：