CODEWITHSUNDEEP
htmlbootstrap-4jekyll
wigging
wigging

Reputation: 9190

Organize Jekyll tags into two groups

I'm using Jekyll to build a GitHub Pages website. Bootstrap is used for the grid and column layout. To list all the posts associated with a tag, I first sort the tags then list all the posts for each tag:

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

which creates something like this in a single column on the webpage:

Tag A
- Post 1
- Post 2
- Post 3

Tag B
- Post 4
- Post 5

Tag C
- Post 6
- Post 7
- Post 8

Instead of one long list for all the tags and their posts, I would like to organize all the tags and posts into two lists. The first list will be in the left column while the second list is in the right column. Something like this:

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

Tag B
- Post 4
- Post 5

Is there a way to organize the sorted tags into two groups so that each group can be displayed in a column?

Upvotes: 1

Views: 218

Answers (1)

wigging
wigging

Reputation: 9190

This is the solution that I came up with. The first step is to get the total number of tags and approximately divide that number by 2. The result is assigned to x which is the middle index of the array. This allows me to split the tags array into two groups. Then I use x with the limit and offset parameters to list each group of tags into a column.

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

Upvotes: 0

Related Questions