1
votes

In Jekyll I filter posts by tags displating a list of the posts which have the assigned tag like this:

---
layout: layout
---
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}

<li itemprop="name" itemprop=name>{{ post.title }}</li>

{% endif %}
{% endfor %}
{% endfor %}
</ul>

Burt what I'd like to do is display the categories which have posts of the tag and the posts listed under each category.


Example use case

Category 1 has post 1, post 2, post 3. Category 2 has post 4, post 5, post 6. Category 3 has post 7

Posts 1,2,4 have tag Tag1.

The tag page should display Category 1 + Post 1, post 2. Category 2 + Post 4.


On the homepage I display categories with all posts under each category like this:

{% assign counter=0 %}
<main id="page" role="main">
{% for category in site.categories %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
    <div class="colheader">
        <div class="bar"></div>
        <p class="lead">Leadin text</p>
        <h1>{{ category | first }}</h1>
    </div>
    <div class="colscroll unlock">
{% for posts in category %}
{% for post in posts %}
    <div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">    
        <div class="excerpt">
            <time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
                {{ page.date | date: '%B %d, %Y' }}
            </time>
        <h1>
            <a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
                <span itemprop="name" itemprop=name>{{ post.title }}</span>
            </a>
        </h1>                        
        <p itemprop="description">
            {{ post.excerpt }}..
        </p>
        <p class="link_tags">{{ page.tags }}</p>
        </div>
    </div>
{% endfor %}
{% endfor %}
    </div>
</div>
{% endfor %}
</main>

So on the tag page I try to achieve what I want like this but it is returning all categories and all posts just like the homepage rather than filtering by the tag.

---
layout: layout
---
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}


{% assign counter=0 %}
<main id="page" role="main">
{% for category in site.categories %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
    <div class="colheader">
        <div class="bar"></div>
        <p class="lead">Leadin text</p>
        <h1>{{ category | first }}</h1>
    </div>
    <div class="colscroll unlock">

{% for posts in category %}
{% for post in post.tags %}
        <div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">    
            <div class="excerpt">
                <time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
                    {{ page.date | date: '%B %d, %Y' }}
                </time>
                <h1>
                    <a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
                        <span itemprop="name" itemprop=name>{{ post.title }}</span>
                    </a>
                </h1>                        
                <p itemprop="description">
                    {{ post.excerpt }}..
                </p>
                <p class="link_tags">{{ page.tags }}</p>
            </div>
        </div>
{% endfor %}
{% endfor %}
    </div>
</div>
{% endfor %}
</main>

{% endif %}
{% endfor %}
{% endfor %}
</ul>

I alsio tried this but it returns a blank page

---
layout: layout
---
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}


{% assign counter=0 %}
<main id="page" role="main">
{% for category in tag.categories %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
    <div class="colheader">
        <div class="bar"></div>
        <p class="lead">Leadin text</p>
        <h1>{{ category | first }}</h1>
    </div>
    <div class="colscroll unlock">

{% for posts in category %}
{% for post in tag.posts %}
        <div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">    
            <div class="excerpt">
                <time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
                    {{ page.date | date: '%B %d, %Y' }}
                </time>
                <h1>
                    <a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
                        <span itemprop="name" itemprop=name>{{ post.title }}</span>
                    </a>
                </h1>                        
                <p itemprop="description">
                    {{ post.excerpt }}..
                </p>
                <p class="link_tags">{{ page.tags }}</p>
            </div>
        </div>
{% endfor %}
{% endfor %}
    </div>
</div>
{% endfor %}
</main>

{% endif %}
{% endfor %}
{% endfor %}
</ul>

The live site template is up on Github. (tags list is the second circular icon from the left at the top of the page)

1

1 Answers

3
votes

I think that's what your looking for :

---
layout: default
---

<main id="page" role="main">
{% for category in site.categories %}
    {% assign counter=0 %}
    {% for posts in category %}
        {% for post in posts %}
            {% if post.tags contains page.tag %}
                {% assign counter=counter | plus:1 %}
            {% endif %}
        {% endfor %}
    {% endfor %}

{% if counter != 0 %}

<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
    <div class="colheader">
        <div class="bar"></div>
        <p class="lead">Leadin text</p>
        <h1>{{ category | first }}</h1>
    </div>
    <div class="colscroll unlock">
{% for posts in category %}
{% for post in posts %}
{% if post.tags contains page.tag %}
    <div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">
        <div class="excerpt">
            <time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
                {{ page.date | date: '%B %d, %Y' }}
            </time>
        <h1>
            <a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
                <span itemprop="name" itemprop=name>{{ post.title }}</span>
            </a>
        </h1>
        <p itemprop="description">
            {{ post.excerpt }}..
        </p>
        <p class="link_tags">{{ page.tags }}</p>
        </div>
    </div>
{% endif %}
{% endfor %}
{% endfor %}
    </div>
</div>
{% endif %}
{% endfor %}
</main>

I've just modified your homepage code.

Edit: added conditional code. Print only categories that contains posts with current tag.