Jekyll - Add Estimated Reading Time To Posts
Adding the estimated reading time of your article provides valuable context for readers. They can decide if they want to read your article now or bookmark it and save it for later.
It’s a feature seen most commonly on the Medium platform but you can replicate this feature on your Jekyll site.
After some tweaking, I have been able to add this feature to my website (it’s actually pretty simple) so I’d like to share the process with you.
Let’s start with the site structure to understand how things fit together.
In this case, there are two parts:
- In the _layouts folder, I have a template file called article.html. This holds the code for article pages.
- The CSS styling (in my case I’m working in SASS but it doesn’t matter).
Estimated Time To Read Code
Here’s the code I added to achieve estimated reading time in article.html:
The first 3 lines of code will “capture” the number of words in the article and store it in the variable called words.
The next section calculates and outputs the estimated reading time.
To do this we divide the number of words in the article by 180.
180 is the average amount of words per minute people read (according to Wikipedia).
As you can see I’m using a Font-Awesome bookmark icon but you can leave this out if you don’t want it.
I finished by adding some CSS via the readingTime class to make the font pink.
Enjoy Reading This Article?
Here are some more articles you might like to read next:
- Jekyll - How To Enable Incremental Regeneration To Speed Up Build Times
- Jekyll - How To Determine Build Times
- Jekyll - How To Limit Posts During The Build Process
- Jekyll - Creating External Links That Open In A New Tab
- Keep A Web Dev Notebook To Learn More Effectively
Want To Improve Your Design Skills?
Design Insight is a weekly newsletter filled with design resources, tips, and insights to make you a better designer. It's sent directly to your inbox every Friday.
Click the button below to go to the Design Insight newsletter and sign up.I'm Interested!