Widget: Recent posts

A most common widget is the "recent posts" widget. Usually on the left or right side of a screen.

It is a simple widget that is a nice illustration of how to do some Liquid programming.

(Remember from yesterday that the top level "default" layout includes the right-aside)

The right-side.html looks as follows:



Yup, nothing special.

The widget itself looks as follows:



Btw, my site is in Dutch, so the <h1> text may look a little odd to you ;-)

The first Liquid tag "for" iterates over all posts that are present in the site. Note that the posts are in reverse chronological order. The "site.posts" is a site variable provided by Jekyll.

The "forloop" is a Liquid object containing attributes of the enclosing for loop. The "index" attribute refers -of course- to the index of the for loop. In contrast to many languages, the index attributes starts at 1 (i.e. not at zero!).

The "break" statement is used to abort the loop one the number of links is greater than 3.

The "post" variable is created in the for loop and refers to a post. Note that you can use any name, it does not have to be 'post'. Though it does kind-of make sense. Through the 'post' variable we have access to the predefined tags and the tags defined in the front matter for that post. The 'url' and 'date' attributes are predefined. The 'title' is read from the front-matter.

I also filter the 'date' with the Liquid "date" filter to obtain only the Year-Month-Day part of the date as I am not interested in the time.

All in all a simpel introduction into Liquid for a very useful widget.

Oh, I almost forgot, there is of course an associated SCSS file for this widget:



In showing you this SCSS it occurs to me that I have to clean up the layout SCSS, as the fix for the layout problem in the narrowLayout should not be at this level! Sorry for that...