Jekyll display posts by category
JekyllLiquidJekyll 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.