How to show Jekyll posts from one category, sorted by tags

Here is my solution that allows your Jekyll page to show blog posts from one category, sorted by tags.

Like this:

We’ll use the category/categories and the tags variables in Jekyll posts’ front matter.

First, in your year-month-date-post.md in the _posts folder, put down both the post’s category (which will be used to select whether this post shows up on a specific page at all), and its tags (which the page will use to sort where the post shows up on the page). For example, this post will only show up on a page that shows the category 'Casual posts', and it will show under the 'Food' section:

---
layout: post
categories: ['Casual posts']
tags: ['Food']
---

Example text

<!--excerpt-->

Example text Example text Example text Example text Example text Example text 

Insert  to separate the post excerpt from other texts.

In the page.md where you want to show posts, specify the category and the tags of posts to show on this page. If your post satisfies more than one tag specified in tags, the post will show up more than once. For example, this page will only show posts with the category 'Casual posts' and at least one of the following tags: 'Food', 'Travel', or 'My hobbies':

---
layout: my-layout
title: Example sort by category page
permalink: /my-blog/
category: 'Casual posts'
tags: ['Food', 'Travel', 'My hobbies']
---

In your my-layout.html in the _layouts folder, use for loops to (1) make a list of tags to allow readers to easily navigate to each tag; and (2) show posts sorted by tags.

<div>
{%- if page.title -%}
    <h1>{{ page.title }}</h1>
{%- endif -%}

<!-- a list of tags to show up at the top of the page -->
<ul  style="list-style-type: none">
    {% for i in page.tags %}
        <li><a href="#{{ i | slugify }}">{{ i }}</a></li>
    {% endfor %}
</ul>

{{ content }}

<!-- sort posts by tags -->
{% for item in page.tags %}
    <h2>{{ item }}</h2><a name="{{ item | slugify }}"></a>
    <ul style="list-style-type: none">
    {% for post in site.tags[item] %}
        <li>
        <h3>
            <a href="{{ post.url | relative_url }}">
                {{ post.title | escape }}
            </a>
        </h3>
        <span>{{ post.date | date_to_long_string }}</span>
        {{ post.excerpt }}
        {% if post.content contains site.excerpt_separator %}
            <a href="{{ site.baseurl }}{{ post.url }}">Read more</a>
        {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endfor %}

</div>

Finally, in your site’s _config.yml, specify the excerpt separator:

excerpt_separator: "<!--excerpt-->"

Now you can have pages that show posts from one category while sorted by tags!

(I learned pieces of this solution online such as this answer and this answer, and someone else’s blog that I cannot find in my history anymore (the part about excerpts and readmore). So Let me know if you think that parts of my solution are from your post!)

Related Posts