Jekyll Filters are a wide range of parameters that can be used to modify the output produced by Liquid tags or objects. I will be describing two Jekyll filters which can be very useful in sorting post index. One is sort filter and the other is where filter.
- Simple Jekyll Filters
- Advanced Jekyll Filters
If you’re not sure on how to use Liquid Synatax then I suggest you go through this article: How to use Liquid Syntax in Jekyll?.
Simple Jekyll Filters
Consider this example. I’m modifying the output of the page variable
page.author which is
sharathdt using string filters.
What I have used above are simple string filters. They modify a string value. We need different way to handle array data produced by loops.
Apart from these string filters, there are plenty of other jekyll filters that may come in handy in different situations. Check them out here: Liquid Filters.
Advanced Jekyll Filters
I’m calling this advanced because these jekyll filters help us modify array outputs. An array is a set of multiple items. A list of posts that we generate in the index page is an array of posts. All the categories or tags we use in posts is an array.
Since these arrays are rendered inside a for loop, we cannot define filters right in the tag. We should filter the array first and then let it pass through the
Consider this example: Generate a list of posts arranged in alphabetical order.
We know that Jekyll sorts all the posts by date. What should we do to arrange it by their title?
Default Jekyll post list
Here is how a default post generation tag would look like. You can find this in almost all Jekyll blogs, mostly on the homepage.
I’m limiting the number of posts to only 5.
Lightweight CSS Grid Framework - 07 Aug 2017 Google Form Customization for Static Websites! - 09 Jul 2017 Jekyll Redirect 301 - 20 Jun 2017 Jekyll Pagination - 24 Mar 2017 Increase Jekyll Build Speed - 15 Mar 2017
What we observe here is that the posts are arranged by date. The latest one being at the top.
Consider this example where I have sorted posts by their title.
Sort Jekyll posts by title
We will be sorting the list first and then give it to the for loop for output.
Add or Edit Jekyll Posts through a Browser Adding Custom Domain to Github Pages Website Adding Facebook Like Button to Jekyll Blog Adding Sitemap to Jekyll Blog Adding Top Bar to Websites
Let’s arrange it in the reverse order of titles.
Why did I start WebJeda? Why did I choose Jekyll over WordPress?! The easiest search option for Jekyll Sync Files and Folders with Github Pages Simple Share Bar for Jekyll without JS!
What we see here is that the posts are rendered in reverse alphabetical order. I have used thos feature in a website of mine to arrange podcasts by author, in the homepage.
Sort Jekyll posts by categories
Many times we want the posts to be divided into different categories and displayed as a list. This can be achieved by Jekyll’s new filter -
This filter is only available for Jekyll versions 2.5 or above.
Consider this website for example. Most of my posts are about Jekyll which will have a category
jekyll. I also write posts on web designing which has a category
Web-Design. Let’s filter out all the posts that have a category Web-Design.
Lightweight CSS Grid Framework Google Form Customization for Static Websites! Night Mode Toggle Across the Website! 14 Ways to Customize your Company Website The easiest search option for Jekyll
Sort Jekyll posts by type
Jekyll posts now can be sorted by any Front Matter. It doesn’t have to be tags or categories. Let’s consider the value
author. I have author mentioned in almost all my posts like below.
Now, consider you have different authors who write articles on your blog. This can be a great way to separate posts from each author.
Lightweight CSS Grid Framework Google Form Customization for Static Websites! Jekyll Redirect 301 Jekyll Pagination Increase Jekyll Build Speed
Checkout other filters here: Jekyll Filters
Jekyll group by filter
This is a jekyll filter which groups an array of items based on the property you give. The property can be categories, tags, author or any front matter.
Here is an example for Jekyll group by filter. Imagine you want your posts to be seggregated based on authors. Let’s say you’ve multiple authors and you mentions each authors name in the front matter as shown below,
There is a simple way to sort your posts based on authors.
The output of the above code would be like this.
Which means that there are 3 authors sharath, webjeda and someone.
There are 2 posts from Sharath, 12 posts from Webjeda and 1 post from Someone.
The items fields are show with # sign which it is an array and we can dig deeper. I know that
items_grouped is an array and
items is an array.
The output would be the title of the first article written by sharath
This might have gone over your head but let me give you a working code that sorts posts based on authors.
Thanks to the developers at Github and other contributors who are adding new features to Jekyll which are making our life easy. Sorting posts based on parameters other than categories and tags was a little hard. But now, with newly added Jekyll filters, sorting is very easy.
Let me know if this has worked for you. Post your suggestions and feedback in the comment section.
This article is written by sharath.dt Follow him @webjeda.