Jekyll display posts by category

JekyllLiquid

Jekyll Problem Overview


scratching my head over this - help much appreciated.

I want to display a list of all my Jekyll posts, organised by category. I know Line 3 isn't correct but I can't figure out what it should be. Any ideas? Thanks!

{% for category in site.categories %}
    <h3>{{ category | first }}</h3>
    {% for post in page.categories.category %}
      {{ post.title }}<br>
    {% endfor %}			
{% endfor %}

Jekyll Solutions


Solution 1 - Jekyll

Got it! Needed an intermediate posts loop before listing out individual posts

<ul>
{% for category in site.categories %}
  <li><a name="{{ category | first }}">{{ category | first }}</a>
    <ul>
    {% for post in category.last %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
    </ul>
  </li>
{% endfor %}
</ul>

Solution 2 - Jekyll

fyi, if anyone wants to just list the posts in one category, this works (differs from above example as the category returns a list of posts...

<p>Posts in category "basic" are:</p>

<ul>
  {% for post in site.categories.basic %}
	{% if post.url %}
		<li><a href="{{ post.url }}">{{ post.title }}</a></li>
	{% endif %}
  {% endfor %}
</ul>

Solution 3 - Jekyll

Now there is an official plugin available for this. jekyll-archives.

In order to make use of it,

Add jekyll-archives to your Gemfile and _config.yml file.

add a configuration something similar to the below as per your need.

jekyll-archives:
  enabled: all
  layouts:
    year: archive/year
    month: archive/month
    day: archive/day
    tag: archive/tag
    category: archive/category
  permalinks:
    year: '/:year/'
    month: '/:year/:month/'
    day: '/:year/:month/:day/'
    tag: '/tags/:name/'
    category: '/category/:name/'

The layouts can make use of the following page attributes depending on the archive type.

  • page.type - (Any one fo the following. year, month, day, tag, category)
  • page.title - (Only available for the type tag and category. Nil otherwise.)
  • page.date - (Depending on page.type you should parse out the date and month field )
  • page.posts - (List of posts for this archive)

Here is a sample layout for archive based on years

<h1>Archive of posts from {{ page.date | date: "%Y" }}</h1>
<ul class="posts">
{% for post in page.posts %}
  <li>
    <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
    <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
  </li>
{% endfor %}
</ul>

Solution 4 - Jekyll

<h5>Categories</h5>
{% for category in site.categories %}
    {% assign cat = category[0] %}
    <h6><a href="#">{{ cat }}</a></h6>
    {% for post in site.categories[cat] %}
        <a href="{{ post.url }}">{{ post.title }}</a> <small>{{ post.date }}</small>
    {% endfor %}
{% endfor %}

Solution 5 - Jekyll

I can't recall the exact syntax off-hand but something like the following code should retrieve the category names to allow your to retrieve posts for each category...

{% for category in site.categories %}

   {% assign cat_name = category[0] %}

  {% for post in site.categories.cat_name %}

       ...

  {% endfor%}

 {% endfor %}

Solution 6 - Jekyll

Here's an answer that uses sorting (useful!):

{% comment %}
#
#  Change date order by adding '| reversed'
#  To sort by title or other variables use {% assign sorted_posts = category[1] | sort: 'title' %}
#
{% endcomment %}
{% assign sorted_cats = site.categories | sort %}
{% for category in sorted_cats %}
{% assign sorted_posts = category[1] | reversed %}
<h2 id="{{category[0] | uri_escape | downcase }}">{{category[0] | capitalize}}</H2>
<ul>
  {% for post in sorted_posts %}
	<li><a href="{{ site.url }}{{ site.baseurl }}{{  post.url }}">{{  post.title }}</a></li>
  {% endfor %}
</ul>
{% endfor %}

This is not mine, it's taken from here.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlex GView Question on Stackoverflow
Solution 1 - JekyllAlex GView Answer on Stackoverflow
Solution 2 - JekylltimView Answer on Stackoverflow
Solution 3 - JekyllRaja AnbazhaganView Answer on Stackoverflow
Solution 4 - JekyllIlan OlkiesView Answer on Stackoverflow
Solution 5 - JekylljtbView Answer on Stackoverflow
Solution 6 - JekyllpgrView Answer on Stackoverflow