As @rdyar points out, you are definitely heading into JavaScript territory. Here is a starter example I found on W3Schools to sort data on a page using tables. If you want to go this route, I suspect you will want to code your page in a very specific way with HTML which is easy enough to do with Jekyll. For JavaScript, I suspect Stack Overflow would be a better place to ask the question.
That said, you could start to run into problems with JavaScript if you have too many posts and start paginating the posts. For example, imagine having a web page load, say, 25 posts out of 100. The user has to click the next button to open the next 25 and so on. Now, JavaScript is not as useful because all the content is not on one page.
A way to handle this with Jekyll is to create multiple files, each one displaying the content by a defined sort. Here is a way to accomplish what you are looking for with reusable code.
Create files that represent each sort order
In my example, I am going to put all my sorting options into a folder. If the user visits https://myjekyllsite.com/myposts, the index file displays. However, I could also link to https://myjekyllsite.com/myposts/bylength and get a list of posts sorted by the size of the content instead.
Create a folder under the root Jekyll folder and call it myposts and then add a file that represents each sort order, like this:
./myposts/index.html (displays the default Jekyll sort order)
./myposts/bydate.html (sorts oldest to newest)
./myposts/bylength.html (sorts from the shortest to the longest)
^^ Note, those could be markdown files instead of HTML
Custom YAML sortby element
Open each file and add the YAML front matter as listed below.
./myposts/index.html (no sortby)
---
layout: myposts
---
<p>Sort by Jekyll default
./myposts/bydate.html
---
layout: myposts
sortby: date
---
<p>Sort by date
./myposts/bylength.html
---
layout: myposts
sortby: length
---
Sort by length
Create the myposts layout file
The files you just created will reuse the same exact layout, so you are just creating a holding place for the content. If you do not have a folder called _layouts in your Jekyll website folder, create it and then create a file called myposts.html as follows:
./_layouts/myposts.html
---
layout: default
---
{{content}}
{%- assign sortBy = page.sortby -%}
{%- case sortBy -%}
{%- when "date" -%}
{%- assign posts = site.posts | sort: 'date' -%}
{%- when "length" -%}
{%- assign posts = site.posts | sort: page.content.size -%}
{%- else -%}
{%- assign posts = site.posts -%}
{%- endcase -%}
<h2>List of posts</h2>
{% for post in posts %}
<p></p><strong>{{post.title}} (length: {{post.content.size}}) / (date: {{post.date}})</strong>
{% endfor %}
With Jekyll running, visit each of those index.html, bydate.html, and bylength.html pages and you will notice they display the content using the same exact layout, but are sorted differently.
Code walkthrough
In the myposts.html layout file, you first get the sortby YAML front matter from the loading page (in our case, index.html, bydate.html, and bylength.html).
Next, you create a case statement that defines the list of posts you want, along with a filter that defines how you want them sorted. If there is no sortby, then the code uses Jekyll’s default sort order, which is typically newest->oldest. That is why I did not create a sortby in the index.html file. You can of course do whatever you want and add a sortby element to the index page if you want.
The last bit of code displays the lists of posts based on the sortby method you defined. In my example, I created some helper code to display the title of the post along with the length (content size) of each post and the date so you can verify the titles sort as you would expect.
Tips
-
In the layout file, you should add some hrefs or buttons that link to the various sorting options.
-
You could move all that the code from {%- assign sortBy = page.sortby -%} to {%- endcase -%} into an include file in the ./_includes folder. That way you can re-use the code for something else.
-
I did not include an example for comments as you requested because I am unsure how you would want to handle that and Jekyll does not have built-in support for comments.
-
You can get fancy and provide multiple sort types (by date, by length, descending) in your YAML front matter, but that will of course add a lot more complexity.
-
You can create more pages with more YAML front matter, like sortby: lengthdescending and add more case statements for ascending and descending sort orders. Again, I suggest you move that case statement to an include file if the code gets too bulky.
-
When you sort with Liquid, it is usually smallest->greatest or alphabetical order. For example, in my code example, if you visit the bylength.html page, it will display the post with the least amount of content first. If you want to reverse that order, use the reverse filter, like this:
{%- assign posts = site.posts | sort: page.content.size | reverse -%}
I hope this helps!